'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import styles from './resource-guides.module.css';

interface ResourceCategory {
  id: string;
  name: string;
  slug: string;
  sortOrder: number;
  _count: {
    guides: number;
  };
}

interface ResourceGuide {
  id: string;
  title: string;
  slug: string;
  status: 'draft' | 'published';
  sortOrder: number;
  publishedAt: string | null;
  updatedAt: string;
  category: {
    id: string;
    name: string;
    slug: string;
  };
}

export default function AdminResourceGuidesPage() {
  const router = useRouter();
  const [categories, setCategories] = useState<ResourceCategory[]>([]);
  const [guides, setGuides] = useState<ResourceGuide[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [categoryFilter, setCategoryFilter] = useState<string>('all');

  // Category modal state
  const [showCategoryModal, setShowCategoryModal] = useState(false);
  const [categoryModalMode, setCategoryModalMode] = useState<'create' | 'edit'>('create');
  const [editingCategory, setEditingCategory] = useState<ResourceCategory | null>(null);
  const [categoryName, setCategoryName] = useState('');
  const [categoryLoading, setCategoryLoading] = useState(false);

  // New guide modal state
  const [showNewGuideModal, setShowNewGuideModal] = useState(false);
  const [newGuideTitle, setNewGuideTitle] = useState('');
  const [newGuideCategoryId, setNewGuideCategoryId] = useState('');
  const [newGuideLoading, setNewGuideLoading] = useState(false);

  const fetchCategories = useCallback(async () => {
    try {
      const response = await fetch('/api/admin/resource-categories');
      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.error || 'Failed to fetch categories');
      }
      setCategories(result.categories);
      return result.categories;
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch categories');
      return [];
    }
  }, []);

  const fetchGuides = useCallback(async () => {
    try {
      const url =
        categoryFilter === 'all'
          ? '/api/admin/resource-guides'
          : `/api/admin/resource-guides?categoryId=${categoryFilter}`;
      const response = await fetch(url);
      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.error || 'Failed to fetch guides');
      }
      setGuides(result.guides);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch guides');
    }
  }, [categoryFilter]);

  useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      await Promise.all([fetchCategories(), fetchGuides()]);
      setLoading(false);
    };
    loadData();
  }, [fetchCategories, fetchGuides]);

  // Category CRUD handlers
  const handleCreateCategory = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!categoryName.trim()) return;

    setCategoryLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/admin/resource-categories', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: categoryName.trim() }),
      });

      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.error || 'Failed to create category');
      }

      await fetchCategories();
      setCategoryName('');
      setShowCategoryModal(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to create category');
    } finally {
      setCategoryLoading(false);
    }
  };

  const handleUpdateCategory = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingCategory || !categoryName.trim()) return;

    setCategoryLoading(true);
    setError(null);

    try {
      const response = await fetch(`/api/admin/resource-categories/${editingCategory.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: categoryName.trim() }),
      });

      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.error || 'Failed to update category');
      }

      await fetchCategories();
      setCategoryName('');
      setEditingCategory(null);
      setShowCategoryModal(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update category');
    } finally {
      setCategoryLoading(false);
    }
  };

  const handleDeleteCategory = async (category: ResourceCategory) => {
    if (category._count.guides > 0) {
      setError(
        'Cannot delete category with existing guides. Please move or delete the guides first.'
      );
      return;
    }

    if (!confirm(`Are you sure you want to delete the category "${category.name}"?`)) {
      return;
    }

    try {
      const response = await fetch(`/api/admin/resource-categories/${category.id}`, {
        method: 'DELETE',
      });

      if (!response.ok) {
        const result = await response.json();
        throw new Error(result.error || 'Failed to delete category');
      }

      await fetchCategories();
      if (categoryFilter === category.id) {
        setCategoryFilter('all');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to delete category');
    }
  };

  const openCreateCategoryModal = () => {
    setCategoryModalMode('create');
    setEditingCategory(null);
    setCategoryName('');
    setShowCategoryModal(true);
  };

  const openEditCategoryModal = (category: ResourceCategory) => {
    setCategoryModalMode('edit');
    setEditingCategory(category);
    setCategoryName(category.name);
    setShowCategoryModal(true);
  };

  // Guide handlers
  const handleCreateGuide = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newGuideTitle.trim() || !newGuideCategoryId) return;

    setNewGuideLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/admin/resource-guides', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: newGuideTitle.trim(),
          categoryId: newGuideCategoryId,
        }),
      });

      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.error || 'Failed to create guide');
      }

      // Navigate to editor
      router.push(`/admin/resource-guides/${result.guide.id}/edit`);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to create guide');
      setNewGuideLoading(false);
    }
  };

  const handleDeleteGuide = async (guide: ResourceGuide) => {
    if (!confirm(`Are you sure you want to delete "${guide.title}"? This cannot be undone.`)) {
      return;
    }

    try {
      const response = await fetch(`/api/admin/resource-guides/${guide.id}`, {
        method: 'DELETE',
      });

      if (!response.ok) {
        const result = await response.json();
        throw new Error(result.error || 'Failed to delete guide');
      }

      await fetchGuides();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to delete guide');
    }
  };

  const openNewGuideModal = () => {
    setNewGuideTitle('');
    setNewGuideCategoryId(categories[0]?.id || '');
    setShowNewGuideModal(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>Resource Guides</h1>
          <p className={styles.subtitle}>Create and manage dealer resource guides</p>
        </div>
        <div className={styles.headerActions}>
          <button className={styles.secondaryButton} onClick={openCreateCategoryModal}>
            Manage Categories
          </button>
          <button
            className={styles.addButton}
            onClick={openNewGuideModal}
            disabled={categories.length === 0}
          >
            + Add Guide
          </button>
        </div>
      </div>

      {error && (
        <div className={styles.error}>
          <span>{error}</span>
          <button onClick={() => setError(null)}>&times;</button>
        </div>
      )}

      {/* Category Modal */}
      {showCategoryModal && (
        <div className={styles.modalOverlay} onClick={() => setShowCategoryModal(false)}>
          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
            <div className={styles.modalHeader}>
              <h2>{categoryModalMode === 'create' ? 'Add Category' : 'Edit Category'}</h2>
              <button className={styles.closeButton} onClick={() => setShowCategoryModal(false)}>
                &times;
              </button>
            </div>
            <form
              onSubmit={
                categoryModalMode === 'create' ? handleCreateCategory : handleUpdateCategory
              }
              className={styles.form}
            >
              <div className={styles.formGroup}>
                <label htmlFor="categoryName">Category Name *</label>
                <input
                  type="text"
                  id="categoryName"
                  value={categoryName}
                  onChange={(e) => setCategoryName(e.target.value)}
                  placeholder="e.g., Getting Started"
                  required
                />
              </div>
              <div className={styles.formActions}>
                <button
                  type="button"
                  className={styles.cancelButton}
                  onClick={() => setShowCategoryModal(false)}
                >
                  Cancel
                </button>
                <button type="submit" className={styles.submitButton} disabled={categoryLoading}>
                  {categoryLoading
                    ? 'Saving...'
                    : categoryModalMode === 'create'
                      ? 'Create'
                      : 'Save'}
                </button>
              </div>
            </form>

            {/* Category list for management */}
            {categories.length > 0 && (
              <div className={styles.categoryList}>
                <h3>Existing Categories</h3>
                {categories.map((cat) => (
                  <div key={cat.id} className={styles.categoryListItem}>
                    <span className={styles.categoryListName}>
                      {cat.name}
                      <span className={styles.categoryListCount}>({cat._count.guides} guides)</span>
                    </span>
                    <div className={styles.categoryListActions}>
                      <button
                        className={styles.editButton}
                        onClick={() => openEditCategoryModal(cat)}
                      >
                        Edit
                      </button>
                      <button
                        className={styles.deleteButton}
                        onClick={() => handleDeleteCategory(cat)}
                        disabled={cat._count.guides > 0}
                        title={
                          cat._count.guides > 0
                            ? 'Cannot delete category with guides'
                            : 'Delete category'
                        }
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}

      {/* New Guide Modal */}
      {showNewGuideModal && (
        <div className={styles.modalOverlay} onClick={() => setShowNewGuideModal(false)}>
          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
            <div className={styles.modalHeader}>
              <h2>Create New Guide</h2>
              <button className={styles.closeButton} onClick={() => setShowNewGuideModal(false)}>
                &times;
              </button>
            </div>
            <form onSubmit={handleCreateGuide} className={styles.form}>
              <div className={styles.formGroup}>
                <label htmlFor="guideTitle">Guide Title *</label>
                <input
                  type="text"
                  id="guideTitle"
                  value={newGuideTitle}
                  onChange={(e) => setNewGuideTitle(e.target.value)}
                  placeholder="e.g., How to Publish Your Dealer Page"
                  required
                />
              </div>
              <div className={styles.formGroup}>
                <label htmlFor="guideCategory">Category *</label>
                <select
                  id="guideCategory"
                  value={newGuideCategoryId}
                  onChange={(e) => setNewGuideCategoryId(e.target.value)}
                  required
                >
                  {categories.map((cat) => (
                    <option key={cat.id} value={cat.id}>
                      {cat.name}
                    </option>
                  ))}
                </select>
              </div>
              <div className={styles.formActions}>
                <button
                  type="button"
                  className={styles.cancelButton}
                  onClick={() => setShowNewGuideModal(false)}
                >
                  Cancel
                </button>
                <button type="submit" className={styles.submitButton} disabled={newGuideLoading}>
                  {newGuideLoading ? 'Creating...' : 'Create & Edit'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Category Filter Tabs */}
      <div className={styles.categoryFilter}>
        <button
          className={`${styles.categoryButton} ${categoryFilter === 'all' ? styles.active : ''}`}
          onClick={() => setCategoryFilter('all')}
        >
          All
        </button>
        {categories.map((cat) => (
          <button
            key={cat.id}
            className={`${styles.categoryButton} ${categoryFilter === cat.id ? styles.active : ''}`}
            onClick={() => setCategoryFilter(cat.id)}
          >
            {cat.name}
          </button>
        ))}
      </div>

      {/* Guides Grid */}
      {loading ? (
        <div className={styles.loading}>
          <div className={styles.spinner} />
          <span>Loading guides...</span>
        </div>
      ) : categories.length === 0 ? (
        <div className={styles.emptyState}>
          <p>No categories created yet. Create a category first to add guides.</p>
          <button className={styles.addButton} onClick={openCreateCategoryModal}>
            + Create Category
          </button>
        </div>
      ) : guides.length === 0 ? (
        <div className={styles.emptyState}>
          <p>
            {categoryFilter === 'all'
              ? 'No resource guides created yet.'
              : 'No guides in this category.'}
          </p>
        </div>
      ) : (
        <div className={styles.guideGrid}>
          {guides.map((guide) => (
            <div key={guide.id} className={styles.guideCard}>
              <div className={styles.guideCardInfo}>
                <h3 className={styles.guideTitle}>{guide.title}</h3>
                <div className={styles.guideMeta}>
                  <span className={styles.guideCategory}>{guide.category.name}</span>
                  <span className={`${styles.guideStatus} ${styles[guide.status]}`}>
                    {guide.status}
                  </span>
                </div>
                <p className={styles.guideSlug}>/{guide.slug}</p>
              </div>
              <div className={styles.guideCardActions}>
                <Link
                  href={`/admin/resource-guides/${guide.id}/edit`}
                  className={styles.editButton}
                >
                  Edit
                </Link>
                <button className={styles.deleteButton} onClick={() => handleDeleteGuide(guide)}>
                  Delete
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}