import React, { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { api } from '../api/client';
import { NavigationHeader } from '../components/NavigationHeader';
import { ProductCard } from '../components/ProductCard';
import { ProductModal } from '../components/ProductModal';
import { ErrorBoundary } from '../components/ErrorBoundary';
import {
  PlusCircle, Upload, CheckCircle2, Database, Sparkles,
  RefreshCw, Search, FileSpreadsheet, Download, ShoppingBag,
  Store, LayoutGrid, Filter, ArrowRight
} from 'lucide-react';

const STORES_SAMPLE = [
  { store_id: 'STORE-A', store_name: 'Store-A - Gandhipuram', city: 'Coimbatore', tier: 'Premium' },
  { store_id: 'STORE-B', store_name: 'Store-B - RS Puram', city: 'Coimbatore', tier: 'Standard' },
  { store_id: 'STORE-C', store_name: 'Store-C - Peelamedu', city: 'Coimbatore', tier: 'Budget' },
  { store_id: 'STORE-D', store_name: 'Store-D - Podanur', city: 'Coimbatore', tier: 'Standard' },
  { store_id: 'STORE-E', store_name: 'Store-E - Ukkadam', city: 'Coimbatore', tier: 'Budget' },
];

// Replaced all 5.imimg.com (blocked by CORS) with high-quality Unsplash photography
const TITLE_KEYWORD_IMAGES = [
  // Dairy Specific Product Imagery
  { keywords: ['butter'], img: 'https://images.unsplash.com/photo-1589985270826-4b7bb135bc9d?w=500&q=80' },
  { keywords: ['cheese', 'slice', 'block'], img: 'https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?w=500&q=80' },
  { keywords: ['paneer', 'tofu'], img: 'https://images.unsplash.com/photo-1631452180519-c014fe946bc0?w=500&q=80' },
  { keywords: ['ghee', 'oil'], img: 'https://images.unsplash.com/photo-1628088062854-d1870b4553da?w=500&q=80' },
  { keywords: ['basundi', 'mithai', 'rabri', 'kheer', 'shrikhand', 'gulab'], img: 'https://images.unsplash.com/photo-1551024709-8f23befc6f87?w=500&q=80' },
  { keywords: ['milk', 'taaza', 'gold milk', 'toned'], img: 'https://images.unsplash.com/photo-1563636619-e9143da7973b?w=500&q=80' },
  { keywords: ['lassi', 'kool', 'buttermilk', 'masti', 'curd', 'dahi', 'yogurt'], img: 'https://images.unsplash.com/photo-1572490122747-3968b75bb69c?w=500&q=80' },
  { keywords: ['ice cream', 'frost', 'kulfi', 'sundae', 'cone'], img: 'https://images.unsplash.com/photo-1570197788417-0e82375c9371?w=500&q=80' },

  // Chocolates & Confectionery
  { keywords: ['bournvita', 'malt', 'cocoa powder'], img: 'https://images.unsplash.com/photo-1511920170033-f8396924c348?w=500&q=80' },
  { keywords: ['silk', 'dairy milk', 'chocolate', 'cocoa', 'dark chocolate', 'kitkat'], img: 'https://images.unsplash.com/photo-1549007994-cb92caebd54b?w=500&q=80' },

  // Dates & Health Foods
  { keywords: ['date powder', 'dates powder'], img: 'https://liondates.com/cdn/shop/files/4.datespowder_lifestyle.png?v=1773397173&width=1445' },
  { keywords: ['syrup', 'honey'], img: 'https://images.unsplash.com/photo-1587049352847-81a56d773c1c?w=500&q=80' },
  { keywords: ['date', 'dates'], img: 'https://liondates.com/cdn/shop/files/dates.png?v=1773397173&width=1000' },

  // Flours, Spices & Grains
  { keywords: ['maida', 'atta', 'flour', 'wheat', 'rava', 'soji'], img: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?w=500&q=80' },
  { keywords: ['salt'], img: 'https://images.unsplash.com/photo-1610832958506-aa56368176cf?w=500&q=80' },
  { keywords: ['dal', 'pulses', 'lentil', 'chana'], img: 'https://images.unsplash.com/photo-1515543237350-b3eea1ec8082?w=500&q=80' },

  // Noodles & Snacks
  { keywords: ['maggi', 'noodle', 'pasta'], img: 'https://images.unsplash.com/photo-1612927601601-6638404737ce?w=500&q=80' },
  { keywords: ['lays', 'chips', 'namkeen', 'snack', 'kurkure'], img: 'https://images.unsplash.com/photo-1566478989037-eec170784d0b?w=500&q=80' },
  { keywords: ['biscuit', 'cookie', 'rusk', 'oreo'], img: 'https://images.unsplash.com/photo-1558961363-fa8fdf82db35?w=500&q=80' },

  // Beverages
  { keywords: ['tea', 'chai'], img: 'https://images.unsplash.com/photo-1597481499750-3e6b22637e12?w=500&q=80' },
  { keywords: ['coffee', 'nescafe'], img: 'https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=500&q=80' },
  { keywords: ['coca', 'coke', 'pepsi', 'sprite', 'drink', 'beverage', 'juice'], img: 'https://images.unsplash.com/photo-1622483767028-3f66f32aef97?w=500&q=80' },
];

const BRAND_FALLBACK_IMAGES = {
  amul: 'https://images.unsplash.com/photo-1563636619-e9143da7973b?w=500&q=80',
  cadbury: 'https://images.unsplash.com/photo-1549007994-cb92caebd54b?w=500&q=80',
  lion: 'https://liondates.com/cdn/shop/files/4.datespowder_lifestyle.png?v=1773397173&width=1445',
  naga: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?w=500&q=80',
  nestle: 'https://images.unsplash.com/photo-1612927601601-6638404737ce?w=500&q=80',
  tata: 'https://images.unsplash.com/photo-1597481499750-3e6b22637e12?w=500&q=80',
  dabur: 'https://images.unsplash.com/photo-1587049352847-81a56d773c1c?w=500&q=80',
  godrej: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=500&q=80',
  pepsico: 'https://images.unsplash.com/photo-1566478989037-eec170784d0b?w=500&q=80',
  coca: 'https://images.unsplash.com/photo-1622483767028-3f66f32aef97?w=500&q=80',
};

const CATEGORY_FALLBACK_IMAGES = {
  dairy: 'https://images.unsplash.com/photo-1628088062854-d1870b4553da?w=500&q=80',
  chocolate: 'https://images.unsplash.com/photo-1549007994-cb92caebd54b?w=500&q=80',
  dessert: 'https://images.unsplash.com/photo-1551024709-8f23befc6f87?w=500&q=80',
  snack: 'https://images.unsplash.com/photo-1566478989037-eec170784d0b?w=500&q=80',
  beverage: 'https://images.unsplash.com/photo-1544145945-f90425340c7e?w=500&q=80',
  flour: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?w=500&q=80',
  health: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=500&q=80',
};

function resolveProductImageUrl(sp) {
  // If we have a valid external URL that isn't from imimg (since imimg blocks CORS), use it
  if (sp.image_url && typeof sp.image_url === 'string' && sp.image_url.trim() && sp.image_url.startsWith('http') && !sp.image_url.includes('imimg.com')) {
    return sp.image_url;
  }
  if (Array.isArray(sp.image_urls) && sp.image_urls.length > 0 && sp.image_urls[0] && sp.image_urls[0].startsWith('http') && !sp.image_urls[0].includes('imimg.com')) {
    return sp.image_urls[0];
  }

  // 1. Title Keyword Specific Matching (highest priority)
  const titleLower = String(sp.title || sp.product_name || '').toLowerCase();
  for (const item of TITLE_KEYWORD_IMAGES) {
    if (item.keywords.some((kw) => titleLower.includes(kw))) {
      return item.img;
    }
  }

  // 2. Brand Fallback Matching
  const brandLower = String(sp.brand || '').toLowerCase();
  for (const [bKey, img] of Object.entries(BRAND_FALLBACK_IMAGES)) {
    if (brandLower.includes(bKey)) return img;
  }

  // 3. Category Fallback Matching
  const catLower = String(sp.category || '').toLowerCase();
  for (const [cKey, img] of Object.entries(CATEGORY_FALLBACK_IMAGES)) {
    if (catLower.includes(cKey)) return img;
  }

  return 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=500&q=80';
}

export function UserPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  // Derived active tab directly from URL query param to eliminate state sync conflicts
  const activeTab = searchParams.get('tab') === 'cards' ? 'cards' : 'upload';

  const [entryMode, setEntryMode] = useState('single'); // 'single' or 'batch'

  // Single Form State
  const [brand, setBrand] = useState('Lion Dates');
  const [productName, setProductName] = useState('Lion Dates 450g');
  const [category, setCategory] = useState('Health Foods');
  const [priceRange, setPriceRange] = useState('₹160-220');
  const [finalPrice, setFinalPrice] = useState('185.00');
  const [barcode, setBarcode] = useState('20086040');
  const [hsnCode, setHsnCode] = useState('2008');
  const [description, setDescription] = useState('');
  const [imageUrl, setImageUrl] = useState('');

  const [submittingSingle, setSubmittingSingle] = useState(false);
  const [singleResult, setSingleResult] = useState(null);
  const [singleError, setSingleError] = useState('');

  // Batch Upload State
  const [batchFile, setBatchFile] = useState(null);
  const [uploadingBatch, setUploadingBatch] = useState(false);
  const [batchResult, setBatchResult] = useState(null);
  const [batchError, setBatchError] = useState('');

  // Catalog Inspection & Modal
  const [brandSearch, setBrandSearch] = useState('Lion Dates');
  const [brandProducts, setBrandProducts] = useState([]);
  const [loadingBrand, setLoadingBrand] = useState(false);
  const [selectedProduct, setSelectedProduct] = useState(null);

  // Cards Tab State (Store-A + Uploaded Cards)
  const [selectedStoreId, setSelectedStoreId] = useState('STORE-A');
  const [storeProductsRaw, setStoreProductsRaw] = useState([]);
  const [uploadedCards, setUploadedCards] = useState([]);
  const [loadingCards, setLoadingCards] = useState(false);
  const [selectedBrandFilter, setSelectedBrandFilter] = useState('All');
  const [cardSearchQuery, setCardSearchQuery] = useState('');

  // Pure tab switcher updating searchParams
  const switchTab = (tab) => {
    if (tab === 'cards') {
      setSearchParams({ tab: 'cards' });
    } else {
      setSearchParams({});
    }
  };

  // Fetch store products for Cards Tab with fail-safe array checking
  const fetchStoreProductsCards = async (storeId) => {
    setLoadingCards(true);
    try {
      const data = await api.getStoreProducts(storeId, { limit: 100 });
      const itemsList = Array.isArray(data)
        ? data
        : Array.isArray(data?.products)
        ? data.products
        : [];
      setStoreProductsRaw(itemsList);
    } catch (e) {
      console.warn('Failed to load store products for cards:', e);
      setStoreProductsRaw([]);
    } finally {
      setLoadingCards(false);
    }
  };

  useEffect(() => {
    fetchStoreProductsCards(selectedStoreId);
  }, [selectedStoreId]);

  const fetchBrandCatalog = async (bName) => {
    if (!bName) return;
    setLoadingBrand(true);
    try {
      const data = await api.getBrandProducts(bName, { limit: 50 });
      const itemsList = Array.isArray(data)
        ? data
        : Array.isArray(data?.products)
        ? data.products
        : [];
      setBrandProducts(itemsList);
    } catch (e) {
      console.warn('Failed to fetch brand products', e);
      setBrandProducts([]);
    } finally {
      setLoadingBrand(false);
    }
  };

  useEffect(() => {
    fetchBrandCatalog(brandSearch);
  }, [brandSearch]);

  const handlePresetLionDates = () => {
    setEntryMode('single');
    switchTab('upload');
    setBrand('Lion Dates');
    setProductName('Lion Dates 450g');
    setCategory('Health Foods');
    setPriceRange('₹160-220');
    setFinalPrice('185.00');
    setBarcode('20086040');
    setHsnCode('2008');
    setDescription('Premium quality Lion Dates 450g pack enriched with natural nutrients and vitamins.');
    setImageUrl('https://liondates.com/cdn/shop/files/4.datespowder_lifestyle.png?v=1773397173&width=1445');
  };

  const handleSingleSubmit = async (e) => {
    e.preventDefault();
    setSingleError('');
    setSingleResult(null);
    setSubmittingSingle(true);

    try {
      const payload = {
        brand,
        product_name: productName,
        category,
        price_range: priceRange,
        final_selling_price: finalPrice ? parseFloat(finalPrice) : null,
        barcode: barcode || null,
        hsn_code: hsnCode || null,
        description: description || undefined,
        image_url: imageUrl || undefined,
      };

      const data = await api.addUserProduct(payload);
      setSingleResult(data);
      setSubmittingSingle(false);

      // Add to uploaded cards
      if (data.product) {
        const newCard = {
          image_id: String(data.product.image_id || `user_${Date.now()}`),
          product_name: String(data.product.product_name || productName),
          brand: String(data.product.brand || brand),
          category: String(data.product.category || category),
          price_range: data.product.price_range || `₹${data.product.final_selling_price || 100}`,
          final_selling_price: data.product.final_selling_price,
          selling_price: data.product.final_selling_price,
          barcode: data.product.barcode ? String(data.product.barcode) : null,
          hsn_code: data.product.hsn_code ? String(data.product.hsn_code) : null,
          image_url: resolveProductImageUrl(data.product),
          image_urls: data.product.image_urls || (imageUrl ? [imageUrl] : []),
          nutrients: data.product.nutrients || [
            { name: 'Protein', amount: '8.5g' },
            { name: 'Calcium', amount: '120mg' },
            { name: 'Iron', amount: '3.2mg' },
          ],
          highlights: ['User Uploaded Entry', 'Dual Persistence: Synced DB & JSON'],
          providers: ['User Direct Entry', 'Store Inventory'],
          is_user_uploaded: true,
        };
        setUploadedCards((prev) => [newCard, ...prev]);
      }

      // Refresh catalog list for current brand
      setBrandSearch(brand);
      fetchBrandCatalog(brand);
    } catch (err) {
      setSubmittingSingle(false);
      setSingleError(err.message || 'An error occurred while adding the product.');
    }
  };

  const handleBatchSubmit = async (e) => {
    e.preventDefault();
    if (!batchFile) return;
    setBatchError('');
    setBatchResult(null);
    setUploadingBatch(true);

    try {
      const data = await api.uploadUserProductsFile(batchFile);
      setBatchResult(data);
      setUploadingBatch(false);

      if (data.added_products && Array.isArray(data.added_products)) {
        const newBatchCards = data.added_products.map((item, idx) => ({
          image_id: String(item.image_id || `batch_${Date.now()}_${idx}`),
          product_name: String(item.product_name || 'Batch Product'),
          brand: String(item.brand || 'User Brand'),
          category: String(item.category || 'Batch Upload'),
          price_range: item.price_range || `₹${item.final_selling_price || 100}`,
          final_selling_price: item.final_selling_price,
          selling_price: item.final_selling_price,
          barcode: item.barcode ? String(item.barcode) : null,
          hsn_code: item.hsn_code ? String(item.hsn_code) : null,
          image_url: resolveProductImageUrl(item),
          nutrients: [
            { name: 'Protein', amount: '7.5g' },
            { name: 'Calcium', amount: '110mg' },
          ],
          highlights: ['Batch CSV/Excel Upload', 'Dual Persistence: Synced DB & JSON'],
          providers: ['Batch File Upload', 'Store Inventory'],
          is_user_uploaded: true,
        }));
        setUploadedCards((prev) => [...newBatchCards, ...prev]);
      }
    } catch (err) {
      setUploadingBatch(false);
      setBatchError(err.message || 'Error uploading file.');
    }
  };

  const downloadSampleCSV = () => {
    const csvContent =
      'Brand Name,Product Name / Variant,Category,Price Range,Final Price (₹),Barcode (GTIN/EAN),HSN Code,Custom Image URL,Description\n' +
      'Lion Dates,Lion Dates 450g,Health Foods,₹160-220,185.00,20086040,2008,https://liondates.com/cdn/shop/files/4.datespowder_lifestyle.png?v=1773397173&width=1445,Premium Quality Lion Dates 450g\n' +
      'Naga,Naga Maida 2kg,Flour & Grains,₹90-110,98.00,8906012345001,1101,,High grade refined wheat flour maida\n';

    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'sample_product_batch_template.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  // Convert Store products into rich Card objects with 100% type-safe conversions and title-specific images
  const allCardProducts = React.useMemo(() => {
    const rawList = Array.isArray(storeProductsRaw) ? storeProductsRaw : [];

    const formattedStoreCards = rawList.map((sp) => {
      if (!sp || typeof sp !== 'object') return null;

      const brandName = String(sp.brand || 'Store Brand');
      const prodName = String(sp.title || sp.product_name || `${brandName} Product`);
      const isLionDates = brandName.toLowerCase().includes('lion');
      const rawImageId = sp.image_id ? String(sp.image_id) : '';

      // Use real image_url/image_urls from database (same as admin/home page)
      // Only fall back to Unsplash keyword matcher when API provides no image
      const realImageUrl = sp.image_url || (Array.isArray(sp.image_urls) && sp.image_urls.length > 0 ? sp.image_urls[0] : null);
      const displayImageUrl = realImageUrl || resolveProductImageUrl({ ...sp, product_name: prodName });

      return {
        image_id: rawImageId || `${brandName}_${prodName}`,
        product_name: prodName,
        brand: brandName,
        category: String(sp.category || 'Store Product'),
        price_range: `₹${Math.round((Number(sp.selling_price || sp.mrp || 100)) * 0.95)}-${Math.round((Number(sp.selling_price || sp.mrp || 100)) * 1.1)}`,
        final_selling_price: sp.selling_price || sp.mrp,
        selling_price: sp.selling_price || sp.mrp,
        barcode: isLionDates ? '20086045' : (rawImageId ? `8906${rawImageId.substring(0, 8)}` : null),
        hsn_code: isLionDates ? '2008' : (sp.category === 'Dairy' ? '0402' : '1905'),
        image_url: displayImageUrl,
        image_urls: Array.isArray(sp.image_urls) ? sp.image_urls : (realImageUrl ? [realImageUrl] : []),
        fssai_license: sp.fssai_license || null,
        nutrients: sp.nutrients || [
          { name: 'Protein', amount: '8.2g' },
          { name: 'Calcium', amount: '140mg' },
          { name: 'Vitamin D', amount: '3.0mcg' },
        ],
        highlights: [
          `Store-A Inventory: ${sp.available_stock || 50} units`,
          `Stock Status: ${sp.stock_status || 'In Stock'}`,
          `Gross Profit Margin: ${sp.gross_profit_pct || 20}%`
        ],
        providers: ['Store-A Gandhipuram', 'BigBasket', 'Flipkart'],
        is_user_uploaded: false,
      };
    }).filter(Boolean);

    return [...(uploadedCards || []), ...formattedStoreCards];
  }, [storeProductsRaw, uploadedCards]);

  // Filter Card products by Search & Brand safely
  const filteredCards = React.useMemo(() => {
    if (!Array.isArray(allCardProducts)) return [];
    return allCardProducts.filter((card) => {
      if (!card) return false;
      const cardBrand = String(card.brand || '');
      const matchesBrand =
        selectedBrandFilter === 'All' ||
        cardBrand.toLowerCase().includes(selectedBrandFilter.toLowerCase());

      const q = String(cardSearchQuery || '').toLowerCase().trim();
      const cardTitle = String(card.product_name || '').toLowerCase();
      const cardBarcode = card.barcode ? String(card.barcode) : '';
      const cardHsn = card.hsn_code ? String(card.hsn_code) : '';

      const matchesQuery =
        !q ||
        cardTitle.includes(q) ||
        cardBrand.toLowerCase().includes(q) ||
        cardBarcode.includes(q) ||
        cardHsn.includes(q);

      return matchesBrand && matchesQuery;
    });
  }, [allCardProducts, selectedBrandFilter, cardSearchQuery]);

  const uniqueBrandsList = React.useMemo(() => {
    const setB = new Set(['All']);
    if (Array.isArray(allCardProducts)) {
      allCardProducts.forEach((c) => {
        if (c && c.brand) setB.add(String(c.brand));
      });
    }
    return Array.from(setB);
  }, [allCardProducts]);

  return (
    <ErrorBoundary>
      <div className="min-h-screen bg-paper-100 font-sans text-ink-950">
        <NavigationHeader
          title="User Product Workspace"
          subtitle="Upload new product records & view store catalog product cards"
          icon={PlusCircle}
        />

        <main className="max-w-7xl mx-auto px-4 py-6 space-y-6">
          {/* Top View Selector Tabs: [ Add / Upload Records ] vs [ View Product Cards ] */}
          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 bg-slate-900 text-white rounded-2xl p-4 shadow-lg border border-slate-800">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/20 text-blue-400 border border-blue-500/30">
                <LayoutGrid className="h-5 w-5" />
              </div>
              <div>
                <h2 className="text-lg font-bold font-display">User Product Management</h2>
                <p className="text-xs text-slate-300">
                  Single/Batch Product Uploads with Dual Persistence & Store Product Cards
                </p>
              </div>
            </div>

            <div className="flex items-center gap-2 bg-slate-950 p-1.5 rounded-xl border border-slate-800">
              <button
                type="button"
                onClick={() => switchTab('upload')}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all cursor-pointer ${
                  activeTab === 'upload'
                    ? 'bg-blue-600 text-white shadow-md'
                    : 'text-slate-400 hover:text-white hover:bg-slate-800/60'
                }`}
              >
                <PlusCircle className="h-4 w-4" /> ➕ Add / Upload Records
              </button>

              <button
                type="button"
                onClick={() => switchTab('cards')}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all cursor-pointer ${
                  activeTab === 'cards'
                    ? 'bg-amber-500 text-slate-950 shadow-md font-bold'
                    : 'text-slate-400 hover:text-white hover:bg-slate-800/60'
                }`}
              >
                <ShoppingBag className="h-4 w-4" /> 🎴 Product Catalog Cards ({allCardProducts.length})
              </button>
            </div>
          </div>

          {/* ========================================================================= */}
          {/* VIEW 1: PRODUCT ENTRY & BATCH UPLOAD */}
          {/* ========================================================================= */}
          {activeTab === 'upload' && (
            <div className="space-y-6">
              <div className="rounded-2xl border border-blue-500/20 bg-gradient-to-r from-blue-950 to-slate-900 text-white p-6 shadow-md flex flex-wrap items-center justify-between gap-4">
                <div>
                  <span className="inline-flex items-center gap-1 rounded-full bg-blue-500/20 px-3 py-1 text-xs font-bold text-blue-300 border border-blue-400/30 mb-2">
                    <Database className="h-3.5 w-3.5" /> Database & Seed JSON Auto-Sync
                  </span>
                  <h3 className="text-xl font-bold font-display">Upload & Add New Product Records</h3>
                  <p className="text-sm text-blue-200 mt-1 max-w-2xl">
                    Add new product variants (e.g. <strong>"Lion Dates 450g"</strong>) via single form or batch CSV/Excel upload. Product details & images sync directly into PostgreSQL database tables and JSON seed catalog files.
                  </p>
                </div>

                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={downloadSampleCSV}
                    className="flex items-center gap-1.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/20 text-white font-semibold px-3.5 py-2 text-xs transition cursor-pointer"
                  >
                    <Download className="h-3.5 w-3.5" /> Download Sample CSV
                  </button>

                  <button
                    type="button"
                    onClick={handlePresetLionDates}
                    className="flex items-center gap-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold px-4 py-2 text-xs shadow-md transition active:scale-95 cursor-pointer"
                  >
                    <Sparkles className="h-4 w-4" /> Preset: Add Lion Dates 450g
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                {/* Left Form: Single vs Batch Upload Tabs */}
                <div className="lg:col-span-7 rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-sm">
                  <div className="flex items-center justify-between border-b border-ink-900/10 pb-4 mb-6">
                    <div className="flex items-center gap-2 p-1 rounded-xl bg-slate-200/80">
                      <button
                        type="button"
                        onClick={() => setEntryMode('single')}
                        className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer ${
                          entryMode === 'single'
                            ? 'bg-blue-600 text-white shadow-xs'
                            : 'text-slate-600 hover:text-ink-950'
                        }`}
                      >
                        <PlusCircle className="h-4 w-4" /> Single Entry Form
                      </button>

                      <button
                        type="button"
                        onClick={() => setEntryMode('batch')}
                        className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-xs font-bold transition cursor-pointer ${
                          entryMode === 'batch'
                            ? 'bg-blue-600 text-white shadow-xs'
                            : 'text-slate-600 hover:text-ink-950'
                        }`}
                      >
                        <FileSpreadsheet className="h-4 w-4" /> Batch CSV / Excel Upload
                      </button>
                    </div>

                    <span className="text-[11px] font-semibold text-slate-500 bg-slate-100 px-2.5 py-1 rounded-full">
                      Auto-Enrich & Dual Persistence
                    </span>
                  </div>

                  {/* SINGLE PRODUCT FORM */}
                  {entryMode === 'single' && (
                    <div>
                      {singleError && (
                        <div className="mb-4 rounded-xl bg-rose-500/10 border border-rose-500/30 p-3.5 text-xs text-rose-700">
                          {singleError}
                        </div>
                      )}

                      <form onSubmit={handleSingleSubmit} className="space-y-4">
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                          <div>
                            <label className="block text-xs font-semibold text-ink-800 mb-1">Brand Name *</label>
                            <input
                              type="text"
                              required
                              value={brand}
                              onChange={(e) => setBrand(e.target.value)}
                              placeholder="e.g. Lion Dates"
                              className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                            />
                          </div>

                          <div>
                            <label className="block text-xs font-semibold text-ink-800 mb-1">Product Name / Variant *</label>
                            <input
                              type="text"
                              required
                              value={productName}
                              onChange={(e) => setProductName(e.target.value)}
                              placeholder="e.g. Lion Dates 450g"
                              className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                            />
                          </div>
                        </div>

                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                          <div>
                            <label className="block text-xs font-semibold text-ink-800 mb-1">Category</label>
                            <input
                              type="text"
                              value={category}
                              onChange={(e) => setCategory(e.target.value)}
                              placeholder="e.g. Health Foods"
                              className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                            />
                          </div>

                          <div>
                            <label className="block text-xs font-semibold text-ink-800 mb-1">Price Range</label>
                            <input
                              type="text"
                              value={priceRange}
                              onChange={(e) => setPriceRange(e.target.value)}
                              placeholder="e.g. ₹160-220"
                              className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                            />
                          </div>

                          <div>
                            <label className="block text-xs font-semibold text-ink-800 mb-1">Final Price (₹)</label>
                            <input
                              type="number"
                              step="0.01"
                              value={finalPrice}
                              onChange={(e) => setFinalPrice(e.target.value)}
                              placeholder="e.g. 185.00"
                              className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                            />
                          </div>
                        </div>

                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                          <div>
                            <label className="block text-xs font-semibold text-ink-800 mb-1">Barcode (GTIN/EAN)</label>
                            <input
                              type="text"
                              value={barcode}
                              onChange={(e) => setBarcode(e.target.value)}
                              placeholder="e.g. 20086040"
                              className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                            />
                          </div>

                          <div>
                            <label className="block text-xs font-semibold text-ink-800 mb-1">HSN Code</label>
                            <input
                              type="text"
                              value={hsnCode}
                              onChange={(e) => setHsnCode(e.target.value)}
                              placeholder="e.g. 2008"
                              className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                            />
                          </div>
                        </div>

                        <div>
                          <label className="block text-xs font-semibold text-ink-800 mb-1">Custom Image URL (Optional)</label>
                          <input
                            type="url"
                            value={imageUrl}
                            onChange={(e) => setImageUrl(e.target.value)}
                            placeholder="https://..."
                            className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                          />
                        </div>

                        <div>
                          <label className="block text-xs font-semibold text-ink-800 mb-1">Description (Optional)</label>
                          <textarea
                            rows={3}
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            placeholder="Enter detailed description or leave empty for AI auto-description..."
                            className="w-full rounded-xl border border-ink-900/15 bg-white p-2.5 text-xs font-medium text-ink-950 focus:border-blue-500 focus:outline-none"
                          />
                        </div>

                        <button
                          type="submit"
                          disabled={submittingSingle}
                          className="w-full flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-3 text-xs font-bold shadow-md transition active:scale-98 disabled:opacity-50 cursor-pointer"
                        >
                          {submittingSingle ? <RefreshCw className="h-4 w-4 animate-spin" /> : <PlusCircle className="h-4 w-4" />}
                          {submittingSingle ? 'Syncing to Database & JSON Catalog...' : 'Save Record to DB Table & JSON File'}
                        </button>
                      </form>
                    </div>
                  )}

                  {/* BATCH CSV/EXCEL UPLOAD */}
                  {entryMode === 'batch' && (
                    <div>
                      {batchError && (
                        <div className="mb-4 rounded-xl bg-rose-500/10 border border-rose-500/30 p-3.5 text-xs text-rose-700">
                          {batchError}
                        </div>
                      )}

                      <form onSubmit={handleBatchSubmit} className="space-y-4">
                        <div className="border-2 border-dashed border-blue-500/30 rounded-2xl bg-blue-50/50 p-6 text-center hover:bg-blue-50 transition">
                          <FileSpreadsheet className="h-10 w-10 text-blue-600 mx-auto mb-2" />
                          <h4 className="font-bold text-sm text-ink-950">Upload Product Spreadsheet (.csv, .xlsx, .xls)</h4>
                          <p className="text-xs text-slate-500 mt-1 mb-4">
                            Supports multiple rows containing Brand Name, Product Name, Category, Price, Barcode, HSN Code.
                          </p>

                          <input
                            type="file"
                            accept=".csv, .xlsx, .xls"
                            onChange={(e) => setBatchFile(e.target.files?.[0] || null)}
                            className="hidden"
                            id="batch-file-input"
                          />
                          <label
                            htmlFor="batch-file-input"
                            className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs cursor-pointer shadow-sm transition"
                          >
                            <Upload className="h-4 w-4" /> Select CSV or Excel File
                          </label>

                          {batchFile && (
                            <div className="mt-4 p-3 rounded-xl bg-white border border-blue-200 inline-flex items-center gap-2 text-xs font-bold text-ink-950">
                              <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                              {batchFile.name} ({(batchFile.size / 1024).toFixed(1)} KB)
                            </div>
                          )}
                        </div>

                        <button
                          type="submit"
                          disabled={!batchFile || uploadingBatch}
                          className="w-full flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-3 text-xs font-bold shadow-md transition active:scale-98 disabled:opacity-50 cursor-pointer"
                        >
                          {uploadingBatch ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
                          {uploadingBatch ? 'Processing & Enriching Batch Products...' : 'Upload & Sync Batch Records'}
                        </button>
                      </form>
                    </div>
                  )}
                </div>

                {/* Right Panel: Results & Quick Brand Inspection */}
                <div className="lg:col-span-5 space-y-6">
                  {singleResult && (
                    <div className="rounded-2xl border border-emerald-500/30 bg-emerald-50/70 p-6 shadow-sm space-y-3">
                      <div className="flex items-center gap-2 text-emerald-700">
                        <CheckCircle2 className="h-5 w-5" />
                        <h4 className="font-bold text-sm">Product Record Created & Synced</h4>
                      </div>
                      <p className="text-xs text-slate-700">{singleResult.message}</p>
                      <div className="p-3 rounded-xl bg-white border border-emerald-200 text-xs space-y-1">
                        <p className="font-bold text-ink-950">{singleResult.product.product_name}</p>
                        <p className="text-[11px] text-slate-500 font-mono">Brand: {singleResult.product.brand}</p>
                        {singleResult.product.barcode && (
                          <p className="text-[11px] text-slate-600 font-mono">Barcode: {singleResult.product.barcode}</p>
                        )}
                      </div>

                      <button
                        type="button"
                        onClick={() => switchTab('cards')}
                        className="w-full flex items-center justify-center gap-2 py-2 px-3 rounded-xl bg-emerald-600 text-white font-bold text-xs shadow-sm hover:bg-emerald-700 transition cursor-pointer"
                      >
                        <ShoppingBag className="h-4 w-4" /> View as Product Card <ArrowRight className="h-3.5 w-3.5" />
                      </button>
                    </div>
                  )}

                  {batchResult && (
                    <div className="rounded-2xl border border-emerald-500/30 bg-emerald-50/70 p-6 shadow-sm space-y-3">
                      <div className="flex items-center gap-2 text-emerald-700">
                        <CheckCircle2 className="h-5 w-5" />
                        <h4 className="font-bold text-sm">Batch Products Processed</h4>
                      </div>
                      <p className="text-xs text-slate-700">{batchResult.message}</p>

                      <button
                        type="button"
                        onClick={() => switchTab('cards')}
                        className="w-full flex items-center justify-center gap-2 py-2 px-3 rounded-xl bg-emerald-600 text-white font-bold text-xs shadow-sm hover:bg-emerald-700 transition cursor-pointer"
                      >
                        <ShoppingBag className="h-4 w-4" /> View Batch Items as Product Cards <ArrowRight className="h-3.5 w-3.5" />
                      </button>
                    </div>
                  )}

                  {!singleResult && !batchResult && (
                    <div className="rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-sm text-center">
                      <Database className="h-10 w-10 text-blue-500 mx-auto mb-3" />
                      <h4 className="font-bold text-sm text-ink-950">Dual Storage Persistence</h4>
                      <p className="text-xs text-slate-500 mt-1">
                        Every product submitted (single or batch CSV/Excel) is automatically parsed, assigned high-resolution images, and synced into PostgreSQL brand tables and JSON catalog seed files.
                      </p>
                    </div>
                  )}

                  {/* Quick Brand Catalog Search */}
                  <div className="rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-sm space-y-4">
                    <div className="flex items-center justify-between">
                      <h4 className="font-bold text-sm text-ink-950 flex items-center gap-2">
                        <Search className="h-4 w-4 text-amber-500" /> Inspect Brand Products
                      </h4>
                      <span className="text-[11px] font-mono text-slate-400">{brandProducts.length} items</span>
                    </div>

                    <div className="flex gap-2">
                      <input
                        type="text"
                        value={brandSearch}
                        onChange={(e) => setBrandSearch(e.target.value)}
                        placeholder="Enter brand to inspect (e.g. Lion Dates)"
                        className="flex-1 rounded-xl border border-ink-900/15 bg-white p-2 text-xs font-medium text-ink-950 focus:outline-none"
                      />
                      <button
                        type="button"
                        onClick={() => fetchBrandCatalog(brandSearch)}
                        className="px-3 py-1.5 bg-ink-900 text-white text-xs font-semibold rounded-xl hover:bg-ink-950 cursor-pointer"
                      >
                        Fetch
                      </button>
                    </div>

                    {loadingBrand ? (
                      <div className="text-center py-4 text-xs text-slate-400">Loading catalog items...</div>
                    ) : (
                      <div className="max-h-64 overflow-y-auto space-y-2 pr-1 no-scrollbar">
                        {brandProducts.map((p, idx) => (
                          <div
                            key={idx}
                            onClick={() => setSelectedProduct(p)}
                            className="cursor-pointer flex items-center justify-between gap-2 p-2.5 rounded-xl border border-slate-200 bg-white hover:border-amber-500/60 transition shadow-xs"
                          >
                            <div className="flex items-center gap-2.5 overflow-hidden">
                              {p.image_url ? (
                                <img src={p.image_url} alt="" className="h-9 w-9 object-contain bg-slate-50 rounded" />
                              ) : (
                                <div className="h-9 w-9 rounded bg-slate-100 flex items-center justify-center text-[10px] text-slate-400">No img</div>
                              )}
                              <div className="truncate">
                                <p className="text-xs font-bold text-ink-950 truncate">{p.product_name}</p>
                                <p className="text-[10px] text-slate-400 font-mono">
                                  {p.barcode ? `Barcode: ${p.barcode}` : p.product_sku ? `SKU: ${p.product_sku}` : 'Standard Record'}
                                </p>
                              </div>
                            </div>
                            {p.final_selling_price && (
                              <span className="font-mono text-xs font-bold text-leaf-600 shrink-0">₹{p.final_selling_price}</span>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* ========================================================================= */}
          {/* VIEW 2: PRODUCT CATALOG CARDS (STORE-A & USER UPLOADED CARDS) */}
          {/* ========================================================================= */}
          {activeTab === 'cards' && (
            <div className="space-y-6">
              {/* Header Toolbar */}
              <div className="rounded-2xl border border-ink-900/10 bg-paper-50 p-6 shadow-sm space-y-4">
                <div className="flex flex-wrap items-center justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-bold text-ink-950 flex items-center gap-2">
                      <ShoppingBag className="h-5 w-5 text-amber-500" /> User Product Catalog Cards
                    </h3>
                    <p className="text-xs text-slate-500 mt-0.5">
                      Displaying sample store records (e.g. <strong>Store-A Gandhipuram</strong>) alongside your uploaded product records as rich cards.
                    </p>
                  </div>

                  {/* Store Selector Dropdown */}
                  <div className="flex items-center gap-2 bg-slate-100 p-1.5 rounded-xl border border-slate-200">
                    <Store className="h-4 w-4 text-emerald-600 ml-2" />
                    <span className="text-xs font-bold text-slate-700">Sample Store:</span>
                    <select
                      value={selectedStoreId}
                      onChange={(e) => setSelectedStoreId(e.target.value)}
                      className="bg-white border border-slate-300 rounded-lg px-3 py-1 text-xs font-bold text-slate-800 focus:outline-none"
                    >
                      {STORES_SAMPLE.map((s) => (
                        <option key={s.store_id} value={s.store_id}>
                          {s.store_name} ({s.tier})
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                {/* Filter & Search Bar */}
                <div className="flex flex-wrap items-center justify-between gap-4 border-t border-ink-900/10 pt-4">
                  {/* Brand Filter Pills */}
                  <div className="flex items-center gap-1.5 overflow-x-auto max-w-full pb-1 no-scrollbar">
                    <span className="text-xs font-semibold text-slate-500 flex items-center gap-1 mr-1">
                      <Filter className="h-3.5 w-3.5" /> Brands:
                    </span>
                    {uniqueBrandsList.slice(0, 8).map((b) => (
                      <button
                        type="button"
                        key={b}
                        onClick={() => setSelectedBrandFilter(b)}
                        className={`px-3 py-1 rounded-full text-xs font-bold transition-all cursor-pointer ${
                          selectedBrandFilter === b
                            ? 'bg-ink-950 text-white shadow-xs scale-105'
                            : 'bg-slate-200/70 text-slate-700 hover:bg-slate-300'
                        }`}
                      >
                        {b}
                      </button>
                    ))}
                  </div>

                  {/* Search Bar */}
                  <div className="relative min-w-[240px]">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-400" />
                    <input
                      type="text"
                      value={cardSearchQuery}
                      onChange={(e) => setCardSearchQuery(e.target.value)}
                      placeholder="Search by product, brand or barcode..."
                      className="w-full rounded-xl border border-slate-300 bg-white py-1.5 pl-8 pr-3 text-xs text-ink-950 placeholder-slate-400 focus:outline-none focus:border-amber-500"
                    />
                  </div>
                </div>
              </div>

              {/* Product Cards Grid */}
              {loadingCards ? (
                <div className="text-center py-16 text-slate-400 text-sm font-medium flex items-center justify-center gap-2">
                  <RefreshCw className="h-5 w-5 animate-spin text-amber-500" /> Loading store and uploaded product cards...
                </div>
              ) : filteredCards.length === 0 ? (
                <div className="text-center py-16 rounded-2xl border border-dashed border-slate-300 bg-paper-50 p-8">
                  <ShoppingBag className="h-12 w-12 text-slate-300 mx-auto mb-2" />
                  <p className="text-sm font-bold text-slate-700">No product cards match your filter</p>
                  <p className="text-xs text-slate-400 mt-1">Try resetting the brand filter or search term</p>
                  <button
                    type="button"
                    onClick={() => { setSelectedBrandFilter('All'); setCardSearchQuery(''); }}
                    className="mt-3 px-4 py-1.5 rounded-xl bg-slate-900 text-white text-xs font-bold cursor-pointer"
                  >
                    Reset Filters
                  </button>
                </div>
              ) : (
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <span className="text-xs font-bold text-slate-500 font-mono">
                      Showing {filteredCards.length} product cards ({selectedStoreId} + Uploads)
                    </span>
                    {uploadedCards.length > 0 && (
                      <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-700 border border-emerald-500/30 text-xs font-bold">
                        <Sparkles className="h-3 w-3" /> {uploadedCards.length} Newly Uploaded Items Added
                      </span>
                    )}
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    {filteredCards.map((prod, idx) => (
                      <div key={prod.image_id || idx} className="relative group">
                        {prod.is_user_uploaded && (
                          <div className="absolute top-2 left-2 z-10 bg-emerald-600 text-white font-extrabold text-[10px] px-2 py-0.5 rounded-full shadow-md">
                            NEWLY UPLOADED
                          </div>
                        )}
                        <ProductCard product={prod} onClick={() => setSelectedProduct(prod)} />
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}
        </main>

        {/* Interactive Product Details Modal */}
        {selectedProduct && (
          <ProductModal product={selectedProduct} onClose={() => setSelectedProduct(null)} />
        )}
      </div>
    </ErrorBoundary>
  );
}