import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Plus, Receipt } from "lucide-react";
import { useT, fmtMoney } from "@/lib/i18n";

export const Route = createFileRoute("/_authenticated/sales")({
  head: () => ({ meta: [{ title: "বিক্রয় তালিকা" }] }),
  component: SalesList,
});

function SalesList() {
  const { t, lang } = useT();
  const { data: sales = [] } = useQuery({
    queryKey: ["sales"],
    queryFn: async () => (await supabase.from("sales").select("*, sale_items(*)").order("created_at", { ascending: false }).limit(200)).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("sales")}</h1>
        <Link to="/pos"><Button className="gradient-primary text-white"><Plus className="size-4 mr-1" /> {t("new_sale")}</Button></Link>
      </div>

      {sales.length === 0 ? (
        <Card><CardContent className="p-12 text-center text-muted-foreground">{t("no_data")}</CardContent></Card>
      ) : (
        <div className="space-y-3">
          {sales.map((s: any) => (
            <Card key={s.id} className="shadow-card hover:shadow-elegant transition">
              <CardContent className="p-4">
                <div className="flex justify-between gap-3 flex-wrap">
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <Receipt className="size-4 text-primary" />
                      <span className="font-bold">{s.customer_name || t("walk_in")}</span>
                      {s.customer_phone && <span className="text-xs text-muted-foreground">{s.customer_phone}</span>}
                      {Number(s.due) > 0 && <Badge variant="destructive" className="text-xs">{t("due")}: {fmtMoney(s.due, lang)}</Badge>}
                    </div>
                    <div className="text-xs text-muted-foreground mt-1">{new Date(s.created_at).toLocaleString(lang === "bn" ? "bn-BD" : "en-IN")}</div>
                    <div className="text-sm text-muted-foreground mt-2 line-clamp-1">
                      {s.sale_items?.map((it: any) => `${it.product_name} × ${it.quantity}`).join(" · ")}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-xl font-extrabold text-primary">{fmtMoney(s.total, lang)}</div>
                    <div className="text-xs text-success">{t("profit")}: {fmtMoney(s.profit, lang)}</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}