import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
import { toast } from "sonner";
import { Plus, Trash2, Wallet } from "lucide-react";
import { useT, fmtMoney } from "@/lib/i18n";

export const Route = createFileRoute("/_authenticated/expenses")({
  head: () => ({ meta: [{ title: "খরচ" }] }),
  component: ExpensesPage,
});

const PRESET = ["ভাড়া", "বিদ্যুৎ বিল", "বেতন", "যাতায়াত", "বিজ্ঞাপন", "অন্যান্য"];

function ExpensesPage() {
  const { t, lang } = useT();
  const qc = useQueryClient();
  const [open, setOpen] = useState(false);
  const [f, setF] = useState({ category: PRESET[0], amount: "", note: "" });

  const { data: rows = [] } = useQuery({
    queryKey: ["expenses"],
    queryFn: async () => (await supabase.from("expenses").select("*").order("created_at", { ascending: false }).limit(100)).data || [],
  });

  const total = rows.reduce((a: number, r: any) => a + Number(r.amount), 0);

  const save = async () => {
    const { data: u } = await supabase.auth.getUser(); if (!u.user) return;
    const { error } = await supabase.from("expenses").insert({
      user_id: u.user.id, category: f.category, amount: Number(f.amount) || 0, note: f.note || null,
    });
    if (error) return toast.error(error.message);
    toast.success(t("saved"));
    qc.invalidateQueries({ queryKey: ["expenses"] });
    setF({ category: PRESET[0], amount: "", note: "" });
    setOpen(false);
  };

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

  return (
    <div className="space-y-6 max-w-4xl 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("expenses")}</h1>
        <Dialog open={open} onOpenChange={setOpen}>
          <DialogTrigger asChild><Button className="gradient-primary text-white"><Plus className="size-4 mr-1" /> {t("add_expense")}</Button></DialogTrigger>
          <DialogContent>
            <DialogHeader><DialogTitle>{t("add_expense")}</DialogTitle></DialogHeader>
            <div className="space-y-3">
              <div>
                <Label className="text-sm font-semibold">{t("expense_category")}</Label>
                <Input value={f.category} onChange={(e) => setF({ ...f, category: e.target.value })} list="expense-cats" />
                <datalist id="expense-cats">{PRESET.map((p) => <option key={p} value={p} />)}</datalist>
              </div>
              <div><Label className="text-sm font-semibold">{t("amount")}</Label><Input type="number" value={f.amount} onChange={(e) => setF({ ...f, amount: e.target.value })} /></div>
              <div><Label className="text-sm font-semibold">{t("note")}</Label><Input value={f.note} onChange={(e) => setF({ ...f, note: e.target.value })} /></div>
            </div>
            <DialogFooter><Button onClick={save} disabled={!f.amount} className="gradient-primary text-white">{t("save")}</Button></DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <Card className="gradient-sunset text-white shadow-elegant">
        <CardContent className="p-5">
          <div className="text-sm text-white/80">{lang === "bn" ? "মোট খরচ" : "Total Expense"}</div>
          <div className="text-3xl font-extrabold">{fmtMoney(total, lang)}</div>
        </CardContent>
      </Card>

      {rows.length === 0 ? (
        <Card><CardContent className="p-12 text-center text-muted-foreground">{t("no_data")}</CardContent></Card>
      ) : (
        <Card><CardContent className="p-0 divide-y">
          {rows.map((r: any) => (
            <div key={r.id} className="p-3 flex items-center gap-3">
              <div className="size-10 rounded-lg bg-warning/10 text-warning grid place-items-center"><Wallet className="size-5" /></div>
              <div className="flex-1 min-w-0">
                <div className="font-bold">{r.category}</div>
                <div className="text-xs text-muted-foreground">{new Date(r.created_at).toLocaleDateString(lang === "bn" ? "bn-BD" : "en-IN")} {r.note && `· ${r.note}`}</div>
              </div>
              <div className="text-lg font-extrabold text-warning">{fmtMoney(r.amount, lang)}</div>
              <Button size="icon" variant="ghost" onClick={() => del(r.id)}><Trash2 className="size-4 text-destructive" /></Button>
            </div>
          ))}
        </CardContent></Card>
      )}
    </div>
  );
}