/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * Inventory & Catalogue — the store user's page.
 *
 * Product-management flow (3 tiers):
 *   1. Admin adds products to the GLOBAL catalogue and selects which ones (+ qty)
 *      to publish — that's the shared "store catalogue" (services/storeCatalogue).
 *   2. The user sees ONLY that admin-curated catalogue here (never the global one)
 *      and chooses which products they need, each with their own quantity.
 *   3. Those picks are the user's request for their store.
 *
 * The catalogue source is the shared store catalogue (localStorage bridge for now;
 * backend: GET /products/getlocationproducts). The user's picks persist per store
 * and `commitSelectionToStore()` is the single backend integration point
 * (POST /products/createproductlocation / a stock-request endpoint).
 */

import React, { useEffect, useMemo, useState } from 'react';
import { Search, Boxes, Layers, Plus, Minus, Check, CheckCircle2, X, Store, PackageSearch } from 'lucide-react';
import { useFiestaStockStatement, FIESTA_TENANT_ID } from '../services/fiestaQueries';
import { num as fnum, str as fstr, type Row } from '../services/fiestaApi';
import { categoryName } from '../services/fiestaMappers';
import { useStoreCatalogue } from '../services/storeCatalogue';
import AwaitingApi from './AwaitingApi';

const PLACEHOLDER = 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&q=80&w=200';

interface StoreCatalogViewProps {
  locationid?: number;
  storeName?: string;
  tenantId?: number;
}

function stockStatus(closing: number): { label: string; color: string } {
  if (closing <= 0) return { label: 'Out of stock', color: '#ef4444' };
  if (closing < 25) return { label: 'Critical', color: '#ef4444' };
  if (closing < 120) return { label: 'Low', color: '#f59e0b' };
  return { label: 'Healthy', color: '#10b981' };
}

/** Category → pill badge classes (mirrors the admin Global Catalogue card). */
function catBadgeClass(category: string): string {
  const c = category.toLowerCase();
  if (c.startsWith('staple')) return 'bg-amber-50 text-amber-600 border border-amber-100';
  if (c.includes('grocer')) return 'bg-emerald-50 text-emerald-600 border border-emerald-100';
  if (c.includes('beverage')) return 'bg-sky-50 text-sky-600 border border-sky-100';
  return 'bg-rose-50 text-rose-600 border border-rose-100';
}

