"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { CreditCard, Search } from "lucide-react";
import { Badge, Button, EmptyState, Input, PageHeader, Panel, Skeleton } from "@/components/ui/kit";
import { useSession } from "@/components/session";
import { FilterTabs, Pager } from "@/components/admin/common";
import { RefundDialog } from "@/components/admin/refund-dialog";
import { PAYMENT_STATUS } from "@/components/billing/plan-badge";
import { qs } from "@/lib/api";
import { formatDateTime, formatPaise } from "@/lib/format";
import { useApi } from "@/lib/use-api";
import type { Payment } from "@/lib/types";

const FILTERS = [
  ["", "All"],
  ["paid", "Paid"],
  ["failed", "Failed"],
  ["partially_refunded", "Part refunded"],
  ["refunded", "Refunded"],
] as const;

export default function AdminPaymentsPage() {
  const { can } = useSession();
  const [status, setStatus] = useState<(typeof FILTERS)[number][0]>("");
  const [term, setTerm] = useState("");
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [refund, setRefund] = useState<Payment | null>(null);
  useEffect(() => {
    const t = setTimeout(() => setQ(term.trim()), 250);
    return () => clearTimeout(t);
  }, [term]);
  const { data, reload } = useApi<{ data: Payment[]; meta: { total: number; last_page: number } }>(`/admin/payments${qs({ status, q, page })}`);
  const rows = data?.data ?? [];
  return (
    <>
      <PageHeader title="Payments" description="Every wallet recharge and plan payment across the platform. Refunds go back through Razorpay." />
      <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center">
        <FilterTabs label="Filter payments" value={status} onChange={(v) => (setStatus(v), setPage(1))} options={FILTERS} />
        <div className="relative md:ml-auto md:w-72">
          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
          <Input aria-label="Search payments" placeholder="Customer, receipt or Razorpay id" className="w-full pl-9" value={term} onChange={(e) => (setTerm(e.target.value), setPage(1))} />
        </div>
      </div>
      <Panel>
        {!data ? (
          <Skeleton className="m-5 h-40" />
        ) : rows.length === 0 ? (
          <EmptyState icon={<CreditCard />} title="No payments found" body="Payments appear here once customers recharge or pay for a plan." />
        ) : (
          <>
            <div className="relative overflow-x-auto">
              <table className="w-full min-w-[820px] text-sm">
                <thead className="border-b border-line text-left text-[13px] text-muted">
                  <tr>
                    <th className="px-5 py-3 font-medium">Date</th>
                    <th className="px-3 py-3 font-medium">Customer</th>
                    <th className="px-3 py-3 font-medium">For</th>
                    <th className="px-3 py-3 text-right font-medium">Amount</th>
                    <th className="px-3 py-3 text-right font-medium">GST</th>
                    <th className="px-3 py-3 font-medium">Status</th>
                    <th className="px-5 py-3 text-right font-medium">
                      <span className="sr-only">Actions</span>
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-line">
                  {rows.map((p) => (
                    <tr key={p.id}>
                      <td className="tabular whitespace-nowrap px-5 py-3 text-muted">{formatDateTime(p.paid_at ?? p.created_at)}</td>
                      <td className="px-3 py-3">
                        <Link href={`/admin/customers/${p.organization?.id}`} className="font-medium hover:text-teal">
                          {p.organization?.name}
                        </Link>
                        <p className="text-[13px] text-muted">{p.provider === "wallet" ? "Paid from wallet" : (p.provider_payment_id ?? p.receipt)}</p>
                      </td>
                      <td className="px-3 py-3">{p.purpose === "recharge" ? "Wallet recharge" : "Plan"}</td>
                      <td className="tabular px-3 py-3 text-right">
                        {formatPaise(p.total_paise)}
                        {p.refunded_paise > 0 && <span className="block text-xs text-muted">{formatPaise(p.refunded_paise)} refunded</span>}
                      </td>
                      <td className="tabular px-3 py-3 text-right text-muted">{formatPaise(p.tax_paise)}</td>
                      <td className="px-3 py-3">
                        <Badge tone={PAYMENT_STATUS[p.status]?.tone ?? "neutral"}>{PAYMENT_STATUS[p.status]?.label ?? p.status}</Badge>
                        {p.status === "failed" && p.failure_reason && <p className="mt-0.5 max-w-[200px] text-xs text-muted">{p.failure_reason}</p>}
                      </td>
                      <td className="px-5 py-3 text-right">
                        {can("platform.billing.manage") && (p.status === "paid" || p.status === "partially_refunded") && p.provider !== "wallet" && (
                          <Button size="sm" variant="ghost" onClick={() => setRefund(p)}>
                            Refund
                          </Button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <Pager page={page} last={data.meta.last_page} total={data.meta.total} onPage={setPage} />
          </>
        )}
      </Panel>
      {refund && <RefundDialog payment={refund} onClose={() => setRefund(null)} onDone={() => (setRefund(null), reload())} />}
    </>
  );
}