'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { AlertCircle, ChevronLeft, ChevronRight, ExternalLink, FileText, Loader2, Search, Edit, Trash2, Eye, X } from 'lucide-react';
import api from '@/lib/api';
import { showToast } from '@/components/common/Toast';

type MetadataItem = { id: string; name: string; productCount?: number };
type CatalogSummary = {
  products: number;
  categories: number;
  authors: number;
  publishers: number;
  attributes: number;
  catalogues: number;
  images: number;
};
type BookRow = {
  id: string;
  sourceProductId?: string | null;
  title: string;
  slug: string;
  isbn?: string | null;
  sourceSku?: string | null;
  sku?: string | null;
  price: number;
  discountPrice?: number | null;
  stock: number;
  status: 'ENABLED' | 'DISABLED';
  authorName?: string | null;
  publisherName?: string | null;
  categoryName?: string | null;
  coverImage?: string | null;
};
type Catalogue = {
  id: string;
  title: string;
  pdfUrl: string;
  assetStatus: string;
  productCount: number;
};

const emptySummary: CatalogSummary = {
  products: 0,
  categories: 0,
  authors: 0,
  publishers: 0,
  attributes: 0,
  catalogues: 0,
  images: 0,
};

export default function CatalogManager() {
  const [books, setBooks] = useState<BookRow[]>([]);
  const [categories, setCategories] = useState<MetadataItem[]>([]);
  const [authors, setAuthors] = useState<MetadataItem[]>([]);
  const [publishers, setPublishers] = useState<MetadataItem[]>([]);
  const [catalogues, setCatalogues] = useState<Catalogue[]>([]);
  const [summary, setSummary] = useState<CatalogSummary>(emptySummary);
  const [pagination, setPagination] = useState({ total: 0, page: 1, limit: 25, totalPages: 1 });
  const [search, setSearch] = useState('');
  const [query, setQuery] = useState('');
  const [category, setCategory] = useState('');
  const [author, setAuthor] = useState('');
  const [publisher, setPublisher] = useState('');
  const [status, setStatus] = useState('ALL');
  const [sortBy, setSortBy] = useState('displayOrder');
  const [sortOrder, setSortOrder] = useState('asc');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const [editingBook, setEditingBook] = useState<BookRow | null>(null);
  const [editForm, setEditForm] = useState({
    title: '',
    isbn: '',
    sku: '',
    price: 0,
    discountPrice: 0,
    stock: 0,
    status: 'ENABLED' as 'ENABLED' | 'DISABLED',
    binding: 'Hardcover',
    language: 'English',
    edition: '1st Edition (2026)',
    pageCount: 0,
    weight: 0,
    dimensions: '',
    coverImage: '',
    description: '',
    authorId: '',
    categoryId: '',
    publisherId: '',
  });
  const [loadingDetails, setLoadingDetails] = useState(false);
  const [saving, setSaving] = useState(false);
  const [uploadingCover, setUploadingCover] = useState(false);

  const startEdit = async (book: BookRow) => {
    setEditingBook(book);
    setLoadingDetails(true);
    setEditForm({
      title: book.title,
      isbn: book.isbn ?? '',
      sku: book.sku ?? '',
      price: book.price,
      discountPrice: book.discountPrice ?? 0,
      stock: book.stock,
      status: book.status,
      binding: 'Hardcover',
      language: 'English',
      edition: '1st Edition (2026)',
      pageCount: 450,
      weight: 750,
      dimensions: '24 x 16 x 3 cm',
      coverImage: book.coverImage ?? '',
      description: '',
      authorId: '',
      categoryId: '',
      publisherId: '',
    });

    try {
      const res = await api.get(`/books/${book.id}`);
      const fullBook = res.data?.data?.book;
      if (fullBook) {
        setEditForm({
          title: fullBook.title || '',
          isbn: fullBook.isbn || '',
          sku: fullBook.sku || '',
          price: fullBook.price || 0,
          discountPrice: fullBook.discountPrice || 0,
          stock: fullBook.stock || 0,
          status: fullBook.status || 'ENABLED',
          binding: fullBook.binding || 'Hardcover',
          language: fullBook.language || 'English',
          edition: fullBook.edition || '1st Edition (2026)',
          pageCount: fullBook.pageCount || 0,
          weight: fullBook.weight || 0,
          dimensions: fullBook.dimensions || '',
          coverImage: fullBook.coverImage || '',
          description: fullBook.description || '',
          authorId: fullBook.authors?.[0]?.id || '',
          categoryId: fullBook.categories?.[0]?.id || '',
          publisherId: fullBook.publisherId || '',
        });
      }
    } catch (err) {
      showToast('Could not load complete book details, using basic info.', 'info');
    } finally {
      setLoadingDetails(false);
    }
  };

  const handleSaveEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingBook) return;
    setSaving(true);
    try {
      await api.put(`/books/${editingBook.id}`, {
        title: editForm.title,
        isbn: editForm.isbn || null,
        sku: editForm.sku || null,
        price: Number(editForm.price),
        discountPrice: editForm.discountPrice ? Number(editForm.discountPrice) : null,
        stock: Number(editForm.stock),
        status: editForm.status,
        binding: editForm.binding,
        language: editForm.language,
        edition: editForm.edition,
        pageCount: editForm.pageCount ? Number(editForm.pageCount) : null,
        weight: editForm.weight ? Number(editForm.weight) : null,
        dimensions: editForm.dimensions || null,
        coverImage: editForm.coverImage || null,
        description: editForm.description || null,
        authorIds: editForm.authorId ? [editForm.authorId] : undefined,
        categoryIds: editForm.categoryId ? [editForm.categoryId] : undefined,
        publisherId: editForm.publisherId || null,
      });
      showToast('Book details updated successfully!', 'success');
      setEditingBook(null);
      void loadBooks();
    } catch (err: any) {
      showToast(err.response?.data?.message || 'Failed to update book', 'error');
    } finally {
      setSaving(false);
    }
  };

  const handleModalCoverUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.size > 8 * 1024 * 1024) {
      showToast('Image must be 8MB or smaller', 'error');
      return;
    }

    setUploadingCover(true);
    const reader = new FileReader();
    reader.onload = async () => {
      try {
        const res = await api.post('/upload/image', {
          dataUrl: reader.result as string,
          fileName: file.name,
        });
        const uploadedUrl = res.data?.data?.url;
        if (uploadedUrl) {
          setEditForm((prev) => ({ ...prev, coverImage: uploadedUrl }));
          showToast('Cover image uploaded successfully!', 'success');
        }
      } catch (err: any) {
        showToast(err.response?.data?.message || 'Upload failed', 'error');
      } finally {
        setUploadingCover(false);
      }
    };
    reader.onerror = () => {
      showToast('Error reading file', 'error');
      setUploadingCover(false);
    };
    reader.readAsDataURL(file);
  };

  const handleDeleteBook = async (id: string, title: string) => {
    if (!confirm(`Are you sure you want to delete the book "${title}"?`)) return;
    try {
      await api.delete(`/books/${id}`);
      showToast('Book deleted successfully', 'success');
      void loadBooks();
    } catch (err: any) {
      showToast(err.response?.data?.message || 'Delete failed', 'error');
    }
  };

  useEffect(() => {
    const timer = window.setTimeout(() => setQuery(search.trim()), 300);
    return () => window.clearTimeout(timer);
  }, [search]);

  useEffect(() => {
    async function loadMetadata() {
      try {
        const [categoryRes, authorRes, publisherRes, catalogueRes, summaryRes] = await Promise.all([
          api.get('/catalog/categories?status=ALL&limit=2000'),
          api.get('/catalog/authors?limit=2000'),
          api.get('/catalog/publishers?limit=2000'),
          api.get('/catalog/catalogues?status=ALL'),
          api.get('/catalog/summary'),
        ]);
        setCategories(categoryRes.data.data.categories ?? []);
        setAuthors(authorRes.data.data.authors ?? []);
        setPublishers(publisherRes.data.data.publishers ?? []);
        setCatalogues(catalogueRes.data.data.catalogues ?? []);
        setSummary(summaryRes.data.data ?? emptySummary);
      } catch (requestError) {
        setError(requestError instanceof Error ? requestError.message : 'Could not load catalog metadata.');
      }
    }
    void loadMetadata();
  }, []);

  const loadBooks = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const params = new URLSearchParams({
        page: String(pagination.page),
        limit: String(pagination.limit),
        status,
        sortBy,
        sortOrder,
      });
      if (query) params.set('search', query);
      if (category) params.set('category', category);
      if (author) params.set('author', author);
      if (publisher) params.set('publisher', publisher);
      const response = await api.get(`/books?${params.toString()}`);
      setBooks(response.data.data.books ?? []);
      setPagination(response.data.data.pagination);
    } catch (requestError) {
      setBooks([]);
      setError(requestError instanceof Error ? requestError.message : 'Could not load books.');
    } finally {
      setLoading(false);
    }
  }, [author, category, pagination.limit, pagination.page, publisher, query, sortBy, sortOrder, status]);

  useEffect(() => {
    void loadBooks();
  }, [loadBooks]);

  const filters = useMemo(
    () => [
      { label: 'All categories', value: category, setter: setCategory, items: categories },
      { label: 'All authors', value: author, setter: setAuthor, items: authors },
      { label: 'All publishers', value: publisher, setter: setPublisher, items: publishers },
    ],
    [author, authors, categories, category, publisher, publishers]
  );

  const changeFilter = (setter: (value: string) => void, value: string) => {
    setter(value);
    setPagination((current) => ({ ...current, page: 1 }));
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h2 className="text-2xl font-extrabold">Product Catalog</h2>
          <p className="mt-1 text-xs text-zinc-500">Live database records, source identifiers, assets, and relationships</p>
        </div>
        <Link href="/admin/add-book" className="rounded-xl bg-[#701a08] px-4 py-2.5 text-center text-xs font-bold text-white hover:bg-[#581406]">
          Add New Book
        </Link>
      </div>

      <div className="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-7">
        {Object.entries(summary).map(([label, value]) => (
          <div key={label} className="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950">
            <span className="block text-[10px] font-bold uppercase text-zinc-500">{label}</span>
            <span className="mt-1 block text-xl font-extrabold">{value.toLocaleString()}</span>
          </div>
        ))}
      </div>

      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
        <label className="relative xl:col-span-2">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-zinc-400" />
          <input
            value={search}
            onChange={(event) => {
              setSearch(event.target.value);
              setPagination((current) => ({ ...current, page: 1 }));
            }}
            placeholder="Title, ISBN, SKU, author, attribute…"
            className="w-full rounded-xl border border-zinc-300 bg-white py-2 pl-9 pr-3 text-xs dark:border-zinc-700 dark:bg-zinc-900"
          />
        </label>
        {filters.map((filter) => (
          <select
            key={filter.label}
            value={filter.value}
            onChange={(event) => changeFilter(filter.setter, event.target.value)}
            className="min-w-0 rounded-xl border border-zinc-300 bg-white px-3 py-2 text-xs dark:border-zinc-700 dark:bg-zinc-900"
          >
            <option value="">{filter.label}</option>
            {filter.items.map((item) => <option key={item.id} value={item.id}>{item.name} ({item.productCount ?? 0})</option>)}
          </select>
        ))}
        <select value={status} onChange={(event) => changeFilter(setStatus, event.target.value)} className="rounded-xl border border-zinc-300 bg-white px-3 py-2 text-xs dark:border-zinc-700 dark:bg-zinc-900">
          <option value="ALL">All statuses</option>
          <option value="ENABLED">Enabled</option>
          <option value="DISABLED">Disabled</option>
        </select>
      </div>

      <div className="flex flex-wrap items-center gap-3 text-xs">
        <span className="font-bold text-zinc-500">Sort:</span>
        <select value={sortBy} onChange={(event) => changeFilter(setSortBy, event.target.value)} className="rounded-lg border border-zinc-300 bg-white px-3 py-1.5 dark:border-zinc-700 dark:bg-zinc-900">
          <option value="displayOrder">Display order</option>
          <option value="title">Title</option>
          <option value="price">Price</option>
          <option value="stock">Stock</option>
          <option value="createdAt">Created date</option>
        </select>
        <select value={sortOrder} onChange={(event) => changeFilter(setSortOrder, event.target.value)} className="rounded-lg border border-zinc-300 bg-white px-3 py-1.5 dark:border-zinc-700 dark:bg-zinc-900">
          <option value="asc">Ascending</option>
          <option value="desc">Descending</option>
        </select>
        <span className="ml-auto text-zinc-500">{pagination.total.toLocaleString()} matching products</span>
      </div>

      {error && (
        <div className="flex items-center gap-2 rounded-xl border border-red-200 bg-red-50 p-3 text-xs font-semibold text-red-700">
          <AlertCircle className="h-4 w-4" /> {error}
        </div>
      )}

      <div className="overflow-x-auto rounded-xl border border-zinc-200 dark:border-zinc-800">
        <table className="w-full min-w-[1050px] text-left text-xs">
          <thead className="bg-zinc-50 uppercase text-zinc-500 dark:bg-zinc-950">
            <tr><th className="p-3">Preview</th><th className="p-3">Product</th><th className="p-3">Source SKU / ISBN</th><th className="p-3">Relationships</th><th className="p-3">Price</th><th className="p-3">Stock</th><th className="p-3">Status</th><th className="p-3 text-right">Actions</th></tr>
          </thead>
          <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
            {loading ? (
              <tr><td colSpan={8} className="p-10 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></td></tr>
            ) : books.length === 0 ? (
              <tr><td colSpan={8} className="p-10 text-center text-zinc-500">No matching products.</td></tr>
            ) : books.map((book) => (
              <tr key={book.id} className="align-top hover:bg-zinc-50 dark:hover:bg-zinc-800/40">
                <td className="p-3"><div className="h-14 w-11 overflow-hidden rounded bg-zinc-100">{book.coverImage ? <img src={book.coverImage} alt="" className="h-full w-full object-cover" /> : null}</div></td>
                <td className="max-w-xs p-3"><span className="block font-bold">{book.title}</span><span className="text-[10px] text-zinc-500">Source ID: {book.sourceProductId ?? 'manual'}</span></td>
                <td className="p-3 font-mono text-[11px]"><span className="block">{book.sourceSku || book.sku || '—'}</span><span className="text-zinc-500">{book.isbn || '—'}</span></td>
                <td className="p-3"><span className="block">{book.authorName || 'No author'}</span><span className="block text-zinc-500">{book.publisherName || 'No publisher'}</span><span className="block text-zinc-500">{book.categoryName || 'No category'}</span></td>
                <td className="p-3 font-bold">₹{(book.discountPrice ?? book.price).toLocaleString('en-IN')}</td>
                <td className={`p-3 font-bold ${book.stock < 10 ? 'text-red-600' : 'text-green-700'}`}>{book.stock}</td>
                <td className="p-3"><span className={`rounded-full px-2 py-1 text-[10px] font-bold ${book.status === 'ENABLED' ? 'bg-green-50 text-green-700' : 'bg-zinc-100 text-zinc-600'}`}>{book.status}</span></td>
                <td className="p-3 text-right flex justify-end gap-1.5">
                  <Link href={`/books/${book.slug}`} target="_blank" className="p-1.5 rounded bg-zinc-100 hover:bg-zinc-200 text-zinc-600" title="View Details">
                    <Eye className="h-3.5 w-3.5" />
                  </Link>
                  <button onClick={() => startEdit(book)} className="p-1.5 rounded bg-amber-50 hover:bg-amber-100 text-amber-700" title="Edit Parameters">
                    <Edit className="h-3.5 w-3.5" />
                  </button>
                  <button onClick={() => handleDeleteBook(book.id, book.title)} className="p-1.5 rounded bg-red-50 hover:bg-red-100 text-red-650" title="Delete Product">
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="flex items-center justify-between">
        <button disabled={pagination.page <= 1} onClick={() => setPagination((current) => ({ ...current, page: current.page - 1 }))} className="inline-flex items-center gap-1 rounded-lg border px-3 py-2 text-xs font-bold disabled:opacity-40"><ChevronLeft className="h-4 w-4" /> Previous</button>
        <span className="text-xs text-zinc-500">Page {pagination.page} of {pagination.totalPages}</span>
        <button disabled={pagination.page >= pagination.totalPages} onClick={() => setPagination((current) => ({ ...current, page: current.page + 1 }))} className="inline-flex items-center gap-1 rounded-lg border px-3 py-2 text-xs font-bold disabled:opacity-40">Next <ChevronRight className="h-4 w-4" /></button>
      </div>

      <details className="rounded-xl border border-zinc-200 p-4 dark:border-zinc-800">
        <summary className="cursor-pointer text-sm font-extrabold">Catalogue PDFs ({catalogues.length})</summary>
        <div className="mt-4 grid gap-2 md:grid-cols-2 xl:grid-cols-3">
          {catalogues.map((catalogue) => (
            <a key={catalogue.id} href={catalogue.pdfUrl} target="_blank" rel="noreferrer" className="flex items-center justify-between rounded-lg bg-zinc-50 p-3 text-xs hover:bg-zinc-100 dark:bg-zinc-950">
              <span className="flex min-w-0 items-center gap-2"><FileText className="h-4 w-4 shrink-0 text-red-600" /><span className="truncate font-bold">{catalogue.title}</span></span>
              <span className="ml-2 text-[10px] text-zinc-500">{catalogue.assetStatus}</span>
            </a>
          ))}
        </div>
      </details>

      {editingBook && (
        <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-xs">
          <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-6 sm:p-8 max-w-3xl w-full shadow-2xl space-y-6">
            <div className="flex items-center justify-between border-b pb-4">
              <div>
                <h3 className="text-lg font-extrabold text-zinc-900 dark:text-zinc-100">Edit Book Parameters</h3>
                <p className="text-[11px] text-zinc-500 font-semibold">Modify metadata, pricing, specifications, and cover images</p>
              </div>
              <button onClick={() => setEditingBook(null)} className="p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500">
                <X className="h-5 w-5" />
              </button>
            </div>

            {loadingDetails ? (
              <div className="py-20 text-center flex flex-col items-center justify-center gap-2">
                <Loader2 className="h-8 w-8 animate-spin text-[#701a08]" />
                <span className="text-xs font-bold text-zinc-500 animate-pulse">Loading complete catalog specifications...</span>
              </div>
            ) : (
              <form onSubmit={handleSaveEdit} className="space-y-5 text-xs font-semibold max-h-[70vh] overflow-y-auto pr-2">
                
                {/* Section 1: Basic Information */}
                <div className="space-y-3">
                  <span className="text-[10px] font-extrabold text-[#701a08] uppercase tracking-wider block border-b pb-1">1. Basic Book Info</span>
                  <div>
                    <label className="text-zinc-500 block mb-1">Book Title *</label>
                    <input
                      type="text"
                      required
                      value={editForm.title}
                      onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
                      className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-bold"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-zinc-500 block mb-1">ISBN-13 / ISBN-10</label>
                      <input
                        type="text"
                        value={editForm.isbn}
                        onChange={(e) => setEditForm({ ...editForm, isbn: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
                      />
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">SKU Code</label>
                      <input
                        type="text"
                        value={editForm.sku}
                        onChange={(e) => setEditForm({ ...editForm, sku: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
                      />
                    </div>
                  </div>
                </div>

                {/* Section 2: Pricing, Stock & Status */}
                <div className="space-y-3">
                  <span className="text-[10px] font-extrabold text-[#701a08] uppercase tracking-wider block border-b pb-1">2. Price, Stock & Visibility</span>
                  <div className="grid grid-cols-4 gap-4">
                    <div className="col-span-1">
                      <label className="text-zinc-500 block mb-1">Price *</label>
                      <input
                        type="number"
                        required
                        value={editForm.price}
                        onChange={(e) => setEditForm({ ...editForm, price: parseFloat(e.target.value) || 0 })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-bold font-mono"
                      />
                    </div>
                    <div className="col-span-1">
                      <label className="text-zinc-500 block mb-1">Discount Price</label>
                      <input
                        type="number"
                        value={editForm.discountPrice || ''}
                        onChange={(e) => setEditForm({ ...editForm, discountPrice: parseFloat(e.target.value) || 0 })}
                        placeholder="None"
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-bold font-mono"
                      />
                    </div>
                    <div className="col-span-1">
                      <label className="text-zinc-500 block mb-1">Stock *</label>
                      <input
                        type="number"
                        required
                        value={editForm.stock}
                        onChange={(e) => setEditForm({ ...editForm, stock: parseInt(e.target.value) || 0 })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-bold"
                      />
                    </div>
                    <div className="col-span-1">
                      <label className="text-zinc-500 block mb-1">Status</label>
                      <select
                        value={editForm.status}
                        onChange={(e) => setEditForm({ ...editForm, status: e.target.value as any })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-bold"
                      >
                        <option value="ENABLED">ENABLED</option>
                        <option value="DISABLED">DISABLED</option>
                      </select>
                    </div>
                  </div>
                </div>

                {/* Section 3: Metadata & Relations */}
                <div className="space-y-3">
                  <span className="text-[10px] font-extrabold text-[#701a08] uppercase tracking-wider block border-b pb-1">3. Relationships & Taxonomies</span>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <label className="text-zinc-500 block mb-1">Category *</label>
                      <select
                        required
                        value={editForm.categoryId}
                        onChange={(e) => setEditForm({ ...editForm, categoryId: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-bold"
                      >
                        <option value="">Select Category</option>
                        {categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
                      </select>
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">Author *</label>
                      <select
                        required
                        value={editForm.authorId}
                        onChange={(e) => setEditForm({ ...editForm, authorId: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-bold"
                      >
                        <option value="">Select Author</option>
                        {authors.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
                      </select>
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">Publisher</label>
                      <select
                        value={editForm.publisherId}
                        onChange={(e) => setEditForm({ ...editForm, publisherId: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-bold"
                      >
                        <option value="">Select Publisher</option>
                        {publishers.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
                      </select>
                    </div>
                  </div>
                </div>

                {/* Section 4: Specifications */}
                <div className="space-y-3">
                  <span className="text-[10px] font-extrabold text-[#701a08] uppercase tracking-wider block border-b pb-1">4. Physical Specifications</span>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <label className="text-zinc-500 block mb-1">Language</label>
                      <input
                        type="text"
                        value={editForm.language}
                        onChange={(e) => setEditForm({ ...editForm, language: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                      />
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">Edition</label>
                      <input
                        type="text"
                        value={editForm.edition}
                        onChange={(e) => setEditForm({ ...editForm, edition: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                      />
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">Binding Format</label>
                      <select
                        value={editForm.binding}
                        onChange={(e) => setEditForm({ ...editForm, binding: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                      >
                        <option value="Hardcover">Hardcover</option>
                        <option value="Paperback">Paperback</option>
                        <option value="Digital">Digital (E-Book)</option>
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <label className="text-zinc-500 block mb-1">Page Count</label>
                      <input
                        type="number"
                        value={editForm.pageCount}
                        onChange={(e) => setEditForm({ ...editForm, pageCount: parseInt(e.target.value) || 0 })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                      />
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">Dimensions</label>
                      <input
                        type="text"
                        value={editForm.dimensions}
                        onChange={(e) => setEditForm({ ...editForm, dimensions: e.target.value })}
                        placeholder="e.g. 24 x 16 x 3 cm"
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                      />
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">Weight (grams)</label>
                      <input
                        type="number"
                        value={editForm.weight}
                        onChange={(e) => setEditForm({ ...editForm, weight: parseFloat(e.target.value) || 0 })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                      />
                    </div>
                  </div>
                </div>

                {/* Section 5: Media & Description */}
                <div className="space-y-3">
                  <span className="text-[10px] font-extrabold text-[#701a08] uppercase tracking-wider block border-b pb-1">5. Cover Media & Descriptions</span>
                  <div>
                    <label className="text-zinc-500 block mb-1">Cover Image URL</label>
                    <input
                      type="text"
                      value={editForm.coverImage}
                      onChange={(e) => setEditForm({ ...editForm, coverImage: e.target.value })}
                      className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
                    />
                    <div className="mt-2 flex items-center gap-2">
                      <span className="text-[10px] text-zinc-400 font-semibold">Or upload new cover file:</span>
                      <input
                        type="file"
                        accept="image/*"
                        onChange={handleModalCoverUpload}
                        disabled={uploadingCover}
                        className="text-[10px] text-zinc-500 file:mr-2 file:py-1 file:px-2 file:rounded-lg file:border-0 file:text-[10px] file:font-bold file:bg-[#701a08] file:text-white file:cursor-pointer file:hover:bg-[#581406] cursor-pointer"
                      />
                      {uploadingCover && <span className="text-[10px] text-zinc-400 animate-pulse">Uploading...</span>}
                    </div>
                  </div>
                  <div>
                    <label className="text-zinc-500 block mb-1">Description / Summary</label>
                    <textarea
                      rows={4}
                      value={editForm.description}
                      onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
                      placeholder="Enter catalog descriptive text..."
                      className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-medium"
                    />
                  </div>
                </div>

                {/* Submit Actions */}
                <div className="flex justify-end gap-2.5 pt-4 border-t">
                  <button
                    type="button"
                    onClick={() => setEditingBook(null)}
                    className="px-4 py-2.5 rounded-xl border border-zinc-300 hover:bg-zinc-50 text-zinc-550"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={saving}
                    className="px-6 py-2.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold disabled:opacity-40"
                  >
                    {saving ? 'Saving...' : 'Save Changes'}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      )}
    </div>
  );
}