'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import {
  BookOpen,
  ArrowLeft,
  Upload,
  CheckCircle2,
  Building2,
  DollarSign,
  Package,
  Layers,
  Sparkles,
  FileText,
  ShieldCheck,
  Tag,
} from 'lucide-react';
import { showToast } from '@/components/common/Toast';
import api from '@/lib/api';

export default function AdminAddBookPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [coverUploading, setCoverUploading] = useState(false);
  const [categories, setCategories] = useState<Array<{ id: string; name: string }>>([]);
  const [authors, setAuthors] = useState<Array<{ id: string; name: string }>>([]);
  const [publishers, setPublishers] = useState<Array<{ id: string; name: string }>>([]);

  // Form State
  const [formData, setFormData] = useState({
    title: '',
    subtitle: '',
    author: '',
    translator: '',
    isbn13: '',
    isbn10: '',
    subject: '',
    language: 'English',
    publisher: '',
    edition: '1st Edition (2026)',
    binding: 'Hardcover',
    pages: '450',
    dimensions: '24 x 16 x 3 cm',
    weight: '750',
    price: '',
    discountPrice: '',
    gstRate: '0%',
    stock: '50',
    coverImage: '',
    description: '',
    toc: '',
  });

  // Variants State
  const [enableVariants, setEnableVariants] = useState(true);
  const [variants, setVariants] = useState<Array<{
    format: 'HARDCOVER' | 'PAPERBACK' | 'EBOOK';
    sku: string;
    isbn: string;
    price: string;
    discountPrice: string;
    stock: string;
    coverImage: string;
    digitalFileUrl: string;
    digitalFormat: 'PDF' | 'EPUB';
    isDefault: boolean;
  }>>([
    {
      format: 'PAPERBACK',
      sku: '',
      isbn: '',
      price: '',
      discountPrice: '',
      stock: '50',
      coverImage: '',
      digitalFileUrl: '',
      digitalFormat: 'PDF',
      isDefault: true,
    },
    {
      format: 'HARDCOVER',
      sku: '',
      isbn: '',
      price: '',
      discountPrice: '',
      stock: '25',
      coverImage: '',
      digitalFileUrl: '',
      digitalFormat: 'PDF',
      isDefault: false,
    },
    {
      format: 'EBOOK',
      sku: '',
      isbn: '',
      price: '',
      discountPrice: '',
      stock: '999',
      coverImage: '',
      digitalFileUrl: '',
      digitalFormat: 'PDF',
      isDefault: false,
    },
  ]);

  useEffect(() => {
    Promise.all([
      api.get('/catalog/categories?status=ALL&limit=2000'),
      api.get('/catalog/authors?limit=2000'),
      api.get('/catalog/publishers?limit=2000'),
    ]).then(([categoryResponse, authorResponse, publisherResponse]) => {
      setCategories(categoryResponse.data.data.categories ?? []);
      setAuthors(authorResponse.data.data.authors ?? []);
      setPublishers(publisherResponse.data.data.publishers ?? []);
    }).catch(() => showToast('Catalog relationships could not be loaded.', 'error'));
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.title || !formData.author || !formData.subject || !formData.price || (!formData.isbn13 && !formData.isbn10)) {
      showToast('Please fill in Title, Author, Category, ISBN, and Price.', 'error');
      return;
    }

    const author = authors.find((item) => item.id === formData.author);
    const category = categories.find((item) => item.id === formData.subject);
    const publisher = publishers.find((item) => item.id === formData.publisher);
    if (!author || !category || (formData.publisher && !publisher)) {
      showToast('Select valid catalog relationships before publishing.', 'error');
      return;
    }

    const activeVariantsPayload = enableVariants
      ? variants
          .filter((v) => v.price && parseFloat(v.price) > 0)
          .map((v, idx) => ({
            title: `${formData.title} (${v.format})`,
            format: v.format,
            sku: v.sku || `${(formData.isbn13 || formData.title.slice(0, 8)).replace(/[^a-zA-Z0-9]/g, '')}-${v.format.toLowerCase()}-${idx + 1}`,
            isbn: v.isbn || formData.isbn13 || formData.isbn10 || undefined,
            price: parseFloat(v.price),
            discountPrice: v.discountPrice ? parseFloat(v.discountPrice) : undefined,
            stock: parseInt(v.stock, 10) || (v.format === 'EBOOK' ? 999 : 0),
            coverImage: v.coverImage || formData.coverImage || undefined,
            digitalFileUrl: v.format === 'EBOOK' ? v.digitalFileUrl || undefined : undefined,
            digitalFormat: v.format === 'EBOOK' ? v.digitalFormat : undefined,
            isDefault: v.isDefault,
          }))
      : undefined;

    setLoading(true);
    try {
      await api.post('/books', {
        title: formData.title,
        isbn: formData.isbn13 || formData.isbn10 || undefined,
        description: formData.description || formData.title,
        price: parseFloat(formData.price),
        discountPrice: formData.discountPrice ? parseFloat(formData.discountPrice) : undefined,
        pageCount: formData.pages ? parseInt(formData.pages, 10) : undefined,
        stock: parseInt(formData.stock),
        gstRate: parseFloat(formData.gstRate) || 0,
        language: formData.language,
        edition: formData.edition,
        binding: formData.binding,
        format: formData.binding.toUpperCase().replace(/\s+/g, '_'),
        dimensions: formData.dimensions || undefined,
        weight: formData.weight ? parseFloat(formData.weight) : undefined,
        coverImage: formData.coverImage || undefined,
        imageUrls: formData.coverImage ? [formData.coverImage] : [],
        authorIds: [author.id],
        categoryIds: [category.id],
        publisherId: publisher?.id,
        variants: activeVariantsPayload,
      });

      showToast(`Successfully published "${formData.title}" with variants to catalog!`, 'success');
      router.push('/admin/dashboard');
    } catch (err: any) {
      const message = err?.response?.data?.message || err?.message || 'The product could not be published.';
      showToast(message, 'error');
    } finally {
      setLoading(false);
    }
  };

  const [aiLoading, setAiLoading] = useState(false);

  const handleCoverUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;
    if (!file.type.startsWith('image/')) {
      showToast('Please choose an image file.', 'error');
      return;
    }
    if (file.size > 8 * 1024 * 1024) {
      showToast('The cover image must be 8 MB or smaller.', 'error');
      return;
    }

    setCoverUploading(true);
    try {
      const dataUrl = await new Promise<string>((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(String(reader.result));
        reader.onerror = () => reject(new Error('The image could not be read.'));
        reader.readAsDataURL(file);
      });
      const response = await api.post('/upload/image', { dataUrl, fileName: file.name });
      const url = response.data?.data?.url;
      if (!url) throw new Error('The upload did not return a local image path.');
      setFormData((previous) => ({ ...previous, coverImage: url }));
      showToast('Cover uploaded to in-house storage.', 'success');
    } catch (error: any) {
      showToast(error?.response?.data?.message || error?.message || 'Cover upload failed.', 'error');
    } finally {
      setCoverUploading(false);
      event.target.value = '';
    }
  };

  const handleAIGenerate = async () => {
    if (!formData.title) {
      showToast('Please enter a Book Title first to generate AI synopsis and metadata.', 'info');
      return;
    }

    const authorObj = authors.find((a) => a.id === formData.author);
    const categoryObj = categories.find((c) => c.id === formData.subject);

    setAiLoading(true);
    try {
      const res = await api.post('/ai/generate-description', {
        title: formData.title,
        subtitle: formData.subtitle || undefined,
        author: authorObj?.name || undefined,
        category: categoryObj?.name || undefined,
        language: formData.language,
        binding: formData.binding,
      });

      const data = res.data.data;
      if (data?.detailedSynopsis) {
        setFormData((prev) => ({
          ...prev,
          description: data.detailedSynopsis,
        }));
        showToast('AI Scholarly Synopsis & Highlights generated successfully!', 'success');
      }
    } catch (err: any) {
      showToast(err?.response?.data?.message || 'AI Generation failed', 'error');
    } finally {
      setAiLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 py-8 px-4 sm:px-8">
      <div className="max-w-4xl mx-auto space-y-8">
        {/* Header Navigation */}
        <div className="flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800 pb-5">
          <div className="flex items-center gap-3">
            <Link
              href="/admin/dashboard"
              className="p-2 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100"
            >
              <ArrowLeft className="w-5 h-5" />
            </Link>
            <div>
              <h1 className="text-2xl font-extrabold flex items-center gap-2">
                <BookOpen className="w-6 h-6 text-[#701a08]" /> Add New Book Title To Catalog
              </h1>
              <p className="text-xs text-zinc-500 mt-0.5">Publish new Indian literature, Vedic, or academic title with complete specifications</p>
            </div>
          </div>
          <span className="px-3 py-1 rounded-full bg-rose-50 text-[#701a08] font-extrabold text-xs">
            Admin Creation Mode
          </span>
        </div>

        {/* Main Form */}
        <form onSubmit={handleSubmit} className="space-y-8 text-xs">
          {/* AI Generation Quick Action Banner */}
          <div className="bg-gradient-to-r from-amber-500/10 via-rose-500/10 to-amber-500/10 dark:from-amber-950/40 dark:via-rose-950/40 dark:to-amber-950/40 border border-amber-300 dark:border-amber-700/50 p-5 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-2xl bg-[#701a08] text-amber-300 flex items-center justify-center shrink-0 shadow-md">
                <Sparkles className="w-5 h-5 animate-spin" style={{ animationDuration: '10s' }} />
              </div>
              <div>
                <h4 className="font-extrabold text-sm text-zinc-900 dark:text-zinc-100 flex items-center gap-1.5">
                  Saraswati AI Catalog Co-Pilot
                </h4>
                <p className="text-xs text-zinc-500">
                  Auto-generate scholarly publisher synopsis, key highlights, and metadata from title & author.
                </p>
              </div>
            </div>

            <button
              type="button"
              disabled={aiLoading || !formData.title.trim()}
              onClick={handleAIGenerate}
              className="px-5 py-3 rounded-2xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold text-xs shadow-md transition-all flex items-center gap-2 shrink-0 disabled:opacity-40 cursor-pointer"
            >
              {aiLoading ? (
                <>
                  <Sparkles className="w-4 h-4 animate-spin" />
                  <span>Generating Synopsis...</span>
                </>
              ) : (
                <>
                  <Sparkles className="w-4 h-4 text-amber-300" />
                  <span>Auto-Generate with AI</span>
                </>
              )}
            </button>
          </div>

          {/* Section 1: Basic Information */}
          <div className="bg-white dark:bg-zinc-900 p-6 sm:p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-5">
            <div className="flex items-center gap-2 border-b border-zinc-100 dark:border-zinc-800 pb-3">
              <BookOpen className="w-4 h-4 text-[#701a08]" />
              <h3 className="font-extrabold text-sm uppercase tracking-wider text-zinc-800 dark:text-zinc-200">
                1. Basic Book Information
              </h3>
            </div>

            <div className="space-y-4">
              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Book Title *
                </label>
                <input
                  type="text"
                  required
                  placeholder="e.g. Srimad Bhagavad Gita (Critical Sanskrit-English Exegesis)"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                />
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Subtitle / Edition Note
                </label>
                <input
                  type="text"
                  placeholder="e.g. Complete Unabridged 10-Volume Deluxe Collector Set"
                  value={formData.subtitle}
                  onChange={(e) => setFormData({ ...formData, subtitle: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                    Primary Author *
                  </label>
                  <select
                    required
                    value={formData.author}
                    onChange={(e) => setFormData({ ...formData, author: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                  >
                    <option value="">Select author</option>
                    {authors.map((author) => <option key={author.id} value={author.id}>{author.name}</option>)}
                  </select>
                </div>

                <div>
                  <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                    Translator / Commentator
                  </label>
                  <input
                    type="text"
                    placeholder="e.g. Dr. Bibek Debroy"
                    value={formData.translator}
                    onChange={(e) => setFormData({ ...formData, translator: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                    ISBN-13 Number
                  </label>
                  <input
                    type="text"
                    placeholder="978-8175050419"
                    value={formData.isbn13}
                    onChange={(e) => setFormData({ ...formData, isbn13: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold font-mono"
                  />
                </div>

                <div>
                  <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                    ISBN-10 Number
                  </label>
                  <input
                    type="text"
                    placeholder="8175050411"
                    value={formData.isbn10}
                    onChange={(e) => setFormData({ ...formData, isbn10: e.target.value })}
                    className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold font-mono"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Section 2: Subject Taxonomy & Publisher */}
          <div className="bg-white dark:bg-zinc-900 p-6 sm:p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-5">
            <div className="flex items-center gap-2 border-b border-zinc-100 dark:border-zinc-800 pb-3">
              <Building2 className="w-4 h-4 text-[#701a08]" />
              <h3 className="font-extrabold text-sm uppercase tracking-wider text-zinc-800 dark:text-zinc-200">
                2. Subject Taxonomy & Publishing House
              </h3>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Academic Subject
                </label>
                <select
                  value={formData.subject}
                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                >
                  <option value="">Select category</option>
                  {categories.map((category) => <option key={category.id} value={category.id}>{category.name}</option>)}
                </select>
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Language
                </label>
                <select
                  value={formData.language}
                  onChange={(e) => setFormData({ ...formData, language: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                >
                  <option value="English">English</option>
                  <option value="Sanskrit">Sanskrit (संस्कृतम्)</option>
                  <option value="Hindi">Hindi (हिंदी)</option>
                  <option value="Bengali">Bengali (বাংলা)</option>
                  <option value="Tamil">Tamil (தமிழ்)</option>
                  <option value="Bilingual">Bilingual (Sanskrit + English)</option>
                </select>
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Publisher House
                </label>
                <select
                  value={formData.publisher}
                  onChange={(e) => setFormData({ ...formData, publisher: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                >
                  <option value="">No publisher</option>
                  {publishers.map((publisher) => <option key={publisher.id} value={publisher.id}>{publisher.name}</option>)}
                </select>
              </div>
            </div>
          </div>

          {/* Section 3: Physical Specifications & Binding */}
          <div className="bg-white dark:bg-zinc-900 p-6 sm:p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-5">
            <div className="flex items-center gap-2 border-b border-zinc-100 dark:border-zinc-800 pb-3">
              <Layers className="w-4 h-4 text-[#701a08]" />
              <h3 className="font-extrabold text-sm uppercase tracking-wider text-zinc-800 dark:text-zinc-200">
                3. Physical Specifications & Formatting
              </h3>
            </div>

            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Binding Type
                </label>
                <select
                  value={formData.binding}
                  onChange={(e) => setFormData({ ...formData, binding: e.target.value })}
                  className="w-full px-3 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                >
                  <option value="Hardcover">Hardcover</option>
                  <option value="Paperback">Paperback</option>
                  <option value="Leather Bound">Leather Bound</option>
                  <option value="Deluxe Manuscript">Deluxe Manuscript</option>
                </select>
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Total Pages
                </label>
                <input
                  type="number"
                  placeholder="450"
                  value={formData.pages}
                  onChange={(e) => setFormData({ ...formData, pages: e.target.value })}
                  className="w-full px-3 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                />
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Dimensions
                </label>
                <input
                  type="text"
                  placeholder="24 x 16 x 3 cm"
                  value={formData.dimensions}
                  onChange={(e) => setFormData({ ...formData, dimensions: e.target.value })}
                  className="w-full px-3 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                />
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Weight (Grams)
                </label>
                <input
                  type="number"
                  placeholder="750"
                  value={formData.weight}
                  onChange={(e) => setFormData({ ...formData, weight: e.target.value })}
                  className="w-full px-3 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                />
              </div>
            </div>
          </div>

          {/* Section 4: Pricing & Inventory */}
          <div className="bg-white dark:bg-zinc-900 p-6 sm:p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-5">
            <div className="flex items-center gap-2 border-b border-zinc-100 dark:border-zinc-800 pb-3">
              <DollarSign className="w-4 h-4 text-[#701a08]" />
              <h3 className="font-extrabold text-sm uppercase tracking-wider text-zinc-800 dark:text-zinc-200">
                4. Pricing, GST & Stock Inventory
              </h3>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  MRP Retail Price (₹) *
                </label>
                <input
                  type="number"
                  required
                  placeholder="850"
                  value={formData.price}
                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold text-sm"
                />
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Discount Offer Price (₹)
                </label>
                <input
                  type="number"
                  placeholder="720"
                  value={formData.discountPrice}
                  onChange={(e) => setFormData({ ...formData, discountPrice: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold text-sm text-[#701a08]"
                />
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  GST Tax Exemption Rate
                </label>
                <select
                  value={formData.gstRate}
                  onChange={(e) => setFormData({ ...formData, gstRate: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
                >
                  <option value="0%">0% (Exempt Book Tax)</option>
                  <option value="5%">5% GST</option>
                  <option value="12%">12% GST</option>
                </select>
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Initial Stock Inventory
                </label>
                <input
                  type="number"
                  placeholder="50"
                  value={formData.stock}
                  onChange={(e) => setFormData({ ...formData, stock: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold text-sm text-green-600"
                />
              </div>
            </div>
          </div>

          {/* Section 5: Synopsis & Description */}
          <div className="bg-white dark:bg-zinc-900 p-6 sm:p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-5">
            <div className="flex items-center gap-2 border-b border-zinc-100 dark:border-zinc-800 pb-3">
              <FileText className="w-4 h-4 text-[#701a08]" />
              <h3 className="font-extrabold text-sm uppercase tracking-wider text-zinc-800 dark:text-zinc-200">
                5. Book Synopsis & Table of Contents
              </h3>
            </div>

            <div className="space-y-4">
              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Full Synopsis / Publisher's Overview
                </label>
                <textarea
                  rows={4}
                  placeholder="Enter detailed publisher synopsis, critical commentary, or author introduction..."
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-medium"
                />
              </div>

              <div>
                <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                  Cover Artwork (stored in-house)
                </label>
                <div className="flex flex-col sm:flex-row gap-3 sm:items-center">
                  {formData.coverImage ? (
                    <img src={formData.coverImage} alt="Uploaded book cover" className="h-28 w-20 rounded-lg border border-zinc-200 object-contain bg-white" />
                  ) : (
                    <div className="h-28 w-20 rounded-lg border border-dashed border-zinc-300 bg-zinc-50 flex items-center justify-center text-[10px] text-zinc-400 text-center px-2">
                      No cover uploaded
                    </div>
                  )}
                  <label className="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#701a08] px-5 py-3 font-extrabold text-white shadow-sm hover:bg-[#581406]">
                    <Upload className="h-4 w-4" />
                    {coverUploading ? 'Uploading…' : formData.coverImage ? 'Replace cover' : 'Upload cover'}
                    <input
                      type="file"
                      accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
                      disabled={coverUploading}
                      onChange={handleCoverUpload}
                      className="sr-only"
                    />
                  </label>
                  <span className="text-[10px] text-zinc-500">JPEG, PNG, WebP, GIF, or AVIF; maximum 8 MB.</span>
                </div>
              </div>
            </div>
          </div>

          {/* Section 6: Multi-Edition Book Variants (Hardcover, Paperback, eBook) */}
          <div className="bg-white dark:bg-zinc-900 p-6 sm:p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-5">
            <div className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-3">
              <div className="flex items-center gap-2">
                <Tag className="w-4 h-4 text-[#701a08]" />
                <h3 className="font-extrabold text-sm uppercase tracking-wider text-zinc-800 dark:text-zinc-200">
                  6. Multi-Edition Variants & Formats (Hardcover, Paperback, eBook)
                </h3>
              </div>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={enableVariants}
                  onChange={(e) => setEnableVariants(e.target.checked)}
                  className="rounded border-zinc-300 text-[#701a08] focus:ring-[#701a08]"
                />
                <span className="text-xs font-bold text-zinc-600 dark:text-zinc-400">
                  Enable Variant System
                </span>
              </label>
            </div>

            {enableVariants ? (
              <div className="space-y-6">
                <p className="text-zinc-500 text-xs leading-relaxed">
                  Configure independent pricing, SKU identifiers, stock levels, and digital download files for each format.
                </p>

                <div className="space-y-4">
                  {variants.map((v, idx) => (
                    <div
                      key={v.format}
                      className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-800/30 space-y-4"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <span className="px-3 py-1 rounded-lg bg-[#701a08] text-white font-extrabold text-xs">
                            {v.format}
                          </span>
                          <span className="text-xs text-zinc-500 font-medium">
                            {v.format === 'EBOOK' ? 'Digital Edition' : 'Physical Print Edition'}
                          </span>
                        </div>
                        <label className="flex items-center gap-1.5 cursor-pointer text-xs font-bold text-zinc-600 dark:text-zinc-400">
                          <input
                            type="radio"
                            name="default_variant"
                            checked={v.isDefault}
                            onChange={() => {
                              setVariants(variants.map((item, i) => ({ ...item, isDefault: i === idx })));
                            }}
                          />
                          Default Storefront Format
                        </label>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
                        <div>
                          <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                            Price (₹) *
                          </label>
                          <input
                            type="number"
                            placeholder={v.format === 'EBOOK' ? '299' : v.format === 'HARDCOVER' ? '999' : '499'}
                            value={v.price}
                            onChange={(e) => {
                              const updated = [...variants];
                              updated[idx].price = e.target.value;
                              setVariants(updated);
                            }}
                            className="w-full px-3 py-2 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 font-bold"
                          />
                        </div>

                        <div>
                          <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                            Discount Price (₹)
                          </label>
                          <input
                            type="number"
                            placeholder="Optional"
                            value={v.discountPrice}
                            onChange={(e) => {
                              const updated = [...variants];
                              updated[idx].discountPrice = e.target.value;
                              setVariants(updated);
                            }}
                            className="w-full px-3 py-2 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 font-bold text-[#701a08]"
                          />
                        </div>

                        <div>
                          <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                            Stock Quantity
                          </label>
                          <input
                            type="number"
                            disabled={v.format === 'EBOOK'}
                            placeholder={v.format === 'EBOOK' ? 'Unlimited' : '50'}
                            value={v.format === 'EBOOK' ? '999' : v.stock}
                            onChange={(e) => {
                              const updated = [...variants];
                              updated[idx].stock = e.target.value;
                              setVariants(updated);
                            }}
                            className="w-full px-3 py-2 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 font-bold text-emerald-600 disabled:opacity-60"
                          />
                        </div>

                        <div>
                          <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                            Custom SKU
                          </label>
                          <input
                            type="text"
                            placeholder={`e.g. IBW-BK-${v.format.toLowerCase()}`}
                            value={v.sku}
                            onChange={(e) => {
                              const updated = [...variants];
                              updated[idx].sku = e.target.value;
                              setVariants(updated);
                            }}
                            className="w-full px-3 py-2 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 font-mono text-[11px]"
                          />
                        </div>
                      </div>

                      {v.format === 'EBOOK' && (
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 border-t border-zinc-200/60 dark:border-zinc-800">
                          <div>
                            <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                              Digital File Download URL (PDF/EPUB)
                            </label>
                            <input
                              type="url"
                              placeholder="https://assets.indianbooksworldwide.com/ebooks/sample.pdf"
                              value={v.digitalFileUrl}
                              onChange={(e) => {
                                const updated = [...variants];
                                updated[idx].digitalFileUrl = e.target.value;
                                setVariants(updated);
                              }}
                              className="w-full px-3 py-2 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 font-medium"
                            />
                          </div>
                          <div>
                            <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">
                              Digital Format
                            </label>
                            <select
                              value={v.digitalFormat}
                              onChange={(e) => {
                                const updated = [...variants];
                                updated[idx].digitalFormat = e.target.value as any;
                                setVariants(updated);
                              }}
                              className="w-full px-3 py-2 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 font-semibold"
                            >
                              <option value="PDF">PDF (Portable Document Format)</option>
                              <option value="EPUB">EPUB (eBook Standard)</option>
                            </select>
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <p className="text-zinc-400 text-xs italic">
                Variant management disabled. Title will be saved as single standard edition.
              </p>
            )}
          </div>

          {/* Submit CTA Bar */}
          <div className="flex items-center justify-between pt-4 border-t border-zinc-200 dark:border-zinc-800">
            <Link
              href="/admin/dashboard"
              className="px-6 py-3.5 rounded-2xl bg-zinc-100 dark:bg-zinc-800 font-extrabold text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200"
            >
              Cancel & Return
            </Link>

            <button
              type="submit"
              disabled={loading}
              className="px-8 py-4 rounded-2xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold text-xs shadow-xl transition-all flex items-center gap-2 cursor-pointer"
            >
              {loading ? 'Publishing Title...' : 'Publish Book Title to Live Store Catalog'}{' '}
              <CheckCircle2 className="w-4 h-4" />
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}