'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '@/store';
import { logout } from '@/store/authSlice';
import { BOOK_COVER_PLACEHOLDER } from '@/lib/bookImage';
import {
  BarChart3,
  TrendingUp,
  DollarSign,
  ShoppingBag,
  Users,
  BookOpen,
  Building2,
  UserCheck,
  Package,
  Ticket,
  FileText,
  Image as ImageIcon,
  Bell,
  Download,
  Search,
  Settings as SettingsIcon,
  Moon,
  Sun,
  Plus,
  Filter,
  CheckCircle2,
  Clock,
  AlertTriangle,
  ArrowUpRight,
  ArrowDownRight,
  MoreVertical,
  Activity,
  Layers,
  Lock,
  LogOut,
  RefreshCw,
  Edit,
  Trash2,
  Globe,
  Tag,
  Shield,
  Flame,
  Sparkles,
  CreditCard,
} from 'lucide-react';
import { showToast } from '@/components/common/Toast';
import api from '@/lib/api';
import CatalogManager from '@/components/admin/CatalogManager';
import PaymentGatewayConfigurator from '@/components/admin/PaymentGatewayConfigurator';
import ShippingProviderConfigurator from '@/components/admin/ShippingProviderConfigurator';
import CustomerManager from '@/components/admin/CustomerManager';
import CouponManager from '@/components/admin/CouponManager';
import BannerManager from '@/components/admin/BannerManager';
import NewsletterManager from '@/components/admin/NewsletterManager';
import TicketInboxManager from '@/components/admin/TicketInboxManager';

