import { createFileRoute, useRouter } from "@tanstack/react-router";
import { useState, useMemo, useEffect } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "sonner";
import { Trash2, Search, ShoppingCart, Printer, Plus, Minus } from "lucide-react";
import { useT, fmtMoney } from "@/lib/i18n";
import { Invoice } from "@/components/invoice";

export const Route = createFileRoute("/_authenticated/pos")({
  head: () => ({ meta: [{ title: "POS — দ্রুত বিক্রয়" }] }),
  component: POS,
});

type CartItem = { product_id: string | null; name: string; qty: number; price: number; cost: number; stock: number };

function POS() {
  const { t, lang } = useT();
  const router = useRouter();
  const qc = useQueryClient();
  const [cart, setCart] = useState<CartItem[]>([]);
  const [search, setSearch] = useState("");
  const [customerId, setCustomerId] = useState<string>("");
  const [discount, setDiscount] = useState(0);
  const [vatPct, setVatPct] = useState(0);
  const [paid, setPaid] = useState<number | "">("");
  const [paymentMethod, setPaymentMethod] = useState("cash");
  const [note, setNote] = useState("");
  const [saving, setSaving] = useState(false);
  const [lastSale, setLastSale] = useState<any>(null);

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

  useEffect(() => { if (profile?.vat_percent) setVatPct(Number(profile.vat_percent)); }, [profile]);

  const filtered = useMemo(() => {
    const s = search.toLowerCase().trim();
    if (!s) return products.slice(0, 12);
    return products.filter((p: any) =>
      p.name.toLowerCase().includes(s) || (p.sku || "").toLowerCase().includes(s) || (p.barcode || "").includes(s)
    ).slice(0, 20);
  }, [products, search]);

  const subtotal = cart.reduce((a, it) => a + it.qty * it.price, 0);
  const totalCost = cart.reduce((a, it) => a + it.qty * it.cost, 0);
  const vat = subtotal * (vatPct / 100);
  const total = Math.max(0, subtotal + vat - discount);
  const paidN = Number(paid) || 0;
  const due = Math.max(0, total - paidN);
  const profit = total - totalCost - vat;

  const addProduct = (p: any) => {
    setCart((c) => {
      const ex = c.find((x) => x.product_id === p.id);
      if (ex) return c.map((x) => x === ex ? { ...x, qty: x.qty + 1 } : x);
      return [...c, { product_id: p.id, name: p.name, qty: 1, price: Number(p.sale_price), cost: Number(p.cost_price), stock: Number(p.stock) }];
    });
    setSearch("");
  };
  const updateItem = (i: number, patch: Partial<CartItem>) => setCart((c) => c.map((x, idx) => (idx === i ? { ...x, ...patch } : x)));
  const removeItem = (i: number) => setCart((c) => c.filter((_, idx) => idx !== i));

  const handleSave = async (printAfter = false) => {
    if (cart.length === 0) return toast.error(lang === "bn" ? "কার্টে পণ্য যোগ করুন" : "Add items to cart");
    setSaving(true);
    try {
      const { data: u } = await supabase.auth.getUser();
      if (!u.user) throw new Error("Unauthorized");
      const customer = customers.find((c: any) => c.id === customerId);
      const { data: sale, error } = await supabase.from("sales").insert({
        user_id: u.user.id,
        customer_id: customerId || null,
        customer_name: customer?.name || null,
        customer_phone: customer?.phone || null,
        note: note || null,
        subtotal, discount, vat, total,
        total_cost: totalCost, profit,
        paid: paidN, due,
        payment_method: paymentMethod,
      }).select().single();
      if (error) throw error;
      const items = cart.map((it) => ({
        sale_id: sale.id, user_id: u.user!.id, product_id: it.product_id,
        product_name: it.name, quantity: it.qty, unit_price: it.price, unit_cost: it.cost,
        subtotal: it.qty * it.price,
      }));
      const { error: e2 } = await supabase.from("sale_items").insert(items);
      if (e2) throw e2;
      toast.success(lang === "bn" ? "বিক্রয় সম্পন্ন!" : "Sale completed!");
      qc.invalidateQueries();
      const saleData = { ...sale, items, customer_name: customer?.name, shop: profile };
      setLastSale(saleData);
      if (printAfter) setTimeout(() => window.print(), 200);
      // reset
      setCart([]); setDiscount(0); setPaid(""); setNote(""); setCustomerId("");
    } catch (e: any) {
      toast.error(e.message);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="max-w-[1500px] mx-auto">
      <div className="grid lg:grid-cols-[1fr_400px] gap-4 no-print">
        {/* Product picker */}
        <div className="space-y-4">
          <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
            <h1 className="text-2xl md:text-3xl font-extrabold truncate">{t("pos")}</h1>
            <div className="text-sm text-muted-foreground">{cart.length} {t("orders")}</div>
          </div>

          <Card className="shadow-card">
            <CardContent className="p-4 space-y-3">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
                <Input autoFocus placeholder={lang === "bn" ? "নাম / SKU / বারকোড লিখুন বা স্ক্যান করুন..." : "Name / SKU / barcode..."}
                  value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-11 text-base" />
              </div>
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 max-h-[55vh] overflow-y-auto">
                {filtered.map((p: any) => (
                  <button key={p.id} onClick={() => addProduct(p)}
                    className="text-left p-3 rounded-xl border bg-card hover:gradient-primary hover:text-white transition-all hover:shadow-elegant group">
                    <div className="font-semibold text-sm line-clamp-2">{p.name}</div>
                    <div className="text-xs text-muted-foreground group-hover:text-white/80 mt-1">{lang === "bn" ? "স্টক" : "Stock"}: {p.stock}</div>
                    <div className="font-bold text-primary group-hover:text-white mt-1">{fmtMoney(p.sale_price, lang)}</div>
                  </button>
                ))}
                {filtered.length === 0 && <p className="col-span-full text-center text-sm text-muted-foreground py-8">{t("no_data")}</p>}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Cart */}
        <Card className="shadow-elegant lg:sticky lg:top-20 h-fit">
          <CardContent className="p-4 space-y-3">
            <div className="flex items-center gap-2 pb-2 border-b">
              <ShoppingCart className="size-5 text-primary" />
              <h2 className="font-bold">{t("invoice")}</h2>
            </div>

            <div>
              <Label className="text-xs">{t("customer")}</Label>
              <Select value={customerId || "walkin"} onValueChange={(v) => setCustomerId(v === "walkin" ? "" : v)}>
                <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="walkin">{t("walk_in")}</SelectItem>
                  {customers.map((c: any) => <SelectItem key={c.id} value={c.id}>{c.name} {c.phone && `(${c.phone})`}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-1 max-h-72 overflow-y-auto">
              {cart.length === 0 ? (
                <p className="text-center text-sm text-muted-foreground py-6">{t("cart_empty")}</p>
              ) : cart.map((it, i) => (
                <div key={i} className="flex items-center gap-2 p-2 rounded-lg bg-muted/40 text-sm">
                  <div className="flex-1 min-w-0">
                    <div className="font-medium truncate">{it.name}</div>
                    <div className="text-xs text-muted-foreground">{fmtMoney(it.price, lang)} × {it.qty}</div>
                  </div>
                  <Input
                    type="number"
                    step="0.01"
                    min="0"
                    value={it.qty}
                    onChange={(e) => {
                      const v = e.target.value;
                      updateItem(i, { qty: v === "" ? 0 : Number(v) });
                    }}
                    onFocus={(e) => e.target.select()}
                    className="h-8 w-20 text-center font-bold"
                  />
                  <span className="font-bold w-20 text-right">{fmtMoney(it.qty * it.price, lang)}</span>
                  <Button size="icon" variant="ghost" className="size-7" onClick={() => removeItem(i)}><Trash2 className="size-3 text-destructive" /></Button>
                </div>
              ))}
            </div>

            <div className="space-y-2 pt-2 border-t text-sm">
              <Row label={t("subtotal")} value={fmtMoney(subtotal, lang)} />
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <Label className="text-xs">{t("discount")}</Label>
                  <Input type="number" value={discount || ""} onChange={(e) => setDiscount(Number(e.target.value) || 0)} className="h-9" />
                </div>
                <div>
                  <Label className="text-xs">{t("vat")} %</Label>
                  <Input type="number" value={vatPct || ""} onChange={(e) => setVatPct(Number(e.target.value) || 0)} className="h-9" />
                </div>
              </div>
              <Row label={`${t("vat")} (${vatPct}%)`} value={fmtMoney(vat, lang)} />
              <Row label={t("total")} value={fmtMoney(total, lang)} big />
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <Label className="text-xs">{t("paid")}</Label>
                  <Input type="number" value={paid} onChange={(e) => setPaid(e.target.value === "" ? "" : Number(e.target.value))} className="h-9" />
                </div>
                <div>
                  <Label className="text-xs">{t("payment_method")}</Label>
                  <Select value={paymentMethod} onValueChange={setPaymentMethod}>
                    <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="cash">{t("cash")}</SelectItem>
                      <SelectItem value="bank">{t("bank")}</SelectItem>
                      <SelectItem value="mobile">{t("mobile_banking")}</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <Row label={t("due")} value={fmtMoney(due, lang)} highlight={due > 0} />
            </div>

            <div className="grid grid-cols-2 gap-2 pt-2">
              <Button onClick={() => handleSave(false)} disabled={saving || cart.length === 0} variant="outline">
                {t("save")}
              </Button>
              <Button onClick={() => handleSave(true)} disabled={saving || cart.length === 0} className="gradient-primary text-white">
                <Printer className="size-4 mr-1" /> {t("complete_sale")}
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Print area */}
      {lastSale && <Invoice sale={lastSale} shop={profile} lang={lang} />}
    </div>
  );
}

function Row({ label, value, big, highlight }: { label: string; value: string; big?: boolean; highlight?: boolean }) {
  return (
    <div className={`flex justify-between ${big ? "text-lg font-extrabold pt-1 border-t" : ""} ${highlight ? "text-destructive font-bold" : ""}`}>
      <span>{label}:</span><span>{value}</span>
    </div>
  );
}