import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { FileSpreadsheet } from "lucide-react";
import { useT, fmtMoney } from "@/lib/i18n";
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Tooltip, CartesianGrid } from "recharts";
import { downloadCSV } from "@/lib/export-csv";
import { toast } from "sonner";

export const Route = createFileRoute("/_authenticated/reports")({
  head: () => ({ meta: [{ title: "রিপোর্ট" }] }),
  component: ReportsPage,
});

function ReportsPage() {
  const { t, lang } = useT();
  const [range, setRange] = useState<"day" | "month" | "year">("month");
  const fmt = (n: number) => fmtMoney(n, lang);

  const today = new Date().toISOString().slice(0, 10);
  const monthAgo = new Date(Date.now() - 30 * 86400000).toISOString().slice(0, 10);
  const [from, setFrom] = useState(monthAgo);
  const [to, setTo] = useState(today);

  const { data } = useQuery({
    queryKey: ["report", range, lang],
    queryFn: async () => {
      const now = new Date();
      let start: Date;
      if (range === "day") start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      else if (range === "month") start = new Date(now.getFullYear(), now.getMonth(), 1);
      else start = new Date(now.getFullYear(), 0, 1);

      const [salesRes, expRes] = await Promise.all([
        supabase.from("sales").select("created_at, total, total_cost, profit, vat").gte("created_at", start.toISOString()),
        supabase.from("expenses").select("created_at, amount, category").gte("created_at", start.toISOString()),
      ]);

      const sales = salesRes.data || [];
      const exps = expRes.data || [];
      const revenue = sales.reduce((a, r) => a + Number(r.total), 0);
      const cost = sales.reduce((a, r) => a + Number(r.total_cost), 0);
      const grossProfit = sales.reduce((a, r) => a + Number(r.profit), 0);
      const expense = exps.reduce((a, r) => a + Number(r.amount), 0);
      const netProfit = grossProfit - expense;

      const byDay = new Map<string, { date: string; revenue: number; profit: number; expense: number }>();
      for (const r of sales) {
        const d = new Date(r.created_at);
        const k = d.toISOString().slice(0, 10);
        const ex = byDay.get(k) || { date: d.toLocaleDateString(lang === "bn" ? "bn-BD" : "en-IN", { day: "numeric", month: "short" }), revenue: 0, profit: 0, expense: 0 };
        ex.revenue += Number(r.total); ex.profit += Number(r.profit);
        byDay.set(k, ex);
      }
      for (const r of exps) {
        const d = new Date(r.created_at);
        const k = d.toISOString().slice(0, 10);
        const ex = byDay.get(k) || { date: d.toLocaleDateString(lang === "bn" ? "bn-BD" : "en-IN", { day: "numeric", month: "short" }), revenue: 0, profit: 0, expense: 0 };
        ex.expense += Number(r.amount);
        byDay.set(k, ex);
      }
      const chart = Array.from(byDay.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([, v]) => v);

      return { revenue, cost, grossProfit, expense, netProfit, count: sales.length, chart };
    },
  });

  const exportSales = async () => {
    const startISO = new Date(from + "T00:00:00").toISOString();
    const endISO = new Date(to + "T23:59:59").toISOString();
    const { data: items, error } = await supabase
      .from("sale_items")
      .select("quantity, unit_price, line_total, products(name, sku, unit), sales!inner(invoice_no, created_at, customer_name, total, paid, due)")
      .gte("sales.created_at", startISO)
      .lte("sales.created_at", endISO)
      .order("created_at", { referencedTable: "sales", ascending: false });
    if (error) return toast.error(error.message);
    const rows: (string | number)[][] = [
      ["Date", "Invoice", "Customer", "Product", "SKU", "Qty", "Unit", "Price", "Line Total"],
      ...(items || []).map((it: any) => [
        new Date(it.sales.created_at).toLocaleString(),
        it.sales.invoice_no || "",
        it.sales.customer_name || "",
        it.products?.name || "",
        it.products?.sku || "",
        Number(it.quantity) || 0,
        it.products?.unit || "",
        Number(it.unit_price) || 0,
        Number(it.line_total) || 0,
      ]),
    ];
    const total = (items || []).reduce((a: number, it: any) => a + Number(it.line_total || 0), 0);
    rows.push([]);
    rows.push(["", "", "", "", "", "", "", "TOTAL", total]);
    downloadCSV(`sales-${from}_to_${to}`, rows);
  };

  return (
    <div className="space-y-6 max-w-6xl mx-auto">
      <h1 className="text-2xl md:text-3xl font-extrabold">{t("reports")}</h1>

      <Card className="shadow-card">
        <CardHeader><CardTitle className="text-base">{lang === "bn" ? "বিক্রয় রিপোর্ট (Excel)" : "Sales Report (Excel)"}</CardTitle></CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_1fr_auto] items-end">
          <div className="space-y-1.5">
            <Label className="text-xs">{lang === "bn" ? "তারিখ থেকে" : "From"}</Label>
            <Input type="date" value={from} onChange={(e) => setFrom(e.target.value)} />
          </div>
          <div className="space-y-1.5">
            <Label className="text-xs">{lang === "bn" ? "তারিখ পর্যন্ত" : "To"}</Label>
            <Input type="date" value={to} onChange={(e) => setTo(e.target.value)} />
          </div>
          <Button onClick={exportSales} className="gradient-primary text-white">
            <FileSpreadsheet className="size-4 mr-1" /> {lang === "bn" ? "এক্সেল ডাউনলোড" : "Download Excel"}
          </Button>
        </CardContent>
      </Card>

      <Tabs value={range} onValueChange={(v) => setRange(v as any)}>
        <TabsList>
          <TabsTrigger value="day">{t("today")}</TabsTrigger>
          <TabsTrigger value="month">{t("this_month")}</TabsTrigger>
          <TabsTrigger value="year">{t("this_year")}</TabsTrigger>
        </TabsList>

        <TabsContent value={range} className="space-y-6 mt-4">
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
            <Stat gradient="gradient-ocean" label={t("revenue")} value={fmt(data?.revenue ?? 0)} />
            <Stat gradient="gradient-violet" label={lang === "bn" ? "ক্রয়মূল্য" : "Cost"} value={fmt(data?.cost ?? 0)} />
            <Stat gradient="gradient-forest" label={t("profit")} value={fmt(data?.grossProfit ?? 0)} />
            <Stat gradient="gradient-sunset" label={t("expenses")} value={fmt(data?.expense ?? 0)} />
            <Stat gradient="gradient-gold" label={lang === "bn" ? "নিট লাভ" : "Net Profit"} value={fmt(data?.netProfit ?? 0)} />
          </div>

          <Card className="shadow-card">
            <CardHeader><CardTitle>{t("daily_breakdown")}</CardTitle></CardHeader>
            <CardContent className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data?.chart || []}>
                  <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                  <XAxis dataKey="date" fontSize={11} stroke="var(--muted-foreground)" />
                  <YAxis fontSize={11} stroke="var(--muted-foreground)" />
                  <Tooltip contentStyle={{ backgroundColor: "var(--popover)", border: "1px solid var(--border)", borderRadius: 8 }} />
                  <Bar dataKey="revenue" fill="var(--chart-2)" name={t("revenue")} radius={[6, 6, 0, 0]} />
                  <Bar dataKey="profit" fill="var(--chart-1)" name={t("profit")} radius={[6, 6, 0, 0]} />
                  <Bar dataKey="expense" fill="var(--chart-3)" name={t("expenses")} radius={[6, 6, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}

function Stat({ gradient, label, value }: any) {
  return (
    <Card className={`${gradient} text-white border-0 shadow-elegant`}>
      <CardContent className="p-4">
        <p className="text-xs text-white/80">{label}</p>
        <p className="text-xl font-extrabold mt-1">{value}</p>
      </CardContent>
    </Card>
  );
}