import { createFileRoute } from "@tanstack/react-router";
import { useState } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
import { toast } from "sonner";
import { Plus, AlertTriangle, FileSpreadsheet } from "lucide-react";
import { useT, fmtMoney } from "@/lib/i18n";
import { downloadCSV } from "@/lib/export-csv";

export const Route = createFileRoute("/_authenticated/damaged")({
  head: () => ({ meta: [{ title: "নষ্ট পণ্য" }] }),
  component: DamagedPage,
});

function DamagedPage() {
  const { t, lang } = useT();
  const qc = useQueryClient();
  const [open, setOpen] = useState(false);

  const { data: rows = [] } = useQuery({
    queryKey: ["damaged"],
    queryFn: async () => {
      const { data } = await supabase
        .from("stock_adjustments")
        .select("*, products(name, unit, cost_price)")
        .lt("change", 0)
        .ilike("reason", "%damaged%")
        .order("created_at", { ascending: false })
        .limit(200);
      return data || [];
    },
  });

  const { data: products = [] } = useQuery({
    queryKey: ["products"],
    queryFn: async () => (await supabase.from("products").select("*").order("name")).data || [],
  });

  const totalLoss = rows.reduce((a: number, r: any) => a + Math.abs(Number(r.change)) * Number(r.products?.cost_price || 0), 0);

  const exportXls = () => {
    const data: (string | number)[][] = [
      ["Date", "Product", "Qty Lost", "Unit", "Cost/Unit", "Loss", "Note"],
      ...rows.map((r: any) => [
        new Date(r.created_at).toLocaleString(),
        r.products?.name || "",
        Math.abs(Number(r.change)),
        r.products?.unit || "",
        Number(r.products?.cost_price || 0),
        Math.abs(Number(r.change)) * Number(r.products?.cost_price || 0),
        r.reason || "",
      ]),
    ];
    data.push([], ["", "", "", "", "TOTAL LOSS", totalLoss]);
    downloadCSV(`damaged-${new Date().toISOString().slice(0, 10)}`, data);
  };

  return (
    <div className="space-y-6 max-w-6xl 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("damaged")}</h1>
        <div className="flex gap-2">
          <Button variant="outline" onClick={exportXls}><FileSpreadsheet className="size-4 mr-1" /> Excel</Button>
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild><Button className="gradient-primary text-white"><Plus className="size-4 mr-1" /> {t("add_damaged")}</Button></DialogTrigger>
            {open && <AddDamagedDialog products={products} onDone={() => { setOpen(false); qc.invalidateQueries({ queryKey: ["damaged"] }); qc.invalidateQueries({ queryKey: ["products"] }); }} />}
          </Dialog>
        </div>
      </div>

      <Card className="gradient-sunset text-white border-0 shadow-elegant">
        <CardContent className="p-4">
          <div className="text-xs text-white/80">{lang === "bn" ? "মোট ক্ষতি" : "Total Loss"}</div>
          <div className="text-2xl font-extrabold">{fmtMoney(totalLoss, lang)}</div>
        </CardContent>
      </Card>

      {rows.length === 0 ? (
        <Card><CardContent className="p-12 text-center text-muted-foreground">{t("no_data")}</CardContent></Card>
      ) : (
        <div className="space-y-2">
          {rows.map((r: any) => (
            <Card key={r.id}>
              <CardContent className="p-3 flex items-center gap-3 flex-wrap">
                <div className="size-10 rounded-lg bg-destructive/10 grid place-items-center"><AlertTriangle className="size-5 text-destructive" /></div>
                <div className="flex-1 min-w-0">
                  <div className="font-bold truncate">{r.products?.name || "—"}</div>
                  <div className="text-xs text-muted-foreground">{new Date(r.created_at).toLocaleString(lang === "bn" ? "bn-BD" : "en-IN")} · {r.reason || "—"}</div>
                </div>
                <div className="text-right">
                  <div className="font-bold text-destructive">−{Math.abs(Number(r.change))} {r.products?.unit || ""}</div>
                  <div className="text-xs text-muted-foreground">{fmtMoney(Math.abs(Number(r.change)) * Number(r.products?.cost_price || 0), lang)}</div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}

function AddDamagedDialog({ products, onDone }: { products: any[]; onDone: () => void }) {
  const { t } = useT();
  const [productId, setProductId] = useState("");
  const [qty, setQty] = useState("");
  const [reason, setReason] = useState("Damaged");

  const submit = async () => {
    const n = Number(qty);
    if (!productId || !n || n <= 0) return toast.error("?");
    const { data: u } = await supabase.auth.getUser();
    if (!u.user) return;
    const fullReason = reason.toLowerCase().includes("damaged") ? reason : `Damaged: ${reason}`;
    const { error } = await supabase.from("stock_adjustments").insert({
      user_id: u.user.id, product_id: productId, change: -n, reason: fullReason,
    });
    if (error) return toast.error(error.message);
    toast.success(t("saved"));
    onDone();
  };

  return (
    <DialogContent>
      <DialogHeader><DialogTitle>{t("add_damaged")}</DialogTitle></DialogHeader>
      <div className="space-y-3">
        <div className="space-y-1.5">
          <Label className="text-sm font-semibold">{t("products")}</Label>
          <Select value={productId} onValueChange={setProductId}>
            <SelectTrigger><SelectValue placeholder="—" /></SelectTrigger>
            <SelectContent>
              {products.map((p: any) => <SelectItem key={p.id} value={p.id}>{p.name} ({p.stock} {p.unit})</SelectItem>)}
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-1.5"><Label className="text-sm font-semibold">{t("quantity")}</Label><Input type="number" step="0.01" value={qty} onChange={(e) => setQty(e.target.value)} autoFocus /></div>
        <div className="space-y-1.5"><Label className="text-sm font-semibold">{t("reason")}</Label><Input value={reason} onChange={(e) => setReason(e.target.value)} placeholder="Damaged / Expired / Broken..." /></div>
      </div>
      <DialogFooter>
        <Button onClick={submit} className="gradient-primary text-white">{t("save")}</Button>
      </DialogFooter>
    </DialogContent>
  );
}