export default function StoreCatalogView({ locationid, storeName = 'your store', tenantId = FIESTA_TENANT_ID }: StoreCatalogViewProps) {
  const tenantid = tenantId;
  const [view, setView] = useState<'catalogue' | 'inventory'>('catalogue');
  const [search, setSearch] = useState('');
  const [category, setCategory] = useState('ALL');
  const [notice, setNotice] = useState(false);

  // The admin-curated catalogue (what the user is allowed to pick from).
  const storeCat = useStoreCatalogue();
  const products = useMemo(
    () =>
      storeCat.items.map((it) => ({
        id: it.productid,
        name: it.name,
        sku: it.sku || `SKU-${it.productid}`,
        image: it.image || PLACEHOLDER,
        category: it.category || 'General',
        price: it.price,
        unit: it.unit,
        adminQty: it.qty,
      })),
    [storeCat.items],
  );

  // The user's picks: productid → quantity they need. Persisted per store.
  const storageKey = `nearledaily.catalogue.request.${locationid ?? 'na'}`;
  const [picks, setPicks] = useState<Record<string, number>>(() => {
    try {
      const raw = localStorage.getItem(storageKey);
      return raw ? (JSON.parse(raw) as Record<string, number>) : {};
    } catch {
      return {};
    }
  });
  useEffect(() => {
    try { localStorage.setItem(storageKey, JSON.stringify(picks)); } catch { /* ignore */ }
  }, [picks, storageKey]);

  const togglePick = (id: string) => {
    setNotice(false);
    setPicks((prev) => {
      const next = { ...prev };
      if (next[id] != null) delete next[id];
      else next[id] = 1;
      return next;
    });
  };
  const setPickQty = (id: string, qty: number) => setPicks((prev) => ({ ...prev, [id]: Math.max(1, Math.round(qty) || 1) }));
  const pickCount = Object.keys(picks).length;

  // Store inventory (live stock) for the "My Store Inventory" tab + "In Store" tags.
  const stockQ = useFiestaStockStatement({ tenantid, locationid: locationid ?? 0, pagesize: 200 });
  const inStore = useMemo(() => new Set((stockQ.data ?? []).map((r) => fstr(r.productid))), [stockQ.data]);
  const inventory = useMemo(
    () =>
      (stockQ.data ?? []).map((r: Row) => {
        const closing = fnum(r.closing);
        return {
          id: fstr(r.productid),
          name: fstr(r.productname) || 'Unnamed product',
          sku: fstr(r.sku) || `SKU-${fstr(r.productid)}`,
          image: fstr(r.productimage) || PLACEHOLDER,
          category: categoryName(fnum(r.categoryid)),
          closing,
          ...stockStatus(closing),
        };
      }),
    [stockQ.data],
  );
  const filteredInventory = useMemo(() => {
    const term = search.toLowerCase();
    if (!term) return inventory;
    return inventory.filter((it) => it.name.toLowerCase().includes(term) || it.category.toLowerCase().includes(term) || it.id.toLowerCase().includes(term));
  }, [inventory, search]);

  const categories = useMemo(() => [...new Set(products.map((p) => p.category))].sort(), [products]);
  const filtered = useMemo(() => {
    const term = search.toLowerCase();
    return products.filter((p) => {
      if (category !== 'ALL' && p.category !== category) return false;
      if (!term) return true;
      return p.name.toLowerCase().includes(term) || p.category.toLowerCase().includes(term) || p.id.toLowerCase().includes(term);
    });
  }, [products, search, category]);

  // ── Integration point ──────────────────────────────────────────────────────────
  // Replace with the real request/stock POST (selected productids + quantities),
  // then invalidate stockQ.
  const commitSelectionToStore = () => setNotice(true);

  return (
    <div className="space-y-lg animate-in fade-in duration-300 font-sans pb-28">
      {/* Header */}
      <div>
        <h1 className="font-sans font-bold text-2xl tracking-tight text-[#0f172a]">Product Catalogue</h1>
        <p className="text-zinc-500 text-xs mt-1">
          Products your admin published for <span className="font-semibold text-[#581c87]">{storeName}</span> — choose what you need and set quantities.
        </p>
      </div>

      {/* Tabs */}
      <div className="flex items-center gap-1 bg-zinc-100/80 p-1 rounded-xl border border-zinc-200/60 w-full sm:w-auto sm:inline-flex">
        <button
          onClick={() => setView('catalogue')}
          className={`flex-1 sm:flex-none flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-xs font-bold transition-all ${
            view === 'catalogue' ? 'bg-white text-[#581c87] shadow-sm' : 'text-zinc-500 hover:text-zinc-800'
          }`}
        >
          <Boxes size={14} /> Browse Catalogue ({products.length})
        </button>
        <button
          onClick={() => setView('inventory')}
          className={`flex-1 sm:flex-none flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-xs font-bold transition-all ${
            view === 'inventory' ? 'bg-white text-[#581c87] shadow-sm' : 'text-zinc-500 hover:text-zinc-800'
          }`}
        >
          <Store size={14} /> My Store Inventory ({inventory.length})
        </button>
      </div>

      {/* Filters */}
      <div className="flex flex-col md:flex-row md:items-center gap-md bg-white border border-[#eceef2] p-md rounded-2xl shadow-sm">
        <div className="relative w-full md:w-80 md:shrink-0">
          <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
          <input
            type="text"
            placeholder={view === 'catalogue' ? 'Search catalogue products…' : 'Search your stock…'}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full pl-9 pr-9 py-2.5 border border-[#e2e8f0] rounded-xl text-xs outline-none bg-[#f8fafc] focus:bg-white focus:ring-1 focus:ring-[#581c87] transition-all"
          />
          {search && (
            <button onClick={() => setSearch('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600"><X size={13} /></button>
          )}
        </div>
        {view === 'catalogue' && categories.length > 0 && (
          <div className="flex items-center gap-sm flex-wrap">
            <span className="flex items-center gap-1.5 text-[10px] font-bold text-zinc-400 uppercase tracking-widest"><Layers size={13} className="text-[#581c87]" /> Filter</span>
            <select
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              className="border border-[#e2e8f0] rounded-lg px-3 py-2 text-xs font-semibold text-zinc-700 bg-[#f8fafc] outline-none focus:ring-1 focus:ring-[#581c87] cursor-pointer"
            >
              <option value="ALL">All categories</option>
              {categories.map((c) => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
        )}
        <div className="md:ml-auto text-[11px] font-semibold text-zinc-400">
          {view === 'catalogue' ? `${filtered.length} products` : `${inventory.length} stocked`}
        </div>
      </div>

      {/* ── Browse Catalogue ── */}
      {view === 'catalogue' && (
        products.length === 0 ? (
          <CenterState
            icon={<PackageSearch size={34} />}
            title="No products published yet"
            sub="Your admin hasn't added any products to the catalogue. Once they do, they'll appear here automatically for you to select."
          />
        ) : filtered.length === 0 ? (
          <CenterState
            icon={<Boxes size={34} />}
            title="No products match your search"
            sub="Try a different keyword or clear the filters to see the full catalogue."
            action={
              <button
                onClick={() => { setSearch(''); setCategory('ALL'); }}
                className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-bold text-white bg-[#581c87] hover:bg-purple-800 transition shadow-sm cursor-pointer"
              >
                <X size={13} /> Clear filters
              </button>
            }
          />
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-md">
            {filtered.map((p) => {
              const stocked = inStore.has(p.id);
              const picked = picks[p.id] != null;
              return (
                <div key={p.id} className="bg-white/80 backdrop-blur-md border border-[#e2e8f0] rounded-2xl p-md flex flex-col justify-between gap-sm shadow-sm hover:shadow-[0_12px_24px_rgba(99,102,241,0.06)] hover:border-purple-200 hover:-translate-y-0.5 transition-all duration-300 relative group">
                  <div className="flex gap-md">
                    {/* Thumbnail with hover zoom */}
                    <div className="w-16 h-16 rounded-xl border border-zinc-100 shrink-0 overflow-hidden bg-zinc-50 relative">
                      <img src={p.image} alt={p.name} referrerPolicy="no-referrer" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
                      {stocked && (
                        <span className="absolute top-1 right-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-emerald-500 text-white shadow" title="In your store"><CheckCircle2 size={10} /></span>
                      )}
                    </div>
                    <div className="flex-1 space-y-1 min-w-0">
                      <div className="flex items-start justify-between gap-2">
                        <div className="min-w-0">
                          <h4 className="font-bold text-[#0f172a] leading-tight text-xs truncate group-hover:text-[#581c87] transition-colors">{p.name}</h4>
                          <span className="text-[10px] text-zinc-400 font-bold font-mono tracking-tight">{p.sku}</span>
                        </div>
                        {/* Category pill badge */}
                        <span className={`px-1.5 py-0.5 rounded text-[8px] font-extrabold uppercase shrink-0 ${catBadgeClass(p.category)}`}>
                          {p.category.split(' / ')[0]}
                        </span>
                      </div>

                      <div className="flex justify-between items-center pt-2">
                        <div>
                          <span className="text-[8px] text-zinc-400 block uppercase tracking-wider font-extrabold">Price</span>
                          <span className="font-extrabold text-zinc-700 font-mono text-xs">{p.price > 0 ? `₹${p.price.toLocaleString('en-IN')}` : '—'}</span>
                        </div>
                        <div className="text-right">
                          <span className="text-[8px] text-zinc-400 block uppercase tracking-wider font-extrabold">Admin Stock</span>
                          <span className="font-black text-emerald-600 font-mono text-xs">{p.adminQty}{p.unit ? ` ${p.unit}` : ''}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Stocked-status row (mirrors the admin card's status line) */}
                  <div className="flex justify-between items-center pt-2.5 border-t border-[#f1f5f9] mt-1 select-none">
                    <span className={`inline-flex items-center gap-1.5 text-[10px] font-bold tracking-tight ${stocked ? 'text-emerald-600' : 'text-zinc-400'}`}>
                      <span className={`w-1.5 h-1.5 rounded-full ${stocked ? 'bg-emerald-500 animate-pulse' : 'bg-zinc-300'}`} />
                      {stocked ? 'In Your Store' : 'Not stocked yet'}
                    </span>
                    {p.unit && <span className="text-[9px] text-zinc-400 font-semibold">{p.unit}</span>}
                  </div>

                  {/* Pick action: quantity stepper when selected, else add button */}
                  {picked ? (
                    <div className="flex items-center justify-between gap-2 pt-2.5 border-t border-[#f1f5f9] mt-1">
                      <span className="inline-flex items-center gap-1 text-[10px] font-bold text-[#581c87]"><Check size={12} /> Selected</span>
                      <div className="flex items-center gap-1">
                        <button onClick={() => setPickQty(p.id, picks[p.id] - 1)} className="w-6 h-6 rounded-lg border border-[#e2e8f0] text-zinc-500 hover:bg-zinc-50 font-bold cursor-pointer leading-none flex items-center justify-center"><Minus size={12} /></button>
                        <span className="w-8 text-center font-mono font-bold text-xs text-[#0f172a]">{picks[p.id]}</span>
                        <button onClick={() => setPickQty(p.id, picks[p.id] + 1)} className="w-6 h-6 rounded-lg border border-[#e2e8f0] text-zinc-500 hover:bg-zinc-50 font-bold cursor-pointer leading-none flex items-center justify-center"><Plus size={12} /></button>
                        <button onClick={() => togglePick(p.id)} title="Remove" className="ml-1 w-6 h-6 rounded-lg text-rose-500 hover:bg-rose-50 flex items-center justify-center cursor-pointer"><X size={13} /></button>
                      </div>
                    </div>
                  ) : (
                    <button
                      onClick={() => togglePick(p.id)}
                      className="w-full flex items-center justify-center gap-1.5 pt-2.5 mt-1 border-t border-[#f1f5f9] text-[11px] font-bold text-[#581c87] hover:text-purple-800 cursor-pointer"
                    >
                      <Plus size={13} /> Add to Store
                    </button>
                  )}
                </div>
              );
            })}
          </div>
        )
      )}

      {/* ── My Store Inventory ── (card grid — same design as Browse Catalogue) */}
      {view === 'inventory' && (
        stockQ.isLoading ? (
          <CenterState icon={<Store size={34} />} title="Loading your stock…" sub="Fetching the latest stock levels for your store." />
        ) : !locationid ? (
          <CenterState icon={<Store size={34} />} title="No store linked yet" sub="Your account isn't linked to a store outlet, so there's no inventory to show." />
        ) : inventory.length === 0 ? (
          <CenterState icon={<PackageSearch size={34} />} title="No products stocked yet" sub="Add products from the catalogue and they'll appear here with live stock levels." />
        ) : filteredInventory.length === 0 ? (
          <CenterState
            icon={<Boxes size={34} />}
            title="No stock matches your search"
            sub="Try a different keyword to find an item in your store."
            action={
              <button onClick={() => setSearch('')} className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-bold text-white bg-[#581c87] hover:bg-purple-800 transition shadow-sm cursor-pointer">
                <X size={13} /> Clear search
              </button>
            }
          />
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-md">
            {filteredInventory.map((it, i) => (
              <div key={it.id || i} className="bg-white/80 backdrop-blur-md border border-[#e2e8f0] rounded-2xl p-md flex flex-col justify-between gap-sm shadow-sm hover:shadow-[0_12px_24px_rgba(99,102,241,0.06)] hover:border-purple-200 hover:-translate-y-0.5 transition-all duration-300 relative group">
                <div className="flex gap-md">
                  {/* Thumbnail with status corner dot */}
                  <div className="w-16 h-16 rounded-xl border border-zinc-100 shrink-0 overflow-hidden bg-zinc-50 relative">
                    <img src={it.image} alt={it.name} referrerPolicy="no-referrer" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
                    <span className="absolute top-1 right-1 w-3 h-3 rounded-full border-2 border-white shadow" style={{ background: it.color }} title={it.label} />
                  </div>
                  <div className="flex-1 space-y-1 min-w-0">
                    <div className="flex items-start justify-between gap-2">
                      <div className="min-w-0">
                        <h4 className="font-bold text-[#0f172a] leading-tight text-xs truncate group-hover:text-[#581c87] transition-colors">{it.name}</h4>
                        <span className="text-[10px] text-zinc-400 font-bold font-mono tracking-tight">{it.sku}</span>
                      </div>
                      <span className={`px-1.5 py-0.5 rounded text-[8px] font-extrabold uppercase shrink-0 ${catBadgeClass(it.category)}`}>
                        {it.category.split(' / ')[0]}
                      </span>
                    </div>

                    <div className="flex justify-between items-center pt-2">
                      <div>
                        <span className="text-[8px] text-zinc-400 block uppercase tracking-wider font-extrabold">In Stock</span>
                        <span className="font-black font-mono text-xs" style={{ color: it.color }}>{it.closing.toLocaleString('en-IN')}</span>
                      </div>
                      <div className="text-right">
                        <span className="text-[8px] text-zinc-400 block uppercase tracking-wider font-extrabold">Status</span>
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border" style={{ background: `${it.color}14`, color: it.color, borderColor: `${it.color}40` }}>{it.label}</span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Status line (mirrors the catalogue card's footer) */}
                <div className="flex justify-between items-center pt-2.5 border-t border-[#f1f5f9] mt-1 select-none">
                  <span className="inline-flex items-center gap-1.5 text-[10px] font-bold tracking-tight" style={{ color: it.color }}>
                    <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: it.color }} />
                    {it.label}
                  </span>
                  <span className="text-[9px] text-zinc-400 font-semibold">{it.category.split(' / ')[0]}</span>
                </div>
              </div>
            ))}
          </div>
        )
      )}

      {/* ── Selection action bar ── */}
      {view === 'catalogue' && pickCount > 0 && (
        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[120] w-[min(680px,calc(100vw-2rem))]">
          <div className="bg-[#0f172a] text-white rounded-2xl shadow-2xl border border-white/10 px-4 py-3">
            {notice ? (
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-bold">{pickCount} product{pickCount > 1 ? 's' : ''} requested for {storeName}</span>
                  <button onClick={() => { setPicks({}); setNotice(false); }} className="text-[11px] font-semibold text-purple-200 hover:text-white cursor-pointer">Clear</button>
                </div>
                <AwaitingApi label="Submitting your store request" api="stock-request API" compact className="bg-white/5 border-white/15 text-purple-100" />
              </div>
            ) : (
              <div className="flex items-center justify-between gap-3">
                <div className="flex items-center gap-2 min-w-0">
                  <span className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center shrink-0"><Boxes size={15} /></span>
                  <div className="min-w-0">
                    <p className="text-xs font-bold truncate">{pickCount} product{pickCount > 1 ? 's' : ''} · {Object.values(picks).reduce((a: number, b: number) => a + b, 0)} units</p>
                    <p className="text-[10px] text-purple-200">Selected for {storeName}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <button onClick={() => setPicks({})} className="px-3 py-2 rounded-xl text-[11px] font-bold text-purple-200 hover:text-white hover:bg-white/10 transition cursor-pointer">Clear</button>
                  <button onClick={commitSelectionToStore} className="px-4 py-2 rounded-xl text-[11px] font-bold bg-white text-[#581c87] hover:bg-purple-50 transition cursor-pointer flex items-center gap-1.5">
                    <Check size={13} /> Request for Store
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function CenterState({ icon, title, sub, action }: { icon: React.ReactNode; title: string; sub?: string; action?: React.ReactNode }) {
  return (
    <div className="relative overflow-hidden bg-gradient-to-b from-white to-[#faf9ff] border border-[#eceef2] rounded-3xl px-6 py-16 sm:py-20 text-center shadow-sm">
      {/* Soft decorative glows */}
      <div className="pointer-events-none absolute -top-20 -right-20 w-60 h-60 rounded-full bg-purple-200/30 blur-3xl" />
      <div className="pointer-events-none absolute -bottom-24 -left-20 w-60 h-60 rounded-full bg-indigo-200/30 blur-3xl" />

      <div className="relative flex flex-col items-center">
        {/* Icon with halo */}
        <div className="relative mb-5">
          <span className="absolute inset-0 -m-3 rounded-full bg-purple-300/25 blur-xl" />
          <span className="relative flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-[#581c87] to-indigo-500 text-white shadow-lg shadow-purple-500/20 ring-8 ring-white">
            {icon}
          </span>
        </div>

        <h3 className="font-bold text-lg text-[#0f172a] tracking-tight">{title}</h3>
        {sub && <p className="text-sm text-zinc-500 mt-2 max-w-md leading-relaxed">{sub}</p>}

        {action && <div className="mt-6">{action}</div>}

        {/* Ghost preview cards — hint at what will appear here */}
        <div className="mt-9 flex items-end justify-center gap-3 sm:gap-4 opacity-70 select-none" aria-hidden>
          {[0, 1, 2].map((i) => (
            <div
              key={i}
              className={`w-24 sm:w-28 rounded-2xl border border-[#eceef2] bg-white/70 p-3 shadow-sm ${i === 1 ? 'scale-110' : 'opacity-80'}`}
            >
              <div className="w-full h-10 rounded-lg bg-gradient-to-br from-zinc-100 to-zinc-200/70 mb-2" />
              <div className="h-2 w-3/4 rounded-full bg-zinc-200 mb-1.5" />
              <div className="h-2 w-1/2 rounded-full bg-zinc-100" />
            </div>
          ))}
        </div>

        <div className="mt-6 inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-zinc-400">
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" /> Syncs automatically
        </div>
      </div>
    </div>
  );
}