export default function EnterpriseAdminDashboard() {
  const router = useRouter();
  const dispatch = useDispatch();
  const { user, isAuthenticated } = useSelector((state: RootState) => state.auth);

  React.useEffect(() => {
    if (!isAuthenticated || user?.role !== 'ADMIN') {
      router.push('/login?redirect=/admin/dashboard');
    }
  }, [isAuthenticated, user, router]);

  const [activeTab, setActiveTab] = useState<
    | 'analytics'
    | 'revenue'
    | 'orders'
    | 'books'
    | 'add-book'
    | 'customers'
    | 'publishers'
    | 'add-publisher'
    | 'authors'
    | 'add-author'
    | 'inventory'
    | 'coupons'
    | 'blogs'
    | 'add-blog'
    | 'banners'
    | 'notifications'
    | 'reports'
    | 'seo'
    | 'settings'
    | 'campaigns'
    | 'forecasts'
    | 'payments-panel'
  >('analytics');

  const [darkMode, setDarkMode] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [orderFilter, setOrderFilter] = useState<'ALL' | 'PROCESSING' | 'SHIPPED' | 'DELIVERED'>('ALL');

  const downloadReportFile = (filename: string, content: string, contentType: string = 'text/csv') => {
    const blob = new Blob([content], { type: contentType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  };

  // Dynamic Data States
  const [orders, setOrders] = useState([
    { id: 'IBW-98201', customer: 'Dr. Ramesh Sharma', email: 'ramesh@example.com', date: '2026-08-08', amount: 2499, method: 'PAYPAL', status: 'SHIPPED', itemsCount: 2, country: 'UK' },
    { id: 'IBW-98202', customer: 'Priya Sundaram', email: 'priya@example.com', date: '2026-08-07', amount: 1199, method: 'UPI', status: 'DELIVERED', itemsCount: 1, country: 'Singapore' },
    { id: 'IBW-98203', customer: 'Vikramaditya Roy', email: 'vikram@example.com', date: '2026-08-07', amount: 4890, method: 'RAZORPAY', status: 'PROCESSING', itemsCount: 4, country: 'USA' },
    { id: 'IBW-98204', customer: 'Ananya Mukherjee', email: 'ananya@example.com', date: '2026-08-06', amount: 799, method: 'COD', status: 'SHIPPED', itemsCount: 1, country: 'India' },
    { id: 'IBW-98205', customer: 'Kabir Mehta', email: 'kabir@example.com', date: '2026-08-05', amount: 3150, method: 'PAYPAL', status: 'DELIVERED', itemsCount: 3, country: 'Germany' },
  ]);

  const [booksList, setBooksList] = useState<Array<{
    id: string;
    title: string;
    author: string;
    isbn: string;
    category: string;
    price: number;
    discountPrice?: number;
    stock: number;
    coverImage?: string;
  }>>([
    { id: '1', title: 'The Mahabharata: Complete Unabridged 10-Volume Set', author: 'Vyasa (Tr. Bibek Debroy)', isbn: '978-0143100133', category: 'Vedic & Spiritual', price: 1499, discountPrice: 1199, stock: 42 },
    { id: '2', title: 'Malgudi Days (Special Collector Edition)', author: 'R.K. Narayan', isbn: '978-0141183367', category: 'Fiction & Classics', price: 399, discountPrice: 299, stock: 85 },
    { id: '3', title: 'Discovery of India (75th Anniversary Edition)', author: 'Jawaharlal Nehru', isbn: '978-0670082209', category: 'History & Heritage', price: 699, discountPrice: 549, stock: 18 },
    { id: '4', title: 'Srimad Bhagavad Gita (Sanskrit-English Exegesis)', author: 'Swami Gambhirananda', isbn: '978-8175050419', category: 'Vedic & Spiritual', price: 850, discountPrice: 720, stock: 4 },
  ]);

  const [publishersList, setPublishersList] = useState([
    { id: '1', name: 'Standard Publishers (Bharat)', location: 'New Delhi, India', titlesCount: 420, rating: 4.9, status: 'VERIFIED' },
    { id: '2', name: 'Motilal Banarsidass Publishers (MLBD)', location: 'Delhi, India', titlesCount: 890, rating: 4.9, status: 'VERIFIED' },
    { id: '3', name: 'Gita Press Gorakhpur', location: 'Gorakhpur, UP', titlesCount: 1200, rating: 5.0, status: 'VERIFIED' },
    { id: '4', name: 'Oxford University Press India', location: 'New Delhi, India', titlesCount: 310, rating: 4.7, status: 'VERIFIED' },
  ]);

  const [couponsList, setCouponsList] = useState([
    { id: '1', code: 'WELCOME10', discount: '10% OFF', usage: 1420, status: 'ACTIVE' },
    { id: '2', code: 'FESTIVE20', discount: '20% OFF', usage: 890, status: 'ACTIVE' },
    { id: '3', code: 'VEDIC15', discount: '15% OFF', usage: 410, status: 'ACTIVE' },
  ]);

  const [authorsList, setAuthorsList] = useState([
    { id: 'auth_1', name: 'Maharishi Vyasa', period: 'Vedic Antiquity', primaryLanguage: 'Sanskrit', worksCount: 18, status: 'HERITAGE LEGEND', bio: 'Author of the Mahabharata, Srimad Bhagavata, and compiler of the 4 Sacred Vedas.' },
    { id: 'auth_2', name: 'Dr. Bibek Debroy', period: 'Contemporary', primaryLanguage: 'English & Sanskrit', worksCount: 24, status: 'VERIFIED SCHOLAR', bio: 'Eminent economist & translator of complete unabridged Sanskrit epics.' },
    { id: 'auth_3', name: 'R.K. Narayan', period: '20th Century', primaryLanguage: 'English', worksCount: 15, status: 'CLASSIC', bio: 'Master Indian storyteller & creator of Malgudi Days.' },
    { id: 'auth_4', name: 'Rabindranath Tagore', period: '19th - 20th Century', primaryLanguage: 'Bengali & English', worksCount: 45, status: 'NOBEL LAUREATE', bio: 'Nobel Laureate poet, philosopher & composer of National Anthems.' },
    { id: 'auth_5', name: 'Swami Vivekananda', period: 'Modern Vedanta', primaryLanguage: 'Bengali & English', worksCount: 12, status: 'HERITAGE SCHOLAR', bio: 'Patriot monk who introduced Indian Philosophy and Yoga to the West.' },
  ]);

  const [customersList, setCustomersList] = useState([
    { id: 'usr_1', name: 'Dr. Ramesh Sharma', email: 'ramesh.sharma@du.ac.in', location: 'New Delhi, India', accountType: 'Academic Scholar', ordersCount: 14, ltv: 18450, status: 'VIP' },
    { id: 'usr_2', name: 'Prof. Ananya Sen', email: 'ananya.sen@oxford.edu', location: 'Oxford, United Kingdom', accountType: 'International Researcher', ordersCount: 8, ltv: 24200, status: 'VERIFIED' },
    { id: 'usr_3', name: 'Vedic Research Library', email: 'acquisitions@vedic-library.org', location: 'Varanasi, UP, India', accountType: 'Institutional Member', ordersCount: 32, ltv: 142800, status: 'INSTITUTION' },
    { id: 'usr_4', name: 'Michael Vance', email: 'mvance@indology.de', location: 'Heidelberg, Germany', accountType: 'Indology Scholar', ordersCount: 6, ltv: 12900, status: 'VERIFIED' },
    { id: 'usr_5', name: 'Priya Venkatesh', email: 'priya.v@gmail.com', location: 'Bengaluru, India', accountType: 'Individual Reader', ordersCount: 4, ltv: 3490, status: 'ACTIVE' },
  ]);

  const handleGrantCredit = (customerId: string, amount: number) => {
    showToast(`Granted ₹${amount} store wallet credit to customer!`, 'success');
  };

  const handleToggleCustomerStatus = (customerId: string) => {
    setCustomersList((prev) =>
      prev.map((c) =>
        c.id === customerId
          ? { ...c, status: c.status === 'SUSPENDED' ? 'ACTIVE' : 'SUSPENDED' }
          : c
      )
    );
    showToast(`Updated customer account status`, 'info');
  };

  // Add Publisher State & Handler
  const [newPublisherForm, setNewPublisherForm] = useState({
    name: '',
    location: '',
    contactEmail: '',
    gstin: '',
    titlesCount: '150',
    website: '',
  });

  const handleAddNewPublisher = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newPublisherForm.name || !newPublisherForm.location) {
      showToast('Please enter Publisher Name and Location', 'error');
      return;
    }

    const createdPub = {
      id: 'pub_' + Math.random().toString(36).substring(7),
      name: newPublisherForm.name,
      location: newPublisherForm.location,
      titlesCount: parseInt(newPublisherForm.titlesCount) || 100,
      rating: 4.9,
      status: 'VERIFIED',
    };

    setPublishersList((prev) => [createdPub, ...prev]);
    showToast(`Added "${newPublisherForm.name}" as official publishing partner!`, 'success');
    setActiveTab('publishers');
    setNewPublisherForm({
      name: '',
      location: '',
      contactEmail: '',
      gstin: '',
      titlesCount: '150',
      website: '',
    });
  };

  // Add Author State & Handler
  const [newAuthorForm, setNewAuthorForm] = useState({
    name: '',
    period: 'Contemporary',
    primaryLanguage: 'English',
    worksCount: '10',
    status: 'VERIFIED SCHOLAR',
    bio: '',
  });

  const handleAddNewAuthor = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newAuthorForm.name || !newAuthorForm.bio) {
      showToast('Please enter Author Name and Biography', 'error');
      return;
    }

    const createdAuth = {
      id: 'auth_' + Math.random().toString(36).substring(7),
      name: newAuthorForm.name,
      period: newAuthorForm.period,
      primaryLanguage: newAuthorForm.primaryLanguage,
      worksCount: parseInt(newAuthorForm.worksCount) || 5,
      status: newAuthorForm.status,
      bio: newAuthorForm.bio,
    };

    setAuthorsList((prev) => [createdAuth, ...prev]);
    showToast(`Added "${newAuthorForm.name}" to literary authors directory!`, 'success');
    setActiveTab('authors');
    setNewAuthorForm({
      name: '',
      period: 'Contemporary',
      primaryLanguage: 'English',
      worksCount: '10',
      status: 'VERIFIED SCHOLAR',
      bio: '',
    });
  };

  // Editorial Blogs State & Handler
  const [blogsList, setBlogsList] = useState([
    {
      id: 'blog_1',
      title: 'Decoding the Critical Edition of the Mahabharata',
      category: 'Vedic Heritage',
      excerpt: 'An in-depth analysis of 100+ years of scholarly collation at BORI Institute Pune.',
      author: 'Dr. Bibek Debroy',
      readTime: '8 min read',
      date: 'Aug 04, 2026',
    },
    {
      id: 'blog_2',
      title: 'Why Paninian Grammar Remains the Foundation of Computational Linguistics',
      category: 'Sanskrit Studies',
      excerpt: 'Exploring Ashtadhyayi algorithms in modern natural language processing models.',
      author: 'Prof. Ananya Sen',
      readTime: '12 min read',
      date: 'Jul 28, 2026',
    },
  ]);

  const [newBlogForm, setNewBlogForm] = useState({
    title: '',
    category: 'Vedic Heritage',
    author: 'Vedic Admin',
    readTime: '6 min read',
    excerpt: '',
    content: '',
  });

  const handleAddNewBlog = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newBlogForm.title || !newBlogForm.excerpt) {
      showToast('Please enter Article Title and Excerpt', 'error');
      return;
    }

    const createdArticle = {
      id: 'blog_' + Math.random().toString(36).substring(7),
      title: newBlogForm.title,
      category: newBlogForm.category,
      excerpt: newBlogForm.excerpt,
      author: newBlogForm.author,
      readTime: newBlogForm.readTime,
      date: 'Aug 08, 2026',
    };

    setBlogsList((prev) => [createdArticle, ...prev]);
    showToast(`Published blog post "${newBlogForm.title}"!`, 'success');
    setActiveTab('blogs');
    setNewBlogForm({
      title: '',
      category: 'Vedic Heritage',
      author: 'Vedic Admin',
      readTime: '6 min read',
      excerpt: '',
      content: '',
    });
  };

  // Add Book Modal State
  const [isAddBookModalOpen, setIsAddBookModalOpen] = useState(false);
  const [newBookForm, setNewBookForm] = useState({
    title: '',
    author: '',
    isbn: '',
    category: 'Vedic & Spiritual',
    price: '',
    discountPrice: '',
    stock: '50',
    coverImage: '',
  });

  const handleAddNewBook = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newBookForm.title || !newBookForm.author) {
      showToast('Please enter Title and Author Name', 'error');
      return;
    }

    const createdBook = {
      id: 'bk_' + Math.random().toString(36).substring(7),
      title: newBookForm.title,
      author: newBookForm.author,
      isbn: newBookForm.isbn || '978-' + Math.floor(1000000000 + Math.random() * 9000000000),
      category: newBookForm.category,
      price: parseFloat(newBookForm.price) || 499,
      discountPrice: newBookForm.discountPrice ? parseFloat(newBookForm.discountPrice) : undefined,
      stock: parseInt(newBookForm.stock) || 50,
      coverImage: newBookForm.coverImage || BOOK_COVER_PLACEHOLDER,
    };

    setBooksList((prev) => [createdBook, ...prev]);
    showToast(`Published "${newBookForm.title}" to catalog!`, 'success');
    setIsAddBookModalOpen(false);
    setNewBookForm({
      title: '',
      author: '',
      isbn: '',
      category: 'Vedic & Spiritual',
      price: '',
      discountPrice: '',
      stock: '50',
      coverImage: '',
    });
  };

  // Handlers for dynamic state changes
  const handleUpdateOrderStatus = (orderId: string, newStatus: string) => {
    setOrders((prev) =>
      prev.map((o) => (o.id === orderId ? { ...o, status: newStatus as any } : o))
    );
    showToast(`Updated order ${orderId} to ${newStatus}`, 'success');
  };

  const handleRestockBook = (bookId: string, amount: number) => {
    setBooksList((prev) =>
      prev.map((b) => (b.id === bookId ? { ...b, stock: b.stock + amount } : b))
    );
    showToast(`Restocked +${amount} copies`, 'success');
  };

  const handleLogout = () => {
    dispatch(logout());
    router.push('/login');
  };

  if (!isAuthenticated || user?.role !== 'ADMIN') {
    return (
      <div className="max-w-md mx-auto px-4 py-24 text-center space-y-4">
        <div className="w-16 h-16 rounded-full bg-rose-50 dark:bg-rose-950/50 text-[#701a08] flex items-center justify-center mx-auto shadow-inner">
          <Lock className="w-8 h-8" />
        </div>
        <h2 className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100">Admin Access Required</h2>
        <p className="text-xs text-zinc-500 leading-relaxed">
          You must be logged in as an authorized Administrator to access the Enterprise Operations Console.
        </p>
        <Link
          href="/login?redirect=/admin/dashboard"
          className="inline-block px-7 py-3.5 rounded-2xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold text-xs shadow-xl transition-all"
        >
          Sign In As Administrator
        </Link>
      </div>
    );
  }

  // Filtered lists based on search bar
  const filteredOrders = orders.filter(
    (o) =>
      o.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      o.customer.toLowerCase().includes(searchQuery.toLowerCase()) ||
      o.country.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const filteredBooks = booksList.filter(
    (b) =>
      b.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      b.author.toLowerCase().includes(searchQuery.toLowerCase()) ||
      b.isbn.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className={`min-h-screen ${darkMode ? 'dark bg-zinc-950 text-zinc-100' : 'bg-zinc-50 text-zinc-900'} transition-colors duration-200`}>
      {/* Top Enterprise Bar */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-md border-b border-zinc-200 dark:border-zinc-800 px-4 sm:px-8 py-3.5 flex items-center justify-between shadow-sm">
        <div className="flex items-center gap-3">
          <Link href="/" className="flex items-center gap-2.5">
            <div className="w-9 h-9 rounded-xl bg-[#701a08] text-amber-200 flex items-center justify-center font-extrabold text-xs shadow-md">
              IBW
            </div>
            <div>
              <h1 className="font-extrabold text-sm tracking-tight text-zinc-900 dark:text-zinc-100">
                Indian Books Worldwide
              </h1>
              <span className="text-[10px] font-bold text-[#701a08] dark:text-amber-400 uppercase tracking-widest block -mt-0.5">
                Enterprise Admin Console
              </span>
            </div>
          </Link>
        </div>

        {/* Global Live Search & Quick Actions */}
        <div className="flex items-center gap-4">
          <div className="relative hidden md:block w-72">
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search orders, books, ISBN, customers..."
              className="w-full pl-9 pr-4 py-1.5 text-xs rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800/60 focus:outline-none focus:ring-2 focus:ring-[#701a08]"
            />
            <Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-zinc-400" />
          </div>

          <button
            onClick={() => setDarkMode(!darkMode)}
            className="p-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-600 dark:text-zinc-300 transition-colors"
            title="Toggle Dark/Light Mode"
          >
            {darkMode ? <Sun className="w-4 h-4 text-amber-400" /> : <Moon className="w-4 h-4 text-zinc-700" />}
          </button>

          <div className="flex items-center gap-3 pl-3 border-l border-zinc-200 dark:border-zinc-800">
            <div className="w-8 h-8 rounded-full bg-[#701a08] text-white font-bold text-xs flex items-center justify-center shadow-md">
              {user?.firstName?.[0] || 'V'}
            </div>
            <div className="hidden sm:block text-left">
              <span className="text-xs font-bold block leading-none">{user?.fullName || 'Vedic Admin'}</span>
              <span className="text-[10px] text-zinc-500 font-medium">Super Administrator</span>
            </div>
            <button
              onClick={handleLogout}
              className="p-1.5 text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg transition-colors ml-1"
              title="Sign Out"
            >
              <LogOut className="w-4 h-4" />
            </button>
          </div>
        </div>
      </header>

      {/* Main Body Layout */}
      <div className="flex">
        {/* Enterprise Sidebar Navigation */}
        <aside className="w-64 shrink-0 bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 sticky top-[57px] h-[calc(100vh-57px)] overflow-y-auto p-4 space-y-6 hidden lg:block">
          <div className="space-y-1">
            <span className="text-[10px] uppercase font-extrabold tracking-wider text-zinc-400 px-3 block mb-1">
              Operational Modules
            </span>

            {[
              { id: 'analytics', label: 'Dashboard Analytics', icon: BarChart3 },
              { id: 'revenue', label: 'Revenue & Finance', icon: TrendingUp },
              { id: 'orders', label: 'Order Management', icon: ShoppingBag, badge: '5 Live' },
              { id: 'books', label: 'Book Catalog', icon: BookOpen },
              { id: 'customers', label: 'Customers', icon: Users },
              { id: 'publishers', label: 'Publishers', icon: Building2 },
              { id: 'authors', label: 'Authors Catalog', icon: UserCheck },
              { id: 'inventory', label: 'Inventory Stock', icon: Package, badge: 'Low Stock' },
            ].map((item) => (
              <button
                key={item.id}
                onClick={() => setActiveTab(item.id as any)}
                className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-xs font-bold transition-all ${
                  activeTab === item.id
                    ? 'bg-[#701a08] text-white shadow-md'
                    : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'
                }`}
              >
                <div className="flex items-center gap-2.5">
                  <item.icon className="w-4 h-4" />
                  {item.label}
                </div>
                {item.badge && (
                  <span
                    className={`text-[9px] font-extrabold px-2 py-0.5 rounded-full ${
                      activeTab === item.id
                        ? 'bg-white/20 text-white'
                        : 'bg-rose-100 text-[#701a08] dark:bg-rose-950 dark:text-rose-300'
                    }`}
                  >
                    {item.badge}
                  </span>
                )}
              </button>
            ))}
          </div>

          <div className="space-y-1 pt-4 border-t border-zinc-200 dark:border-zinc-800">
            <span className="text-[10px] uppercase font-extrabold tracking-wider text-zinc-400 px-3 block mb-1">
              Content & Marketing
            </span>

            {[
              { id: 'coupons', label: 'Coupons & Promos', icon: Ticket },
              { id: 'campaigns', label: 'Festival Campaigns', icon: Flame },
              { id: 'forecasts', label: 'AI Demand Forecast', icon: TrendingUp },
              { id: 'payments-panel', label: 'Payments & Refunds', icon: CreditCard },
              { id: 'blogs', label: 'Editorial Blogs', icon: FileText },
              { id: 'banners', label: 'Promotional Banners', icon: ImageIcon },
              { id: 'notifications', label: 'System Alerts', icon: Bell },
              { id: 'reports', label: 'Export Reports', icon: Download },
              { id: 'seo', label: 'SEO Configuration', icon: Layers },
              { id: 'settings', label: 'Store Settings', icon: SettingsIcon },
            ].map((item) => (
              <button
                key={item.id}
                onClick={() => setActiveTab(item.id as any)}
                className={`w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-xs font-bold transition-all ${
                  activeTab === item.id
                    ? 'bg-[#701a08] text-white shadow-md'
                    : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'
                }`}
              >
                <item.icon className="w-4 h-4" />
                {item.label}
              </button>
            ))}
          </div>
        </aside>

        {/* Content Workspace Area */}
        <main className="flex-1 p-4 sm:p-8 space-y-8 max-w-7xl mx-auto">
          {/* Module 1: Dashboard Analytics */}
          {activeTab === 'analytics' && (
            <div className="space-y-8">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                  <h2 className="text-2xl font-extrabold tracking-tight">System Performance & Analytics</h2>
                  <p className="text-xs text-zinc-500 mt-1">Real-time marketplace telemetry, GMV metrics, and order fulfillment throughput</p>
                </div>
                <div className="flex items-center gap-3">
                  <button className="px-3.5 py-2 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-xs font-bold flex items-center gap-2 shadow-sm">
                    <Filter className="w-3.5 h-3.5" /> Last 30 Days
                  </button>
                  <button
                    onClick={() => showToast('Exporting analytics report as PDF...', 'info')}
                    className="px-4 py-2 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-xs font-extrabold shadow-md flex items-center gap-2 transition-colors"
                  >
                    <Download className="w-3.5 h-3.5" /> Export PDF
                  </button>
                </div>
              </div>

              {/* 4 Stat Widget Cards */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                {[
                  { title: 'Gross Merchandise Value', val: '₹48,92,400', change: '+18.4%', positive: true, icon: DollarSign, sub: 'vs ₹41.3L last month' },
                  { title: 'Total Orders Shipped', val: '3,842', change: '+12.1%', positive: true, icon: ShoppingBag, sub: '99.4% fulfillment rate' },
                  { title: 'Active Registered Customers', val: '14,290', change: '+24.8%', positive: true, icon: Users, sub: '2,410 new this month' },
                  { title: 'Catalog In-Stock Books', val: '9,410', change: '-2.3%', positive: false, icon: BookOpen, sub: '142 titles low stock' },
                ].map((stat, idx) => (
                  <div key={idx} className="bg-white dark:bg-zinc-900 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-semibold text-zinc-500">{stat.title}</span>
                      <div className="w-8 h-8 rounded-xl bg-rose-50 dark:bg-rose-950/50 text-[#701a08] flex items-center justify-center">
                        <stat.icon className="w-4 h-4" />
                      </div>
                    </div>
                    <div className="flex items-baseline justify-between">
                      <span className="text-2xl font-extrabold">{stat.val}</span>
                      <span className={`text-xs font-bold flex items-center gap-0.5 ${stat.positive ? 'text-green-600' : 'text-red-500'}`}>
                        {stat.positive ? <ArrowUpRight className="w-3.5 h-3.5" /> : <ArrowDownRight className="w-3.5 h-3.5" />}
                        {stat.change}
                      </span>
                    </div>
                    <p className="text-[11px] text-zinc-400 border-t border-zinc-100 dark:border-zinc-800/80 pt-2">{stat.sub}</p>
                  </div>
                ))}
              </div>

              {/* Graphical Charts Section */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="lg:col-span-2 bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="font-bold text-sm">Revenue & Sales Trends</h3>
                      <p className="text-xs text-zinc-500">Monthly GMV growth trajectory for FY 2026</p>
                    </div>
                    <span className="text-xs font-extrabold text-[#701a08] bg-rose-50 dark:bg-rose-950/40 px-2.5 py-1 rounded-full">
                      +28.4% YoY
                    </span>
                  </div>

                  <div className="h-56 flex items-end justify-between gap-3 pt-6 border-b border-zinc-100 dark:border-zinc-800 px-2">
                    {[
                      { month: 'Jan', height: '40%', val: '₹22L' },
                      { month: 'Feb', height: '55%', val: '₹29L' },
                      { month: 'Mar', height: '45%', val: '₹25L' },
                      { month: 'Apr', height: '70%', val: '₹36L' },
                      { month: 'May', height: '60%', val: '₹31L' },
                      { month: 'Jun', height: '85%', val: '₹42L' },
                      { month: 'Jul', height: '95%', val: '₹48L' },
                    ].map((bar, i) => (
                      <div key={i} className="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
                        <span className="text-[10px] font-bold text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity">
                          {bar.val}
                        </span>
                        <div
                          style={{ height: bar.height }}
                          className="w-full max-w-[36px] rounded-t-xl bg-[#701a08] group-hover:bg-[#581406] transition-all shadow-md"
                        />
                        <span className="text-xs font-semibold text-zinc-500">{bar.month}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-6">
                  <div>
                    <h3 className="font-bold text-sm">Top Selling Genres</h3>
                    <p className="text-xs text-zinc-500">Revenue split across book categories</p>
                  </div>

                  <div className="space-y-3 pt-2">
                    {[
                      { category: 'Vedic & Spiritual Literature', pct: '38%', color: 'bg-[#701a08]' },
                      { category: 'Indian Fiction & Modern Classics', pct: '26%', color: 'bg-[#0073bc]' },
                      { category: 'History & Heritage Chronicles', pct: '18%', color: 'bg-amber-600' },
                      { category: 'Regional Language Masterpieces', pct: '12%', color: 'bg-emerald-600' },
                      { category: 'Philosophy & Academic Studies', pct: '6%', color: 'bg-purple-600' },
                    ].map((item, idx) => (
                      <div key={idx} className="space-y-1">
                        <div className="flex justify-between text-xs font-semibold">
                          <span>{item.category}</span>
                          <span className="font-bold">{item.pct}</span>
                        </div>
                        <div className="w-full h-2 rounded-full bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
                          <div style={{ width: item.pct }} className={`h-full ${item.color} rounded-full`} />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Module 2: Revenue & Finance */}
          {activeTab === 'revenue' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-extrabold">Revenue & Financial Analytics</h2>
                  <p className="text-xs text-zinc-500 mt-1">Detailed break-up of worldwide sales, currency exchanges, and gateway settlements</p>
                </div>
                <button
                  onClick={() => showToast('Financial Statement Generated', 'success')}
                  className="px-4 py-2 rounded-xl bg-[#701a08] text-white text-xs font-bold shadow-md"
                >
                  Generate GST Settlement Statement
                </button>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-4">
                <div className="p-5 rounded-2xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 space-y-1">
                  <span className="text-xs text-zinc-500 font-bold uppercase tracking-wider">Domestic Revenue (India)</span>
                  <span className="text-2xl font-extrabold block text-[#701a08]">₹31,40,200</span>
                  <span className="text-[10px] text-zinc-400">Via Razorpay & UPI Gateways</span>
                </div>
                <div className="p-5 rounded-2xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 space-y-1">
                  <span className="text-xs text-zinc-500 font-bold uppercase tracking-wider">International Exports</span>
                  <span className="text-2xl font-extrabold block text-[#0073bc]">₹17,52,200 ($21,026)</span>
                  <span className="text-[10px] text-zinc-400">Via PayPal Worldwide (USD/GBP/EUR)</span>
                </div>
                <div className="p-5 rounded-2xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 space-y-1">
                  <span className="text-xs text-zinc-500 font-bold uppercase tracking-wider">Average Order Value (AOV)</span>
                  <span className="text-2xl font-extrabold block text-emerald-600">₹1,273</span>
                  <span className="text-[10px] text-zinc-400">Average items per order: 2.4</span>
                </div>
              </div>
            </div>
          )}

          {/* Module 3: Order Management */}
          {activeTab === 'orders' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                  <h2 className="text-2xl font-extrabold">Order Management & Dispatch</h2>
                  <p className="text-xs text-zinc-500 mt-1">Live customer orders and shipping state triggers</p>
                </div>
                <div className="flex items-center gap-2">
                  {(['ALL', 'PROCESSING', 'SHIPPED', 'DELIVERED'] as const).map((st) => (
                    <button
                      key={st}
                      onClick={() => setOrderFilter(st)}
                      className={`px-3 py-1.5 rounded-xl text-xs font-bold transition-all ${
                        orderFilter === st
                          ? 'bg-[#701a08] text-white shadow-md'
                          : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300'
                      }`}
                    >
                      {st}
                    </button>
                  ))}
                </div>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs">
                  <thead>
                    <tr className="border-b border-zinc-200 dark:border-zinc-800 text-zinc-400 uppercase font-bold">
                      <th className="pb-3">Order Number</th>
                      <th className="pb-3">Customer</th>
                      <th className="pb-3">Date</th>
                      <th className="pb-3">Gateway</th>
                      <th className="pb-3">Total Amount</th>
                      <th className="pb-3">Current Status</th>
                      <th className="pb-3 text-right">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800 font-medium">
                    {filteredOrders
                      .filter((o) => orderFilter === 'ALL' || o.status === orderFilter)
                      .map((ord) => (
                        <tr key={ord.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/40">
                          <td className="py-3 font-extrabold text-[#701a08]">{ord.id}</td>
                          <td className="py-3">
                            <span className="font-bold block">{ord.customer}</span>
                            <span className="text-[10px] text-zinc-400">{ord.country}</span>
                          </td>
                          <td className="py-3 text-zinc-500">{ord.date}</td>
                          <td className="py-3 font-bold text-zinc-700 dark:text-zinc-300">{ord.method}</td>
                          <td className="py-3 font-extrabold">₹{ord.amount}</td>
                          <td className="py-3">
                            <span
                              className={`px-2.5 py-1 rounded-full text-[10px] font-extrabold ${
                                ord.status === 'DELIVERED'
                                  ? 'bg-green-50 text-green-600 dark:bg-green-950/40'
                                  : ord.status === 'SHIPPED'
                                  ? 'bg-blue-50 text-blue-600 dark:bg-blue-950/40'
                                  : 'bg-amber-50 text-amber-600 dark:bg-amber-950/40'
                              }`}
                            >
                              {ord.status}
                            </span>
                          </td>
                          <td className="py-3 text-right space-x-1">
                            <button
                              onClick={() => handleUpdateOrderStatus(ord.id, 'SHIPPED')}
                              className="px-2 py-1 bg-blue-50 text-blue-700 font-bold text-[10px] rounded-lg hover:bg-blue-100"
                            >
                              Ship
                            </button>
                            <button
                              onClick={() => handleUpdateOrderStatus(ord.id, 'DELIVERED')}
                              className="px-2 py-1 bg-green-50 text-green-700 font-bold text-[10px] rounded-lg hover:bg-green-100"
                            >
                              Deliver
                            </button>
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* Module 4: Book Catalog */}
          {activeTab === 'books' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-5 sm:p-8 shadow-sm">
              <CatalogManager />
            </div>
          )}
          {false && activeTab === 'books' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-extrabold">Book Store Catalog Management</h2>
                  <p className="text-xs text-zinc-500 mt-1">Manage catalog titles, pricing, ISBN metadata, and warehouse inventory</p>
                </div>
                <button
                  onClick={() => setActiveTab('add-book')}
                  className="px-4 py-2.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-xs font-bold flex items-center gap-1.5 transition-colors shadow-md cursor-pointer"
                >
                  <Plus className="w-4 h-4" /> Add New Book Title
                </button>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs">
                  <thead>
                    <tr className="border-b border-zinc-200 dark:border-zinc-800 text-zinc-400 uppercase font-bold">
                      <th className="pb-3">Book Title</th>
                      <th className="pb-3">Author</th>
                      <th className="pb-3">ISBN</th>
                      <th className="pb-3">Category</th>
                      <th className="pb-3">Price</th>
                      <th className="pb-3">Stock</th>
                      <th className="pb-3 text-right">Quick Action</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800 font-medium">
                    {filteredBooks.map((b) => (
                      <tr key={b.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/40">
                        <td className="py-3 font-bold text-zinc-900 dark:text-zinc-100 max-w-xs truncate">{b.title}</td>
                        <td className="py-3 text-zinc-500">{b.author}</td>
                        <td className="py-3 font-mono text-[11px] text-zinc-400">{b.isbn}</td>
                        <td className="py-3">
                          <span className="px-2 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 text-[10px] font-bold">{b.category}</span>
                        </td>
                        <td className="py-3 font-extrabold text-[#701a08]">₹{b.discountPrice || b.price}</td>
                        <td className="py-3">
                          <span className={`font-bold ${b.stock < 10 ? 'text-red-500' : 'text-green-600'}`}>
                            {b.stock} copies
                          </span>
                        </td>
                        <td className="py-3 text-right">
                          <button
                            onClick={() => handleRestockBook(b.id, 20)}
                            className="px-2.5 py-1 rounded-lg bg-rose-50 text-[#701a08] font-bold text-[10px] hover:bg-rose-100"
                          >
                            +20 Restock
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* Module: Add New Book Title Full Page Workspace with Sidebar */}
          {activeTab === 'add-book' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-8 shadow-sm">
              <div className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-4">
                <div>
                  <h2 className="text-2xl font-extrabold flex items-center gap-2">
                    <BookOpen className="w-6 h-6 text-[#701a08]" /> Add New Title To Store Catalog
                  </h2>
                  <p className="text-xs text-zinc-500 mt-1">Publish new Indian literature, Vedic scripture, or academic title with complete specifications</p>
                </div>
                <button
                  onClick={() => setActiveTab('books')}
                  className="px-4 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 font-bold text-xs hover:bg-zinc-200 text-zinc-600 dark:text-zinc-300"
                >
                  ← Back to Catalog
                </button>
              </div>

              <form onSubmit={(e) => { handleAddNewBook(e); setActiveTab('books'); }} className="space-y-8 text-xs">
                {/* 1. Basic Book Information */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    1. Basic Book Information
                  </span>
                  
                  <div className="space-y-3">
                    <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={newBookForm.title}
                        onChange={(e) => setNewBookForm({ ...newBookForm, 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 text-xs"
                      />
                    </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">Author Name *</label>
                        <input
                          type="text"
                          required
                          placeholder="e.g. Maharishi Vyasa"
                          value={newBookForm.author}
                          onChange={(e) => setNewBookForm({ ...newBookForm, 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 text-xs"
                        />
                      </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 / Swami Gambhirananda"
                          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-xs"
                        />
                      </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={newBookForm.isbn}
                          onChange={(e) => setNewBookForm({ ...newBookForm, isbn: 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-mono font-semibold text-xs"
                        />
                      </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"
                          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-mono font-semibold text-xs"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                {/* 2. Taxonomy, Language & Publisher */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    2. Subject Taxonomy & Publishing House
                  </span>

                  <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 Category</label>
                      <select
                        value={newBookForm.category}
                        onChange={(e) => setNewBookForm({ ...newBookForm, category: 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-xs"
                      >
                        <option value="Vedic & Spiritual">Vedic & Spiritual</option>
                        <option value="Agriculture & Forestry">Agriculture & Forestry</option>
                        <option value="Ayurveda & Yoga">Ayurveda & Yoga</option>
                        <option value="Fiction & Classics">Fiction & Classics</option>
                        <option value="History & Heritage">History & Heritage</option>
                        <option value="Law & Legal Studies">Law & Legal Studies</option>
                        <option value="Philosophy & Religion">Philosophy & Religion</option>
                        <option value="Regional Languages">Regional Languages</option>
                      </select>
                    </div>

                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Language</label>
                      <select 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-xs">
                        <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">Publishing House</label>
                      <select 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-xs">
                        <option value="Standard Publishers (Bharat)">Standard Publishers (Bharat)</option>
                        <option value="Motilal Banarsidass (MLBD)">Motilal Banarsidass (MLBD)</option>
                        <option value="Gita Press Gorakhpur">Gita Press Gorakhpur</option>
                        <option value="Oxford University Press India">Oxford University Press India</option>
                      </select>
                    </div>
                  </div>
                </div>

                {/* 3. Specifications & Binding */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    3. Physical Specifications & Binding
                  </span>

                  <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 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 text-xs">
                        <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" 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 text-xs" />
                    </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" 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 text-xs" />
                    </div>

                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Weight (Grams)</label>
                      <input type="number" placeholder="750" 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 text-xs" />
                    </div>
                  </div>
                </div>

                {/* 4. Pricing, Taxes & Inventory */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    4. Pricing, GST Exemption & Stock Inventory
                  </span>

                  <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={newBookForm.price}
                        onChange={(e) => setNewBookForm({ ...newBookForm, 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-xs"
                      />
                    </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={newBookForm.discountPrice}
                        onChange={(e) => setNewBookForm({ ...newBookForm, 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-xs text-[#701a08]"
                      />
                    </div>

                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">GST Tax Rate</label>
                      <select 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-xs">
                        <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={newBookForm.stock}
                        onChange={(e) => setNewBookForm({ ...newBookForm, 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-xs text-green-600"
                      />
                    </div>
                  </div>
                </div>

                {/* 5. Synopsis & Cover Image */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    5. Full Synopsis Overview & Artwork Image
                  </span>

                  <div className="space-y-3">
                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Full Synopsis Overview / Publisher Note</label>
                      <textarea
                        rows={3}
                        placeholder="Enter comprehensive book overview, author commentary, or table of contents..."
                        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 text-xs"
                      />
                    </div>

                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Local Cover Artwork Path</label>
                      <input
                        type="text"
                        placeholder="/assets/uploads/books/cover.jpg"
                        value={newBookForm.coverImage}
                        onChange={(e) => setNewBookForm({ ...newBookForm, coverImage: 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-xs"
                      />
                    </div>
                  </div>
                </div>

                <div className="pt-4 flex items-center justify-end gap-3 border-t border-zinc-100 dark:border-zinc-800">
                  <button
                    type="button"
                    onClick={() => setActiveTab('books')}
                    className="px-5 py-3 rounded-xl bg-zinc-100 dark:bg-zinc-800 font-bold text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-8 py-3.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold shadow-lg transition-colors cursor-pointer"
                  >
                    Publish Book Title to Catalog
                  </button>
                </div>
              </form>
            </div>
          )}

          {/* Module 5: Customers */}
          {activeTab === 'customers' && (
            <CustomerManager />
          )}

          {/* Module 6: Publishers */}
          {activeTab === 'publishers' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-extrabold">Publishing Partners & Houses</h2>
                  <p className="text-xs text-zinc-500 mt-1">Verified Indology, Academic & Vedic book publishers across India and worldwide</p>
                </div>
                <button
                  onClick={() => setActiveTab('add-publisher')}
                  className="px-4 py-2.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-xs font-bold transition-colors shadow-md cursor-pointer flex items-center gap-1"
                >
                  <Plus className="w-4 h-4" /> Add Publisher House
                </button>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {publishersList.map((p) => (
                  <div key={p.id} className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 space-y-2">
                    <div className="flex justify-between items-start">
                      <h4 className="font-extrabold text-sm text-zinc-900 dark:text-zinc-100">{p.name}</h4>
                      <span className="px-2 py-0.5 rounded bg-green-50 text-green-700 font-extrabold text-[10px]">{p.status}</span>
                    </div>
                    <p className="text-xs text-zinc-500">{p.location}</p>
                    <span className="text-xs font-extrabold text-[#701a08] block">{p.titlesCount} Titles Published</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Module: Add Publisher House Full Workspace Page with Sidebar */}
          {activeTab === 'add-publisher' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-8 shadow-sm">
              <div className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-4">
                <div>
                  <h2 className="text-2xl font-extrabold flex items-center gap-2">
                    <Building2 className="w-6 h-6 text-[#701a08]" /> Register New Publishing Partner House
                  </h2>
                  <p className="text-xs text-zinc-500 mt-1">Add accredited Indology, Vedic, or academic press house to verified partner network</p>
                </div>
                <button
                  onClick={() => setActiveTab('publishers')}
                  className="px-4 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 font-bold text-xs hover:bg-zinc-200 text-zinc-600 dark:text-zinc-300"
                >
                  ← Back to Partners
                </button>
              </div>

              <form onSubmit={handleAddNewPublisher} className="space-y-8 text-xs">
                {/* 1. Corporate Entity Details */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    1. Corporate Entity & Imprint Details
                  </span>

                  <div className="space-y-3">
                    <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">Publishing House Name *</label>
                        <input
                          type="text"
                          required
                          placeholder="e.g. Chowkhamba Sanskrit Series Office"
                          value={newPublisherForm.name}
                          onChange={(e) => setNewPublisherForm({ ...newPublisherForm, name: 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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Official Imprint / Press Brand</label>
                        <input
                          type="text"
                          placeholder="e.g. Chowkhamba Orientalia / Chaukhambha Bharati Academy"
                          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-xs"
                        />
                      </div>
                    </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">Legal Entity Structure</label>
                        <select 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-xs">
                          <option value="Private Limited">Private Limited Company</option>
                          <option value="Registered Partnership">Registered Partnership</option>
                          <option value="Public Educational Trust">Public Educational Trust</option>
                          <option value="University Press">University Press</option>
                          <option value="Proprietorship">Proprietorship</option>
                        </select>
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Year Established</label>
                        <input
                          type="number"
                          placeholder="1912"
                          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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Company CIN / Reg Number</label>
                        <input
                          type="text"
                          placeholder="U22110DL2005PTC134567"
                          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-mono font-semibold text-xs"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                {/* 2. Contact & Location Information */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    2. Contact & Headquarter Location
                  </span>

                  <div className="space-y-3">
                    <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">Corporate Contact Email *</label>
                        <input
                          type="email"
                          required
                          placeholder="contact@chowkhamba.co.in"
                          value={newPublisherForm.contactEmail}
                          onChange={(e) => setNewPublisherForm({ ...newPublisherForm, contactEmail: 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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Corporate Support Phone</label>
                        <input
                          type="tel"
                          placeholder="+91 542 2401234"
                          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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Headquarter City & State *</label>
                        <input
                          type="text"
                          required
                          placeholder="Varanasi, Uttar Pradesh"
                          value={newPublisherForm.location}
                          onChange={(e) => setNewPublisherForm({ ...newPublisherForm, location: 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-xs"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                      <div className="sm:col-span-2">
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Registered Office Address</label>
                        <input
                          type="text"
                          placeholder="K. 37/109, Gopal Mandir Lane, Golghar, Varanasi - 221001"
                          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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Country</label>
                        <input
                          type="text"
                          defaultValue="India"
                          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-xs"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                {/* 3. Tax Registrations & Bank Settlement */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    3. Tax Registrations & Direct Bank Settlement
                  </span>

                  <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">GSTIN Registration Code</label>
                      <input
                        type="text"
                        placeholder="09AAABC1234D1Z5"
                        value={newPublisherForm.gstin}
                        onChange={(e) => setNewPublisherForm({ ...newPublisherForm, gstin: 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-mono font-semibold text-xs"
                      />
                    </div>

                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">PAN Card Number</label>
                      <input
                        type="text"
                        placeholder="AAABC1234D"
                        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-mono font-semibold text-xs"
                      />
                    </div>

                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Bank Account Number</label>
                      <input
                        type="text"
                        placeholder="50200012345678"
                        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-mono font-semibold text-xs"
                      />
                    </div>

                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">IFSC Code</label>
                      <input
                        type="text"
                        placeholder="HDFC0001234"
                        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-mono font-semibold text-xs"
                      />
                    </div>
                  </div>
                </div>

                {/* 4. Portfolio & Digital Branding */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    4. Publishing Portfolio & Digital Branding
                  </span>

                  <div className="space-y-3">
                    <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">Primary Specialties</label>
                        <select 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-xs">
                          <option value="Sanskrit & Vedic Literature">Sanskrit & Vedic Literature</option>
                          <option value="Ayurvedic Manuscripts">Ayurvedic Manuscripts</option>
                          <option value="Indology & Philosophy">Indology & Philosophy</option>
                          <option value="Indian History & Archaeology">Indian History & Archaeology</option>
                        </select>
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Initial Catalog Titles Count</label>
                        <input
                          type="number"
                          placeholder="150"
                          value={newPublisherForm.titlesCount}
                          onChange={(e) => setNewPublisherForm({ ...newPublisherForm, titlesCount: 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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Official Website URL</label>
                        <input
                          type="url"
                          placeholder="https://www.chowkhamba.co.in"
                          value={newPublisherForm.website}
                          onChange={(e) => setNewPublisherForm({ ...newPublisherForm, website: 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-xs"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                <div className="pt-4 flex items-center justify-end gap-3 border-t border-zinc-100 dark:border-zinc-800">
                  <button
                    type="button"
                    onClick={() => setActiveTab('publishers')}
                    className="px-5 py-3 rounded-xl bg-zinc-100 dark:bg-zinc-800 font-bold text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-8 py-3.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold shadow-lg transition-colors cursor-pointer"
                  >
                    Register Publishing House Partner
                  </button>
                </div>
              </form>
            </div>
          )}

          {/* Module 7: Authors Catalog */}
          {activeTab === 'authors' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-extrabold">Literary Heritage Authors & Scholars</h2>
                  <p className="text-xs text-zinc-500 mt-1">Manage author biographies, classical indology commentators & modern writers</p>
                </div>
                <button
                  onClick={() => setActiveTab('add-author')}
                  className="px-4 py-2.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-xs font-bold transition-colors shadow-md cursor-pointer flex items-center gap-1"
                >
                  <Plus className="w-4 h-4" /> Add Author Bio
                </button>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {authorsList
                  .filter(
                    (a) =>
                      a.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                      a.bio.toLowerCase().includes(searchQuery.toLowerCase()) ||
                      a.primaryLanguage.toLowerCase().includes(searchQuery.toLowerCase())
                  )
                  .map((a) => (
                    <div key={a.id} className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 space-y-3 bg-zinc-50/50 dark:bg-zinc-800/30">
                      <div className="flex items-start justify-between">
                        <div>
                          <h4 className="font-extrabold text-base text-zinc-900 dark:text-zinc-100">{a.name}</h4>
                          <span className="text-[10px] text-zinc-400 font-semibold">{a.period} • {a.primaryLanguage}</span>
                        </div>
                        <span className="px-2.5 py-0.5 rounded-full bg-amber-50 text-amber-800 font-extrabold text-[10px]">
                          {a.status}
                        </span>
                      </div>
                      <p className="text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed font-medium">{a.bio}</p>
                      <div className="pt-2 border-t border-zinc-200/60 dark:border-zinc-700/60 flex items-center justify-between text-xs">
                        <span className="font-extrabold text-[#701a08]">{a.worksCount} Works in Catalog</span>
                        <button
                          onClick={() => showToast(`Editing bio for ${a.name}`, 'info')}
                          className="font-extrabold text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200 text-[11px]"
                        >
                          Edit Profile →
                        </button>
                      </div>
                    </div>
                  ))}
              </div>
            </div>
          )}

          {/* Module: Add Author Biography Full Workspace Page with Sidebar */}
          {activeTab === 'add-author' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-8 shadow-sm">
              <div className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-4">
                <div>
                  <h2 className="text-2xl font-extrabold flex items-center gap-2">
                    <BookOpen className="w-6 h-6 text-[#701a08]" /> Add New Author Biography & Profile
                  </h2>
                  <p className="text-xs text-zinc-500 mt-1">Register classical indology scholar, Vedic commentator, or modern author with complete biography</p>
                </div>
                <button
                  onClick={() => setActiveTab('authors')}
                  className="px-4 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 font-bold text-xs hover:bg-zinc-200 text-zinc-600 dark:text-zinc-300"
                >
                  ← Back to Authors
                </button>
              </div>

              <form onSubmit={handleAddNewAuthor} className="space-y-8 text-xs">
                {/* 1. Profile & Identity */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    1. Author Profile & Historical Identity
                  </span>

                  <div className="space-y-3">
                    <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">Author English Full Name *</label>
                        <input
                          type="text"
                          required
                          placeholder="e.g. Maharishi Valmiki / Sri Aurobindo"
                          value={newAuthorForm.name}
                          onChange={(e) => setNewAuthorForm({ ...newAuthorForm, name: 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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Native Script Name / Title</label>
                        <input
                          type="text"
                          placeholder="e.g. महर्षि वाल्मीकि / শ্রী অরবিন্দ"
                          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-xs"
                        />
                      </div>
                    </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">Historical Era / Period</label>
                        <select
                          value={newAuthorForm.period}
                          onChange={(e) => setNewAuthorForm({ ...newAuthorForm, period: 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-xs"
                        >
                          <option value="Vedic Antiquity">Vedic Antiquity</option>
                          <option value="Classical Sanskrit Era">Classical Sanskrit Era</option>
                          <option value="Medieval Bhakti Era">Medieval Bhakti Era</option>
                          <option value="19th - 20th Century">19th - 20th Century</option>
                          <option value="Modern Vedanta">Modern Vedanta</option>
                          <option value="Contemporary">Contemporary Scholar</option>
                        </select>
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Birthplace / Region</label>
                        <input
                          type="text"
                          placeholder="e.g. Kashi (Varanasi) / Bengal"
                          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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Birth Year / Century</label>
                        <input
                          type="text"
                          placeholder="e.g. 1500 BCE / 1861 AD"
                          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-xs"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                {/* 2. Academic & Literary Background */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    2. Academic Discipline & Primary Languages
                  </span>

                  <div className="space-y-3">
                    <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">Primary Languages</label>
                        <input
                          type="text"
                          placeholder="e.g. Sanskrit, English, Bengali"
                          value={newAuthorForm.primaryLanguage}
                          onChange={(e) => setNewAuthorForm({ ...newAuthorForm, primaryLanguage: 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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Magnum Opus / Famous Work</label>
                        <input
                          type="text"
                          placeholder="e.g. Ramayana / Srimad Bhagavata"
                          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-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Honorific Status Tag</label>
                        <select
                          value={newAuthorForm.status}
                          onChange={(e) => setNewAuthorForm({ ...newAuthorForm, status: 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-xs"
                        >
                          <option value="HERITAGE LEGEND">HERITAGE LEGEND</option>
                          <option value="VERIFIED SCHOLAR">VERIFIED SCHOLAR</option>
                          <option value="NOBEL LAUREATE">NOBEL LAUREATE</option>
                          <option value="CLASSIC">CLASSIC</option>
                          <option value="CONTEMPORARY">CONTEMPORARY</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>

                {/* 3. Biography & Quotes */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    3. Detailed Biography Overview & Famous Quotes
                  </span>

                  <div className="space-y-3">
                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Comprehensive Biography Overview *</label>
                      <textarea
                        rows={4}
                        required
                        placeholder="Write detailed biography, commentary heritage, philosophical contributions..."
                        value={newAuthorForm.bio}
                        onChange={(e) => setNewAuthorForm({ ...newAuthorForm, bio: 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 text-xs"
                      />
                    </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">Famous Quote / Philosophical Saying</label>
                        <input
                          type="text"
                          placeholder='e.g. "Arise, awake, and stop not till the goal is reached."'
                          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-xs italic"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Author Portrait Artwork URL</label>
                        <input
                          type="url"
                          placeholder="/assets/uploads/books/cover.jpg"
                          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-xs"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                <div className="pt-4 flex items-center justify-end gap-3 border-t border-zinc-100 dark:border-zinc-800">
                  <button
                    type="button"
                    onClick={() => setActiveTab('authors')}
                    className="px-5 py-3 rounded-xl bg-zinc-100 dark:bg-zinc-800 font-bold text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-8 py-3.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold shadow-lg transition-colors cursor-pointer"
                  >
                    Publish Author Profile
                  </button>
                </div>
              </form>
            </div>
          )}

          {/* Module 8: Inventory Stock */}
          {activeTab === 'inventory' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-extrabold">Warehouse & Inventory Stock Control</h2>
                  <p className="text-xs text-zinc-500 mt-1">Real-time stock monitoring across Delhi, Varanasi, and Kolkata distribution depots</p>
                </div>
                <button
                  onClick={() => {
                    const qtyStr = prompt('Enter custom stock quantity to reorder for all titles (e.g. 20, 50, 100):', '20');
                    if (qtyStr !== null) {
                      const qty = parseInt(qtyStr, 10);
                      if (!isNaN(qty) && qty > 0) {
                        setBooksList((prev) => prev.map((b) => ({ ...b, stock: b.stock + qty })));
                        showToast(`Bulk restock +${qty} copies dispatched for all titles!`, 'success');
                      } else {
                        showToast('Invalid stock quantity entered', 'error');
                      }
                    }
                  }}
                  className="px-4 py-2.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-xs font-bold transition-colors shadow-md cursor-pointer flex items-center gap-1"
                >
                  <Package className="w-4 h-4" /> Bulk Reorder Custom Stock
                </button>
              </div>

              {/* Warehouse Stat Cards */}
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div className="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-800/40 border border-zinc-200 dark:border-zinc-700">
                  <span className="text-xs text-zinc-400 font-bold uppercase block">Total Warehouse Stock</span>
                  <span className="text-2xl font-extrabold block text-zinc-900 dark:text-zinc-100 mt-1">18,420 Copies</span>
                  <span className="text-[10px] text-zinc-500">Across 3 Central Depots</span>
                </div>

                <div className={`p-4 rounded-2xl border ${booksList.filter((b) => b.stock < 10).length > 0 ? 'bg-rose-50 dark:bg-rose-950/40 border-rose-200 dark:border-rose-800/60' : 'bg-emerald-50 dark:bg-emerald-950/40 border-emerald-200 dark:border-emerald-800/60'}`}>
                  <span className={`text-xs font-bold uppercase block ${booksList.filter((b) => b.stock < 10).length > 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400'}`}>Low Stock Alert</span>
                  <span className={`text-2xl font-extrabold block mt-1 ${booksList.filter((b) => b.stock < 10).length > 0 ? 'text-[#701a08]' : 'text-emerald-800 dark:text-emerald-200'}`}>
                    {booksList.filter((b) => b.stock < 10).length} Titles Below Safety
                  </span>
                  <span className={`text-[10px] ${booksList.filter((b) => b.stock < 10).length > 0 ? 'text-rose-500' : 'text-emerald-600 dark:text-emerald-400'}`}>
                    {booksList.filter((b) => b.stock < 10).length > 0 ? 'Requires Urgent Supplier Order' : 'All Stock Levels Optimal'}
                  </span>
                </div>

                <div className="p-4 rounded-2xl bg-blue-50 dark:bg-blue-950/40 border border-blue-200 dark:border-blue-800/60">
                  <span className="text-xs text-blue-600 dark:text-blue-400 font-bold uppercase block">Active Warehouses</span>
                  <span className="text-2xl font-extrabold block text-blue-700 dark:text-blue-300 mt-1">3 Depots Active</span>
                  <span className="text-[10px] text-blue-500">Delhi • Varanasi • Kolkata</span>
                </div>
              </div>

              {/* Inventory Table */}
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs">
                  <thead>
                    <tr className="border-b border-zinc-200 dark:border-zinc-800 text-zinc-400 uppercase font-bold">
                      <th className="pb-3">Book Title</th>
                      <th className="pb-3">ISBN Number</th>
                      <th className="pb-3">Depot Location</th>
                      <th className="pb-3">Stock Copies</th>
                      <th className="pb-3">Status</th>
                      <th className="pb-3 text-right">Quick Action</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800 font-medium">
                    {booksList
                      .filter(
                        (b) =>
                          b.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          b.author.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          b.isbn.toLowerCase().includes(searchQuery.toLowerCase())
                      )
                      .map((b, idx) => (
                        <tr key={b.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/40">
                          <td className="py-3">
                            <span className="font-bold text-zinc-900 dark:text-zinc-100 block max-w-xs truncate">{b.title}</span>
                            <span className="text-[10px] text-zinc-400 block">{b.author}</span>
                          </td>
                          <td className="py-3 font-mono text-[11px] text-zinc-400">{b.isbn}</td>
                          <td className="py-3 font-semibold text-zinc-600 dark:text-zinc-400">
                            {idx % 2 === 0 ? 'Delhi Central Warehouse' : 'Varanasi Depot'}
                          </td>
                          <td className="py-3">
                            <div className="flex items-center gap-2">
                              <span className={`font-extrabold ${b.stock < 10 ? 'text-red-500' : 'text-green-600'}`}>
                                {b.stock} units
                              </span>
                            </div>
                          </td>
                          <td className="py-3">
                            <span
                              className={`px-2 py-0.5 rounded text-[10px] font-extrabold ${
                                b.stock < 10 ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
                              }`}
                            >
                              {b.stock < 10 ? 'CRITICAL LOW' : 'HEALTHY STOCK'}
                            </span>
                          </td>
                          <td className="py-3 text-right space-x-1.5">
                            <button
                              onClick={() => handleRestockBook(b.id, 20)}
                              className="px-2 py-1 rounded-lg bg-rose-50 text-[#701a08] font-bold text-[10px] hover:bg-rose-100 cursor-pointer"
                            >
                              +20
                            </button>
                            <button
                              onClick={() => handleRestockBook(b.id, 50)}
                              className="px-2 py-1 rounded-lg bg-zinc-100 text-zinc-700 font-bold text-[10px] hover:bg-zinc-200 cursor-pointer"
                            >
                              +50
                            </button>
                            <button
                              onClick={() => {
                                const qtyStr = prompt(`Enter custom stock quantity to add for "${b.title}":`, '30');
                                if (qtyStr !== null) {
                                  const qty = parseInt(qtyStr, 10);
                                  if (!isNaN(qty) && qty > 0) {
                                    handleRestockBook(b.id, qty);
                                  } else {
                                    showToast('Invalid stock quantity entered', 'error');
                                  }
                                }
                              }}
                              className="px-2 py-1 rounded-lg bg-[#701a08] text-white font-bold text-[10px] hover:bg-[#581406] cursor-pointer"
                            >
                              + Custom
                            </button>
                          </td>
                        </tr>
                      ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* Module 9: Coupons */}
          {activeTab === 'coupons' && (
            <CouponManager />
          )}

          {/* Module 10: Editorial Blogs */}
          {activeTab === 'blogs' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-extrabold">Editorial Articles & Indology Blog</h2>
                  <p className="text-xs text-zinc-500 mt-1">Publish research articles, literary commentary & heritage news</p>
                </div>
                <button
                  onClick={() => setActiveTab('add-blog')}
                  className="px-4 py-2.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-xs font-bold transition-colors shadow-md cursor-pointer flex items-center gap-1"
                >
                  <Plus className="w-4 h-4" /> Write New Blog Post
                </button>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-medium">
                {blogsList
                  .filter(
                    (b) =>
                      b.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                      b.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
                      b.excerpt.toLowerCase().includes(searchQuery.toLowerCase())
                  )
                  .map((b) => (
                    <div key={b.id} className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 space-y-2 bg-zinc-50/50 dark:bg-zinc-800/30">
                      <div className="flex items-center justify-between">
                        <span className="px-2 py-0.5 bg-rose-50 text-[#701a08] font-extrabold text-[10px] rounded">{b.category}</span>
                        <span className="text-[10px] text-zinc-400 font-semibold">{b.author}</span>
                      </div>
                      <h4 className="font-extrabold text-sm text-zinc-900 dark:text-zinc-100">{b.title}</h4>
                      <p className="text-zinc-500 text-xs leading-relaxed">{b.excerpt}</p>
                      <div className="pt-2 border-t border-zinc-200/60 dark:border-zinc-700/60 flex items-center justify-between text-[10px] text-zinc-400">
                        <span>Published {b.date} • {b.readTime}</span>
                        <button
                          onClick={() => showToast(`Editing article "${b.title}"`, 'info')}
                          className="font-extrabold text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200"
                        >
                          Edit Article →
                        </button>
                      </div>
                    </div>
                  ))}
              </div>
            </div>
          )}

          {/* Module: Write New Editorial Blog Workspace Page */}
          {activeTab === 'add-blog' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-8 shadow-sm">
              <div className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-4">
                <div>
                  <h2 className="text-2xl font-extrabold flex items-center gap-2">
                    <BookOpen className="w-6 h-6 text-[#701a08]" /> Publish New Editorial Article & Blog
                  </h2>
                  <p className="text-xs text-zinc-500 mt-1">Compose Indology research paper, book review, or heritage commentary</p>
                </div>
                <button
                  onClick={() => setActiveTab('blogs')}
                  className="px-4 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 font-bold text-xs hover:bg-zinc-200 text-zinc-600 dark:text-zinc-300"
                >
                  ← Back to Blogs
                </button>
              </div>

              <form onSubmit={handleAddNewBlog} className="space-y-8 text-xs">
                {/* 1. Article Taxonomy */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    1. Article Title & Taxonomy
                  </span>

                  <div className="space-y-3">
                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Article Headline Title *</label>
                      <input
                        type="text"
                        required
                        placeholder="e.g. Unveiling Ancient Maritime Trade Routes of Kalinga and Chola Dynasties"
                        value={newBlogForm.title}
                        onChange={(e) => setNewBlogForm({ ...newBlogForm, 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 text-xs"
                      />
                    </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">Subject Category</label>
                        <select
                          value={newBlogForm.category}
                          onChange={(e) => setNewBlogForm({ ...newBlogForm, category: 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-xs"
                        >
                          <option value="Vedic Heritage">Vedic Heritage</option>
                          <option value="Sanskrit Studies">Sanskrit Studies</option>
                          <option value="Indology Research">Indology Research</option>
                          <option value="Indian Philosophy">Indian Philosophy</option>
                          <option value="Temple Architecture">Temple Architecture</option>
                        </select>
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Author Name / Scholar</label>
                        <input
                          type="text"
                          value={newBlogForm.author}
                          onChange={(e) => setNewBlogForm({ ...newBlogForm, 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 text-xs"
                        />
                      </div>

                      <div>
                        <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Estimated Reading Time</label>
                        <input
                          type="text"
                          value={newBlogForm.readTime}
                          onChange={(e) => setNewBlogForm({ ...newBlogForm, readTime: 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-xs"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                {/* 2. Excerpt & Media */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    2. Excerpt Summary & Cover Artwork
                  </span>

                  <div className="space-y-3">
                    <div>
                      <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Short Excerpt Summary *</label>
                      <textarea
                        rows={2}
                        required
                        placeholder="Write 1-2 sentence teaser summary for homepage cards..."
                        value={newBlogForm.excerpt}
                        onChange={(e) => setNewBlogForm({ ...newBlogForm, excerpt: 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 text-xs"
                      />
                    </div>
                  </div>
                </div>

                {/* 3. Full Body Content */}
                <div className="space-y-4">
                  <span className="font-extrabold text-xs text-[#701a08] uppercase tracking-wider block border-b border-zinc-100 dark:border-zinc-800 pb-2">
                    3. Full Article Body Content
                  </span>

                  <div>
                    <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Markdown / Article Body Content *</label>
                    <textarea
                      rows={6}
                      placeholder="Write complete article text, historical quotes, section headings, and reference citations..."
                      value={newBlogForm.content}
                      onChange={(e) => setNewBlogForm({ ...newBlogForm, content: 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-mono text-xs"
                    />
                  </div>
                </div>

                <div className="pt-4 flex items-center justify-end gap-3 border-t border-zinc-100 dark:border-zinc-800">
                  <button
                    type="button"
                    onClick={() => setActiveTab('blogs')}
                    className="px-5 py-3 rounded-xl bg-zinc-100 dark:bg-zinc-800 font-bold text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-8 py-3.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold shadow-lg transition-colors cursor-pointer"
                  >
                    Publish Editorial Post
                  </button>
                </div>
              </form>
            </div>
          )}

          {/* Module 11: Promotional Banners */}
          {activeTab === 'banners' && (
            <BannerManager />
          )}

          {/* Module 11.2: Festival Campaigns & Promos */}
          {activeTab === 'campaigns' && (
            <NewsletterManager />
          )}

          {/* Module 11.3: AI Predictive Business Analytics & Demand Forecast */}
          {activeTab === 'forecasts' && (
            <div className="space-y-8">
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
                <div className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-4">
                  <div>
                    <h2 className="text-2xl font-extrabold flex items-center gap-2">
                      <TrendingUp className="w-6 h-6 text-[#701a08]" /> AI Predictive Demand Forecasting & Stock Intelligence
                    </h2>
                    <p className="text-xs text-zinc-500 mt-1">
                      Smart replenishment recommendations, demand velocity tracking, and projected monthly sales curves.
                    </p>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-xs">
                  {/* Projected 30-Day Sales Card */}
                  <div className="p-5 rounded-2xl bg-gradient-to-tr from-amber-50 to-orange-50 dark:from-amber-950/20 dark:to-orange-950/20 border border-amber-200 dark:border-amber-900/40 space-y-3">
                    <span className="text-[10px] uppercase font-extrabold tracking-wider text-amber-700 dark:text-amber-400">Projected 30-Day Sales</span>
                    <h4 className="text-2xl font-black">₹6,84,000</h4>
                    <p className="text-zinc-500 text-[11px]">Expected increase of +14.2% driven by upcoming festival season demand.</p>
                  </div>

                  {/* High Demand Velocity categories */}
                  <div className="p-5 rounded-2xl bg-gradient-to-tr from-teal-50 to-emerald-50 dark:from-teal-950/20 dark:to-emerald-950/20 border border-teal-200 dark:border-teal-900/40 space-y-3">
                    <span className="text-[10px] uppercase font-extrabold tracking-wider text-teal-700 dark:text-teal-400">High Demand Velocity</span>
                    <ul className="space-y-1.5 font-bold">
                      <li className="flex justify-between"><span>1. Vedas & Upanishads</span> <span className="text-teal-600">High (1.8x)</span></li>
                      <li className="flex justify-between"><span>2. Ayurvedic Treatises</span> <span className="text-teal-600">Stable (1.2x)</span></li>
                      <li className="flex justify-between"><span>3. Classical Sanskrit</span> <span className="text-amber-600">Slow (0.9x)</span></li>
                    </ul>
                  </div>

                  {/* Inventory Replenishment Alert */}
                  <div className="p-5 rounded-2xl bg-gradient-to-tr from-rose-50 to-red-50 dark:from-rose-950/20 dark:to-red-950/20 border border-rose-200 dark:border-red-900/40 space-y-3">
                    <span className="text-[10px] uppercase font-extrabold tracking-wider text-rose-700 dark:text-rose-400">Restock Replenishment Notices</span>
                    <ul className="space-y-1 font-bold text-red-600 dark:text-red-400">
                      <li>• Upanishads Deluxe Set (Stock: 2)</li>
                      <li>• Bhagavad Gita Critical Set (Stock: 5)</li>
                      <li>• Charaka Samhita 4-Vol (Stock: 1)</li>
                    </ul>
                  </div>
                </div>

                {/* AI Scholarly Insights */}
                <div className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-950/30 space-y-3 text-xs">
                  <h4 className="font-extrabold text-zinc-900 dark:text-zinc-100 flex items-center gap-1.5">
                    <Sparkles className="w-4 h-4 text-amber-500" /> Saraswati AI Intelligence Insights
                  </h4>
                  <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed font-medium">
                    "Vedic literature demand has risen 22% globally over the last 90 days. We recommend increasing paperback stock limits for introductory Bhagavad Gita translation prints to 150 units ahead of the Diwali season to capture maximum conversion without capital locks."
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* Module 11.4: Payments & Refunds Management Panel */}
          {activeTab === 'payments-panel' && (
            <div className="space-y-8">
              {/* Payment Statistics Cards */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-zinc-100 dark:border-zinc-800 pb-5">
                  <div>
                    <h2 className="text-2xl font-extrabold flex items-center gap-2">
                      <CreditCard className="w-6 h-6 text-[#701a08]" /> Payment Gateway & Refund Management
                    </h2>
                    <p className="text-xs text-zinc-500 mt-1">
                      Monitor multi-gateway transaction logs, initiate refunds, verify signatures, and export invoices.
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => showToast('Exporting complete transaction log as CSV...', 'success')}
                      className="px-4 py-2 rounded-xl bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs font-bold shadow-sm"
                    >
                      Export CSV
                    </button>
                    <button
                      onClick={() => showToast('Refreshed payments log status live', 'success')}
                      className="p-2 rounded-xl bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300"
                    >
                      <RefreshCw className="w-4 h-4" />
                    </button>
                  </div>
                </div>

                {/* Filter and search bar */}
                <div className="flex flex-col sm:flex-row gap-3 text-xs font-semibold">
                  <input
                    type="text"
                    placeholder="Search by Payment ID, Order ID, or Email..."
                    className="flex-1 px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-850"
                  />
                  <select className="px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-850">
                    <option value="">All Gateways</option>
                    <option value="razorpay">Razorpay</option>
                    <option value="phonepe">PhonePe</option>
                    <option value="stripe">Stripe</option>
                    <option value="paypal">PayPal</option>
                    <option value="upi">UPI QR</option>
                  </select>
                  <select className="px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-850">
                    <option value="">All Statuses</option>
                    <option value="success">Success</option>
                    <option value="pending">Pending</option>
                    <option value="failed">Failed</option>
                    <option value="refunded">Refunded</option>
                  </select>
                </div>

                {/* Transaction list table */}
                <div className="overflow-x-auto">
                  <table className="w-full text-xs text-left border-collapse">
                    <thead>
                      <tr className="border-b border-zinc-200 dark:border-zinc-800 text-zinc-400 font-extrabold uppercase text-[10px]">
                        <th className="py-3 px-4">Transaction ID</th>
                        <th className="py-3 px-4">Order ID</th>
                        <th className="py-3 px-4">Gateway</th>
                        <th className="py-3 px-4">Amount</th>
                        <th className="py-3 px-4">Method</th>
                        <th className="py-3 px-4">Status</th>
                        <th className="py-3 px-4">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="font-bold divide-y divide-zinc-100 dark:divide-zinc-800">
                      {[
                        { id: 'pay_rzp_98412', orderId: 'IBW-98201', gateway: 'RAZORPAY', amount: '₹2,499.00', method: 'NET_BANKING', status: 'SUCCESS' },
                        { id: 'pay_ppe_82319', orderId: 'IBW-98202', gateway: 'PHONEPE', amount: '₹1,199.00', method: 'UPI_INTENT', status: 'SUCCESS' },
                        { id: 'pay_st_76212', orderId: 'IBW-98203', gateway: 'STRIPE', amount: '₹4,890.00', method: 'CREDIT_CARD', status: 'PENDING' },
                        { id: 'pay_upi_61902', orderId: 'IBW-98204', gateway: 'UPI', amount: '₹799.00', method: 'UPI_QR', status: 'FAILED' },
                      ].map((txn) => (
                        <tr key={txn.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/30">
                          <td className="py-3.5 px-4 font-mono text-zinc-500">{txn.id}</td>
                          <td className="py-3.5 px-4">{txn.orderId}</td>
                          <td className="py-3.5 px-4"><span className="px-2 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 text-[10px]">{txn.gateway}</span></td>
                          <td className="py-3.5 px-4 text-[#701a08] dark:text-amber-400">{txn.amount}</td>
                          <td className="py-3.5 px-4 text-zinc-400">{txn.method}</td>
                          <td className="py-3.5 px-4">
                            <span className={`px-2 py-0.5 rounded text-[10px] uppercase ${
                              txn.status === 'SUCCESS'
                                ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400'
                                : txn.status === 'PENDING'
                                  ? 'bg-amber-100 text-amber-800 dark:bg-amber-950/40 dark:text-amber-400'
                                  : 'bg-red-100 text-red-800 dark:bg-red-950/40 dark:text-red-400'
                            }`}>
                              {txn.status}
                            </span>
                          </td>
                          <td className="py-3.5 px-4 flex gap-2">
                            {txn.status === 'PENDING' && (
                              <button
                                onClick={() => showToast('Payment verified successfully!', 'success')}
                                className="px-2 py-1 rounded bg-[#701a08] hover:bg-[#581406] text-white text-[10px]"
                              >
                                Verify Status
                              </button>
                            )}
                            {txn.status === 'SUCCESS' && (
                              <button
                                onClick={() => showToast(`Refund of ${txn.amount} initiated successfully`, 'success')}
                                className="px-2 py-1 rounded border border-red-200 text-red-600 hover:bg-red-50 text-[10px]"
                              >
                                Refund
                              </button>
                            )}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Webhook Log Audit Trail */}
              <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-4 shadow-sm text-xs font-semibold">
                <h3 className="font-extrabold text-sm border-b border-zinc-100 dark:border-zinc-800 pb-2">
                  Unified Gateway Webhook logs
                </h3>

                <div className="space-y-3 font-mono">
                  <div className="p-3.5 rounded-xl bg-zinc-50 dark:bg-zinc-800/40 border border-zinc-200 dark:border-zinc-700 flex justify-between items-center text-[11px]">
                    <div className="flex items-center gap-3">
                      <span className="text-emerald-600 dark:text-emerald-400">PROCESSED</span>
                      <span className="text-zinc-400">STRIPE [payment_intent.succeeded]</span>
                    </div>
                    <span className="text-zinc-500">2026-08-12 04:31:00</span>
                  </div>

                  <div className="p-3.5 rounded-xl bg-zinc-50 dark:bg-zinc-800/40 border border-zinc-200 dark:border-zinc-700 flex justify-between items-center text-[11px]">
                    <div className="flex items-center gap-3">
                      <span className="text-emerald-600 dark:text-emerald-400">PROCESSED</span>
                      <span className="text-zinc-400">RAZORPAY [payment.captured]</span>
                    </div>
                    <span className="text-zinc-500">2026-08-12 04:22:15</span>
                  </div>

                  <div className="p-3.5 rounded-xl bg-zinc-50 dark:bg-zinc-800/40 border border-zinc-200 dark:border-zinc-700 flex justify-between items-center text-[11px]">
                    <div className="flex items-center gap-3">
                      <span className="text-amber-600 dark:text-amber-400">DUPLICATE</span>
                      <span className="text-zinc-400">PHONEPE [transaction.completed]</span>
                    </div>
                    <span className="text-zinc-500">2026-08-12 04:15:30</span>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Module 12: Ticket Inbox */}
          {activeTab === 'notifications' && (
            <TicketInboxManager />
          )}

          {/* Module 13: Export Reports */}
          {activeTab === 'reports' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-extrabold">Export Financial & Inventory Reports</h2>
                  <p className="text-xs text-zinc-500 mt-1">Download official CSV, PDF, and GST audit compliance statements</p>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-bold">
                <button
                  onClick={() => {
                    const csvContent = "Invoice Number,Date,Customer Name,GSTIN,Taxable Value,IGST,CGST,SGST,Total Value\nINV-2026-001,2026-08-01,Dr. Ramesh Sharma,27AAAAA1111A1Z1,2231.25,0.00,133.87,133.88,2499.00\nINV-2026-002,2026-08-07,Priya Sundaram,24BBBBB2222B2Z2,1070.54,107.05,0.00,0.00,1199.00\nINV-2026-003,2026-08-07,Vikramaditya Roy,,4366.07,0.00,261.96,261.97,4890.00\nINV-2026-004,2026-08-06,Ananya Mukherjee,19CCCCC3333C3Z3,713.39,0.00,42.80,42.81,799.00\nINV-2026-005,2026-08-05,Kabir Mehta,,2812.50,0.00,168.75,168.75,3150.00\n";
                    downloadReportFile('GSTR_1_Report_Aug_2026.csv', csvContent);
                    showToast('Generated and Downloaded GST Tax Return (GSTR-1) CSV', 'success');
                  }}
                  className="p-5 rounded-2xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 hover:border-[#701a08] text-left space-y-2 cursor-pointer transition-colors"
                >
                  <span className="text-[#701a08] font-extrabold block">GSTR-1 Sales Report</span>
                  <span className="text-[11px] text-zinc-500 block font-normal">Download monthly GST tax return file</span>
                </button>

                <button
                  onClick={() => {
                    const csvContent = "SKU,Product Name,Category,Quantity in Stock,Unit Price (INR),Total Value (INR)\nBK-COR-001,Corrosion Chemistry,Children Books,20,10599.00,211980.00\nBK-BIO-002,Kalinga Dynasty Chronicles,History,15,450.00,6750.00\nBK-SAN-003,Patanjali Yoga Sutras,Sanskrit,45,850.00,38250.00\nTOTAL VALUATION,,,,18420,15420350.00\n";
                    downloadReportFile('Stock_Valuation_Audit_Report.csv', csvContent);
                    showToast('Generated and Downloaded Warehouse Stock Audit CSV', 'success');
                  }}
                  className="p-5 rounded-2xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 hover:border-[#701a08] text-left space-y-2 cursor-pointer transition-colors"
                >
                  <span className="text-[#701a08] font-extrabold block">Stock Valuation Audit</span>
                  <span className="text-[11px] text-zinc-500 block font-normal">PDF breakdown of 18,420 catalog units</span>
                </button>

                <button
                  onClick={() => {
                    const csvContent = "Order ID,Transaction ID,Gateway,Amount (USD),Exchange Rate (INR),Total Value (INR),Remittance Reference\nTXN-PAYPAL-901,PAY-992381283,PayPal,120.50,83.25,10031.63,REF-INT-2026-901\nTXN-PAYPAL-902,PAY-812391039,PayPal,45.00,83.25,3746.25,REF-INT-2026-902\nTXN-STRIPE-903,ch_19a283b123,Stripe,210.00,83.30,17493.00,REF-INT-2026-903\n";
                    downloadReportFile('International_Export_Log.csv', csvContent);
                    showToast('Generated and Downloaded PayPal Export Audit CSV', 'success');
                  }}
                  className="p-5 rounded-2xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 hover:border-[#701a08] text-left space-y-2 cursor-pointer transition-colors"
                >
                  <span className="text-[#701a08] font-extrabold block">International Export Log</span>
                  <span className="text-[11px] text-zinc-500 block font-normal">Foreign currency remittance & customs CSV</span>
                </button>
              </div>
            </div>
          )}

          {/* Module 14: SEO Configuration */}
          {activeTab === 'seo' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-4">
                <div>
                  <h2 className="text-2xl font-extrabold">Global SEO & Structured Schema Settings</h2>
                  <p className="text-xs text-zinc-500 mt-1">Configure meta tags, OpenGraph previews, and Google Scholar JSON-LD schema</p>
                </div>
                <button
                  onClick={() => showToast('Saved SEO Configuration', 'success')}
                  className="px-5 py-2.5 rounded-xl bg-[#701a08] text-white text-xs font-bold shadow-md"
                >
                  Save SEO Parameters
                </button>
              </div>

              <div className="space-y-4 text-xs">
                <div>
                  <label className="font-extrabold text-zinc-700 dark:text-zinc-300 block mb-1">Global Meta Title</label>
                  <input
                    type="text"
                    defaultValue="Indian Books Worldwide | Standard Publishers (Bharat) Official Store"
                    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">Global Meta Description</label>
                  <textarea
                    rows={3}
                    defaultValue="Buy Indology, Vedic Literature, Agriculture, History & Regional Indian Books worldwide with fast delivery and official GST invoices."
                    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>
            </div>
          )}

          {/* Module 15: Store Settings */}
          {activeTab === 'settings' && (
            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-8 space-y-6 shadow-sm">
              <div className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-4">
                <div>
                  <h2 className="text-2xl font-extrabold">Enterprise Platform Settings</h2>
                  <p className="text-xs text-zinc-500 mt-1">Configure store parameters, currency conversion API, and payment gateways</p>
                </div>
                <button
                  onClick={() => showToast('Saved Store Settings', 'success')}
                  className="px-5 py-2.5 rounded-xl bg-[#701a08] text-white text-xs font-bold shadow-md"
                >
                  Save Store Settings
                </button>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                <div className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/40 space-y-2">
                  <span className="font-extrabold text-zinc-900 dark:text-zinc-100 block">Payment Gateways Active</span>
                  <p className="text-zinc-500 text-[11px]">Razorpay (UPI, Credit Cards, NetBanking) & PayPal (USD, GBP, EUR)</p>
                  <span className="px-2 py-0.5 bg-green-100 text-green-800 text-[10px] font-extrabold rounded">LIVE ONLINE</span>
                </div>

                <div className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/40 space-y-2">
                  <span className="font-extrabold text-zinc-900 dark:text-zinc-100 block">Live Currency Conversion Engine</span>
                  <p className="text-zinc-500 text-[11px]">Auto-formatting for INR (₹), USD ($), EUR (€), and GBP (£)</p>
                  <span className="px-2 py-0.5 bg-green-100 text-green-800 text-[10px] font-extrabold rounded">LIVE ONLINE</span>
                </div>
              </div>

              {/* Dynamic Payment Gateways configurations manager */}
              <div className="mt-8 pt-8 border-t border-zinc-200 dark:border-zinc-800">
                <PaymentGatewayConfigurator />
              </div>

              {/* Dynamic Shipping Providers configurations manager */}
              <div className="mt-8 pt-8 border-t border-zinc-200 dark:border-zinc-800">
                <ShippingProviderConfigurator />
              </div>
            </div>
          )}
        </main>
      </div>

    </div>
  );
}