'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Archive, ChevronLeft, Download, Folder, Loader2, Package, Trash2 } from 'lucide-react';
import { api } from '@/lib/api';

type Variant = { id: string; name: string; stock: number };
type Product = { id: string; name: string; deliveryMethod: string; stock: number; variants?: Variant[] };
type Item = { id: string; productId: string; variantId?: string; folderName: string; status: string; createdAt: string; product?: { name: string }; variant?: { name: string } };
type Inventory = { data: Item[]; summary: Record<string, number> };
const ALL = '__all__';

export default function SellerInventoryPage() {
  const { locale } = useParams<{ locale: string }>();
  const [products, setProducts] = useState<Product[]>([]);
  const [productId, setProductId] = useState(ALL);
  const [variantId, setVariantId] = useState(ALL);
  const [inventory, setInventory] = useState<Inventory>({ data: [], summary: {} });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const selectedProduct = products.find((item) => item.id === productId);

  const loadInventory = async (nextProductId = productId, nextVariantId = variantId) => {
    const params = nextProductId === ALL ? undefined : { ...(nextVariantId !== ALL ? { variantId: nextVariantId } : {}) };
    const url = nextProductId === ALL ? '/seller/inventory' : `/seller/products/${nextProductId}/inventory`;
    const response = await api.get(url, { params });
    setInventory(response.data);
  };

  useEffect(() => {
    api.get('/products/my').then((response) => {
      setProducts((response.data?.data || response.data || []).filter((item: Product) => ['AUTO', 'AUTO_ZIP', 'AUTO_TXT'].includes(item.deliveryMethod)));
    }).catch(() => setError('Không thể tải danh sách sản phẩm.')).finally(() => setLoading(false));
  }, []);
  useEffect(() => { loadInventory().catch(() => setError('Không thể tải kho hàng.')); }, [productId, variantId]);

  const changeProduct = (id: string) => { setProductId(id); setVariantId(ALL); };
  const remove = async (id: string) => {
    if (!confirm('Xóa item kho chưa bán?')) return;
    try { await api.delete(`/seller/inventory/${id}`); await loadInventory(); } catch (requestError: any) { setError(requestError.response?.data?.message || 'Không thể xóa item kho.'); }
  };
  const download = async () => {
    if (productId === ALL) return;
    try {
      const response = await api.get(`/seller/products/${productId}/inventory/download`, { params: variantId === ALL ? undefined : { variantId }, responseType: 'blob' });
      const url = URL.createObjectURL(response.data); const link = document.createElement('a'); link.href = url; link.download = selectedProduct?.deliveryMethod === 'AUTO_TXT' ? 'inventory.txt' : 'inventory.zip'; link.click(); URL.revokeObjectURL(url);
    } catch (requestError: any) { setError(requestError.response?.data?.message || 'Không thể tải kho hàng.'); }
  };

  if (loading) return <div className="flex min-h-[50vh] items-center justify-center"><Loader2 className="animate-spin text-teal-400" /></div>;
  return <div className="mx-auto max-w-6xl space-y-6"><div className="flex items-center gap-3"><Link href={`/${locale}/seller/products`} className="rounded-lg bg-white/5 p-2 text-gray-300"><ChevronLeft /></Link><div><h1 className="text-xl font-bold text-white">Quản lý kho</h1><p className="text-sm text-gray-500">Xem toàn bộ kho hoặc lọc đến từng sản phẩm và SKU. Tên thư mục lấy từ tên tài khoản trong ZIP.</p></div></div>
    <div className="space-y-4 rounded-2xl border border-white/10 bg-[#141414] p-6"><div className="grid gap-3 md:grid-cols-2"><select value={productId} onChange={(event) => changeProduct(event.target.value)} className="w-full rounded-xl border border-teal-500/30 bg-black/40 p-3 text-white"><option value={ALL}>Tất cả sản phẩm — toàn bộ kho</option>{products.map((item) => <option key={item.id} value={item.id}>{item.name} — tổng kho: {item.stock}</option>)}</select><select disabled={productId === ALL} value={variantId} onChange={(event) => setVariantId(event.target.value)} className="w-full rounded-xl border border-teal-500/30 bg-black/40 p-3 text-white disabled:cursor-not-allowed disabled:opacity-50"><option value={ALL}>{productId === ALL ? 'Chọn sản phẩm trước' : 'Tất cả SKU của sản phẩm'}</option>{selectedProduct?.variants?.map((item) => <option key={item.id} value={item.id}>SKU: {item.name} — kho riêng: {item.stock}</option>)}</select></div><p className="text-xs text-gray-500">Để tải ZIP kho, hãy lọc đến một sản phẩm hoặc SKU. Bảng bên dưới luôn hiển thị tên thư mục thực tế để seller quản lý tài khoản.</p>{error && <p className="text-sm text-red-400">{error}</p>}<button type="button" onClick={download} disabled={productId === ALL || !inventory.summary.AVAILABLE} className="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-3 font-bold text-white disabled:opacity-50"><Download />Tải kho AVAILABLE đang lọc</button></div>
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">{['AVAILABLE', 'RESERVED', 'DELIVERED', 'DISABLED'].map((status) => <div key={status} className="rounded-xl border border-white/10 bg-[#141414] p-4"><p className="text-xs text-gray-500">{status}</p><p className="text-2xl font-bold text-white">{inventory.summary[status] || 0}</p></div>)}</div>
    <div className="overflow-hidden rounded-2xl border border-white/10 bg-[#141414]"><div className="grid grid-cols-12 gap-3 border-b border-white/10 px-5 py-3 text-xs font-bold uppercase text-gray-500"><span className="col-span-2">Trạng thái</span><span className="col-span-3">Sản phẩm / SKU</span><span className="col-span-5">Tên thư mục tài khoản</span><span className="col-span-2">Thao tác</span></div>{inventory.data.map((item) => <div key={item.id} className="grid grid-cols-12 gap-3 border-b border-white/5 px-5 py-3 text-sm last:border-0"><span className="col-span-2 font-semibold text-teal-400">{item.status}</span><span className="col-span-3 min-w-0"><span className="block truncate text-gray-100">{item.product?.name || 'Sản phẩm'}</span><span className="block truncate text-xs text-gray-500">{item.variant?.name || 'Không có SKU'}</span></span><span className="col-span-5 flex min-w-0 items-center gap-2 font-mono text-gray-100"><Folder className="h-4 w-4 shrink-0 text-amber-300" /><span className="truncate" title={item.folderName}>{item.folderName}</span></span><span className="col-span-2">{item.status === 'AVAILABLE' && <button onClick={() => remove(item.id)} className="rounded p-1 text-red-400 hover:bg-red-500/10"><Trash2 className="h-4 w-4" /></button>}</span></div>)}{!inventory.data.length && <div className="p-10 text-center text-gray-500"><Archive className="mx-auto mb-3 opacity-30" />Kho đang trống.</div>}</div>
  </div>;
}