import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { CreditCard, Sparkles, Wallet } from "lucide-react";

import { supabase } from "@/integrations/supabase/client";
import { PortalShell } from "@/components/portal/PortalShell";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { kes } from "@/lib/portal";

export const Route = createFileRoute("/_authenticated/payments")({
  head: () => ({
    meta: [
      { title: "Payments — Flexflares Cyber Services" },
      { name: "description", content: "Your wallet balance, deposits and complete payment history in Kenyan Shillings." },
      { property: "og:title", content: "Payments — Flexflares Cyber Services" },
      { property: "og:description", content: "Track wallet top-ups and service payments." },
    ],
  }),
  component: PaymentsPage,
});

type Payment = {
  id: string;
  amount: number;
  method: string;
  reference: string | null;
  description: string | null;
  created_at: string;
};
type Deposit = { id: string; amount: number; status: string; mpesa_reference: string; created_at: string };

function PaymentsPage() {
  const [payments, setPayments] = useState<Payment[]>([]);
  const [deposits, setDeposits] = useState<Deposit[]>([]);
  const [balance, setBalance] = useState(0);
  const [points, setPoints] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      const { data: u } = await supabase.auth.getUser();
      if (!u.user) return;
      const [p, d, w, pr] = await Promise.all([
        supabase.from("payments").select("id, amount, method, reference, description, created_at").order("created_at", { ascending: false }),
        supabase.from("deposits").select("id, amount, status, mpesa_reference, created_at").order("created_at", { ascending: false }).limit(20),
        supabase.from("wallets").select("balance").eq("user_id", u.user.id).maybeSingle(),
        supabase.from("profiles").select("loyalty_points").eq("id", u.user.id).maybeSingle(),
      ]);
      setPayments((p.data ?? []) as Payment[]);
      setDeposits((d.data ?? []) as Deposit[]);
      setBalance(Number(w.data?.balance ?? 0));
      setPoints(Number(pr.data?.loyalty_points ?? 0));
      setLoading(false);
    })();
  }, []);

  const totalSpent = payments.reduce((sum, p) => sum + Number(p.amount), 0);

  return (
    <PortalShell
      title="Payments"
      description="Wallet balance, top-ups and every payment you have made."
      actions={
        <Button asChild>
          <Link to="/deposits">Top up wallet</Link>
        </Button>
      }
    >
      <div className="grid gap-3 sm:grid-cols-3">
        <StatCard icon={<Wallet className="h-5 w-5 text-primary" />} label="Wallet balance" value={kes(balance)} loading={loading} />
        <StatCard icon={<CreditCard className="h-5 w-5 text-primary" />} label="Total spent" value={kes(totalSpent)} loading={loading} />
        <StatCard icon={<Sparkles className="h-5 w-5 text-primary" />} label="Loyalty points" value={points.toLocaleString()} loading={loading} />
      </div>

      <h2 className="mt-8 text-lg font-semibold">Payment history</h2>
      {loading ? (
        <Skeleton className="mt-3 h-40 w-full rounded-xl" />
      ) : payments.length === 0 ? (
        <p className="mt-3 text-sm text-muted-foreground">No payments yet.</p>
      ) : (
        <div className="mt-3 grid gap-2">
          {payments.map((p) => (
            <Card key={p.id} className="glass">
              <CardContent className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 p-4">
                <div className="min-w-0">
                  <div className="truncate text-sm font-medium">{p.description ?? "Service payment"}</div>
                  <div className="truncate text-xs text-muted-foreground">
                    {new Date(p.created_at).toLocaleString()} {p.reference ? `· ${p.reference}` : ""}
                  </div>
                </div>
                <div className="shrink-0 text-right">
                  <div className="font-semibold">−{kes(Number(p.amount))}</div>
                  <Badge variant="outline" className="capitalize text-[10px]">
                    {p.method}
                  </Badge>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      <h2 className="mt-8 text-lg font-semibold">Wallet top-ups</h2>
      {loading ? (
        <Skeleton className="mt-3 h-32 w-full rounded-xl" />
      ) : deposits.length === 0 ? (
        <p className="mt-3 text-sm text-muted-foreground">No deposits yet.</p>
      ) : (
        <div className="mt-3 grid gap-2">
          {deposits.map((d) => (
            <Card key={d.id} className="glass">
              <CardContent className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 p-4">
                <div className="min-w-0">
                  <div className="truncate text-sm font-medium">{kes(Number(d.amount))}</div>
                  <div className="truncate text-xs text-muted-foreground">
                    {new Date(d.created_at).toLocaleString()} · {d.mpesa_reference}
                  </div>
                </div>
                <Badge variant={d.status === "approved" ? "default" : d.status === "rejected" ? "destructive" : "secondary"} className="capitalize">
                  {d.status}
                </Badge>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </PortalShell>
  );
}

function StatCard({ icon, label, value, loading }: { icon: React.ReactNode; label: string; value: string; loading: boolean }) {
  return (
    <Card className="glass">
      <CardContent className="flex items-center gap-3 p-5">
        <span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-primary/10">{icon}</span>
        <div className="min-w-0">
          <div className="text-xs text-muted-foreground">{label}</div>
          {loading ? <Skeleton className="mt-1 h-5 w-20" /> : <div className="truncate text-lg font-semibold">{value}</div>}
        </div>
      </CardContent>
    </Card>
  );
}