import { createFileRoute } from "@tanstack/react-router";
import { useState, useEffect, useRef } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent } from "@/components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "sonner";
import { Plus, Pencil, Trash2, Search, Package, ArrowUpDown, FileSpreadsheet } from "lucide-react";
import { useT, fmtMoney } from "@/lib/i18n";
import { downloadCSV } from "@/lib/export-csv";
import { useServerFn } from "@tanstack/react-start";
import { translateBnToEn } from "@/lib/translate.functions";

export const Route = createFileRoute("/_authenticated/products")({
  head: () => ({ meta: [{ title: "পণ্য" }] }),
  component: ProductsPage,
});

function ProductsPage() {
  const { t, lang } = useT();
  const qc = useQueryClient();
  const [search, setSearch] = useState("");
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [adjusting, setAdjusting] = useState<any>(null);

  const { data: products = [] } = useQuery({
    queryKey: ["products"],
    queryFn: async () => (await supabase.from("products").select("*, categories(name), brands(name)").order("created_at", { ascending: false })).data || [],
  });
  const { data: cats = [] } = useQuery({ queryKey: ["categories"], queryFn: async () => (await supabase.from("categories").select("*").order("name")).data || [] });
  const { data: brands = [] } = useQuery({ queryKey: ["brands"], queryFn: async () => (await supabase.from("brands").select("*").order("name")).data || [] });
  const { data: units = [] } = useQuery({ queryKey: ["units"], queryFn: async () => (await supabase.from("units" as any).select("*").order("name")).data || [] });

  const filtered = products.filter((p: any) => {
    const q = search.toLowerCase();
    return (
      p.name.toLowerCase().includes(q) ||
      (p.name_en || "").toLowerCase().includes(q) ||
      (p.sku || "").toLowerCase().includes(q)
    );
  });

  const save = async (f: any) => {
    const { data: u } = await supabase.auth.getUser();
    if (!u.user) return;
    // auto-generate SKU if not provided
    let sku = f.sku?.trim();
    if (!sku) {
      const prefix = (f.name || "PRD").slice(0, 3).toUpperCase().replace(/[^A-Z0-9]/g, "X");
      sku = `${prefix}-${Date.now().toString().slice(-6)}`;
    }
    const payload = {
      user_id: u.user.id, name: f.name, sku,
      category_id: f.category_id || null, brand_id: f.brand_id || null,
      unit: f.unit || "Pcs", pack_size: Number(f.pack_size) || 1,
      cost_price: Number(f.cost_price) || 0, sale_price: Number(f.sale_price) || 0,
      stock: Number(f.stock) || 0, low_stock_threshold: Number(f.low_stock_threshold) || 5,
      name_en: f.name_en?.trim() || null,
    } as any;
    const res = editing
      ? await supabase.from("products").update(payload).eq("id", editing.id)
      : await supabase.from("products").insert(payload);
    if (res.error) return toast.error(res.error.message);
    toast.success(t("saved"));
    qc.invalidateQueries({ queryKey: ["products"] });
    qc.invalidateQueries({ queryKey: ["dashboard-stats"] });
    setOpen(false); setEditing(null);
  };

  const del = async (id: string) => {
    if (!confirm(t("confirm_delete"))) return;
    const { error } = await supabase.from("products").delete().eq("id", id);
    if (error) return toast.error(error.message);
    toast.success(t("deleted"));
    qc.invalidateQueries({ queryKey: ["products"] });
  };

  const exportStock = () => {
    const rows: (string | number)[][] = [
      ["Name", "SKU", "Category", "Brand", "Unit", "Pack Size", "Stock", "Cost", "Sale", "Stock Value"],
      ...products.map((p: any) => [
        p.name, p.sku || "", p.categories?.name || "", p.brands?.name || "",
        p.unit || "Pcs", p.pack_size || 1, p.stock || 0,
        Number(p.cost_price) || 0, Number(p.sale_price) || 0,
        (Number(p.stock) || 0) * (Number(p.cost_price) || 0),
      ]),
    ];
    downloadCSV(`stock-${new Date().toISOString().slice(0, 10)}`, rows);
  };

  return (
    <div className="space-y-6 max-w-7xl mx-auto">
      <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
        <h1 className="text-2xl md:text-3xl font-extrabold">{t("products")}</h1>
        <div className="flex gap-2">
          <Button variant="outline" onClick={exportStock}><FileSpreadsheet className="size-4 mr-1" /> Excel</Button>
          <Dialog open={open} onOpenChange={(v) => { setOpen(v); if (!v) setEditing(null); }}>
            <DialogTrigger asChild><Button className="gradient-primary text-white"><Plus className="size-4 mr-1" /> {t("add_product")}</Button></DialogTrigger>
            {open && <ProductDialog key={editing?.id || "new"} editing={editing} onSave={save} cats={cats} brands={brands} units={units} />}
          </Dialog>
        </div>
      </div>

      <div className="relative max-w-md">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
        <Input placeholder={t("search")} value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9" />
      </div>

      {filtered.length === 0 ? (
        <Card><CardContent className="p-12 text-center text-muted-foreground">{t("no_data")}</CardContent></Card>
      ) : (
        <div className="grid gap-3">
          {filtered.map((p: any) => {
            const low = Number(p.stock) <= Number(p.low_stock_threshold);
            return (
              <Card key={p.id} className="shadow-card hover:shadow-elegant transition">
                <CardContent className="p-4 flex items-center gap-4 flex-wrap">
                  <div className="size-12 rounded-xl gradient-primary grid place-items-center text-white shrink-0">
                    <Package className="size-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <h3 className="font-bold">{p.name}</h3>
                      {p.sku && <Badge variant="secondary" className="text-xs">{p.sku}</Badge>}
                      {p.categories?.name && <Badge variant="outline" className="text-xs">{p.categories.name}</Badge>}
                      {p.brands?.name && <Badge variant="outline" className="text-xs">{p.brands.name}</Badge>}
                      {low && <Badge variant="destructive" className="text-xs">{t("low_stock")}</Badge>}
                    </div>
                    {p.name_en && <div className="text-xs text-muted-foreground italic">{p.name_en}</div>}
                    <div className="text-sm text-muted-foreground mt-1 flex gap-4 flex-wrap">
                      <span>{t("cost_price")}: {fmtMoney(p.cost_price, lang)}</span>
                      <span>{t("sale_price")}: <b className="text-foreground">{fmtMoney(p.sale_price, lang)}</b></span>
                      <span>{t("stock")}: <b className="text-foreground">{p.stock} {p.unit || "Pcs"}</b>{Number(p.pack_size) > 1 && <span className="text-xs"> ({p.pack_size}/box)</span>}</span>
                    </div>
                  </div>
                  <div className={`text-center px-3 py-2 rounded-lg shrink-0 ${low ? "bg-destructive/10 text-destructive" : "bg-primary/10 text-primary"}`}>
                    <div className="text-[10px] uppercase font-semibold opacity-70">{t("stock")}</div>
                    <div className="text-xl font-extrabold leading-none">{p.stock}</div>
                    <div className="text-[10px] opacity-70">{p.unit || "Pcs"}</div>
                  </div>
                  <div className="flex gap-1">
                    <Button size="icon" variant="ghost" title={t("stock_adjust")} onClick={() => setAdjusting(p)}><ArrowUpDown className="size-4" /></Button>
                    <Button size="icon" variant="ghost" onClick={() => { setEditing(p); setOpen(true); }}><Pencil className="size-4" /></Button>
                    <Button size="icon" variant="ghost" onClick={() => del(p.id)}><Trash2 className="size-4 text-destructive" /></Button>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      <Dialog open={!!adjusting} onOpenChange={(v) => !v && setAdjusting(null)}>
        {adjusting && <AdjustDialog product={adjusting} onDone={() => { setAdjusting(null); qc.invalidateQueries({ queryKey: ["products"] }); }} />}
      </Dialog>
    </div>
  );
}

function ProductDialog({ editing, onSave, cats, brands, units }: any) {
  const { t } = useT();
  const qc = useQueryClient();
  const translate = useServerFn(translateBnToEn);
  const [f, setF] = useState({
    name: editing?.name || "", name_en: editing?.name_en || "", sku: editing?.sku || "",
    category_id: editing?.category_id || "", brand_id: editing?.brand_id || "",
    unit: editing?.unit || "Pcs", pack_size: editing?.pack_size ?? 1,
    cost_price: editing?.cost_price ?? "", sale_price: editing?.sale_price ?? "",
    stock: editing?.stock ?? 0, low_stock_threshold: editing?.low_stock_threshold ?? 5,
  });
  const [translating, setTranslating] = useState(false);
  const lastTranslated = useRef<string>(editing?.name || "");

  // Auto-translate Bangla → English (debounced)
  useEffect(() => {
    const n = f.name.trim();
    if (!n || n === lastTranslated.current) return;
    if (!/[\u0980-\u09FF]/.test(n)) return; // only when Bangla present
    if (f.name_en && editing) return; // don't overwrite existing manual edit
    const tm = setTimeout(async () => {
      try {
        setTranslating(true);
        const { en } = await translate({ data: { text: n } });
        lastTranslated.current = n;
        setF((p) => (p.name === n ? { ...p, name_en: en } : p));
      } catch { /* ignore */ }
      finally { setTranslating(false); }
    }, 700);
    return () => clearTimeout(tm);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [f.name]);

  const quickAdd = async (table: "brands" | "categories" | "units", _name: string, setKey: string) => {
    const n = prompt(`${t("name")}:`)?.trim();
    if (!n) return;
    const { data: u } = await supabase.auth.getUser();
    if (!u.user) return;
    const { data, error } = await supabase.from(table as any).insert({ user_id: u.user.id, name: n }).select().single();
    if (error) return toast.error(error.message);
    qc.invalidateQueries({ queryKey: [table] });
    if (setKey === "unit") setF((p) => ({ ...p, unit: (data as any).name }));
    else setF((p) => ({ ...p, [setKey]: (data as any).id }));
  };

  const allUnits = units.length ? units.map((x: any) => x.name) : ["Pcs", "Kg", "gm", "Ta", "Carton", "Drum", "Liter", "Dozen"];

  const submit = () => onSave(f);

  return (
    <DialogContent className="max-w-lg w-[95vw] sm:w-full p-4 sm:p-6">
      <DialogHeader><DialogTitle>{editing ? t("edit") : t("add_product")}</DialogTitle></DialogHeader>
      <div className="space-y-3 max-h-[65vh] sm:max-h-[70vh] overflow-y-auto pr-1 -mr-1">
        <Fld label={t("name") + " * (বাংলা)"}>
          <Input value={f.name} placeholder="যেমন: সয়াবিন তেল ১ লিটার" onChange={(e) => setF({ ...f, name: e.target.value })} />
        </Fld>
        <Fld label={<span className="flex items-center gap-2">English name {translating && <span className="text-xs text-primary animate-pulse">✨ auto…</span>}</span>}>
          <Input value={f.name_en} placeholder="auto from Bangla" onChange={(e) => setF({ ...f, name_en: e.target.value })} />
        </Fld>
        <Fld label={`${t("sku")} (${t("auto")})`}>
          <Input value={f.sku} placeholder={t("auto")} onChange={(e) => setF({ ...f, sku: e.target.value })} />
        </Fld>

        <div className="grid grid-cols-2 gap-3">
          <Fld label={t("category")}>
            <div className="flex gap-1">
              <Select value={f.category_id || "none"} onValueChange={(v) => setF({ ...f, category_id: v === "none" ? "" : v })}>
                <SelectTrigger><SelectValue placeholder="—" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">—</SelectItem>
                  {cats.map((c: any) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
                </SelectContent>
              </Select>
              <Button type="button" size="icon" variant="outline" onClick={() => quickAdd("categories", f.name, "category_id")}><Plus className="size-4" /></Button>
            </div>
          </Fld>
          <Fld label={t("brand")}>
            <div className="flex gap-1">
              <Select value={f.brand_id || "none"} onValueChange={(v) => setF({ ...f, brand_id: v === "none" ? "" : v })}>
                <SelectTrigger><SelectValue placeholder="—" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">—</SelectItem>
                  {brands.map((b: any) => <SelectItem key={b.id} value={b.id}>{b.name}</SelectItem>)}
                </SelectContent>
              </Select>
              <Button type="button" size="icon" variant="outline" onClick={() => quickAdd("brands", f.name, "brand_id")}><Plus className="size-4" /></Button>
            </div>
          </Fld>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <Fld label={t("unit")}>
            <div className="flex gap-1">
              <Select value={f.unit} onValueChange={(v) => setF({ ...f, unit: v })}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  {allUnits.map((n: string) => <SelectItem key={n} value={n}>{n}</SelectItem>)}
                </SelectContent>
              </Select>
              <Button type="button" size="icon" variant="outline" onClick={() => quickAdd("units", "", "unit")}><Plus className="size-4" /></Button>
            </div>
          </Fld>
          <Fld label={`${t("units_per_carton")} (${f.unit})`}>
            <Input type="number" min="1" step="1" value={f.pack_size} onChange={(e) => setF({ ...f, pack_size: e.target.value })} />
          </Fld>
        </div>

        {!editing && (
          <div className="rounded-lg bg-muted/40 border p-3 text-xs text-muted-foreground">
            ℹ️ Stock "নতুন ক্রয়" থেকে যোগ হবে এবং Sale / "নষ্ট পণ্য" থেকে কমবে। এখানে stock দিতে হবে না।
          </div>
        )}

        <div className="grid grid-cols-2 gap-3">
          <Fld label={t("cost_price")}><Input type="number" step="0.01" value={f.cost_price} onChange={(e) => setF({ ...f, cost_price: e.target.value })} /></Fld>
          <Fld label={t("sale_price")}><Input type="number" step="0.01" value={f.sale_price} onChange={(e) => setF({ ...f, sale_price: e.target.value })} /></Fld>
          <Fld label={t("alert_threshold")}><Input type="number" step="0.01" value={f.low_stock_threshold} onChange={(e) => setF({ ...f, low_stock_threshold: e.target.value })} /></Fld>
        </div>
      </div>
      <DialogFooter>
        <Button onClick={submit} disabled={!f.name} className="gradient-primary text-white">{t("save")}</Button>
      </DialogFooter>
    </DialogContent>
  );
}



function AdjustDialog({ product, onDone }: { product: any; onDone: () => void }) {
  const { t } = useT();
  const [mode, setMode] = useState<"in" | "out">("in");
  const [qty, setQty] = useState("");
  const [reason, setReason] = useState("");

  const submit = async () => {
    const n = Number(qty);
    if (!n || n <= 0) return toast.error("?");
    const { data: u } = await supabase.auth.getUser();
    if (!u.user) return;
    const change = mode === "in" ? n : -n;
    const { error } = await supabase.from("stock_adjustments" as any).insert({
      user_id: u.user.id, product_id: product.id, change, reason: reason || null,
    });
    if (error) return toast.error(error.message);
    toast.success(t("saved"));
    onDone();
  };

  return (
    <DialogContent>
      <DialogHeader><DialogTitle>{t("stock_adjust")} — {product.name}</DialogTitle></DialogHeader>
      <div className="space-y-3">
        <div className="text-sm text-muted-foreground">{t("stock")}: <b className="text-foreground">{product.stock} {product.unit || "Pcs"}</b></div>
        <div className="grid grid-cols-2 gap-2">
          <Button variant={mode === "in" ? "default" : "outline"} onClick={() => setMode("in")}>+ {t("adjust_in")}</Button>
          <Button variant={mode === "out" ? "default" : "outline"} onClick={() => setMode("out")}>− {t("adjust_out")}</Button>
        </div>
        <Fld label={t("quantity")}><Input type="number" step="0.01" value={qty} onChange={(e) => setQty(e.target.value)} autoFocus /></Fld>
        <Fld label={t("reason")}><Input value={reason} onChange={(e) => setReason(e.target.value)} placeholder="damage / count / return..." /></Fld>
      </div>
      <DialogFooter>
        <Button onClick={submit} className="gradient-primary text-white">{t("save")}</Button>
      </DialogFooter>
    </DialogContent>
  );
}

function Fld({ label, children }: any) {
  return <div className="space-y-1.5"><Label className="text-sm font-semibold">{label}</Label>{children}</div>;
}