"use client";

import { useMemo, useState } from "react";
import {
  PageHeader,
  StatCard,
  Panel,
  AdminButton,
  StatusBadge,
  FilterBar,
  SearchInput,
  SelectFilter,
  EmptyState,
} from "@/components/admin/ui";
import { formatCurrency } from "@/components/admin/adminNav";

type Payment = {
  id: string;
  orderId: string;
  customer: string;
  method: string;
  amount: number;
  status: "Paid" | "Pending" | "Failed" | "Refunded";
  date: string;
};

const initialPayments: Payment[] = [
  { id: "PAY-882", orderId: "ORD-1042", customer: "Ayesha Khan", method: "JazzCash", amount: 89900, status: "Paid", date: "2026-07-28" },
  { id: "PAY-881", orderId: "ORD-1041", customer: "Usman Tariq", method: "COD", amount: 125000, status: "Pending", date: "2026-07-28" },
  { id: "PAY-880", orderId: "ORD-1040", customer: "Fatima Noor", method: "Bank Transfer", amount: 45900, status: "Paid", date: "2026-07-27" },
  { id: "PAY-879", orderId: "ORD-1039", customer: "Ali Raza", method: "EasyPaisa", amount: 28900, status: "Paid", date: "2026-07-27" },
  { id: "PAY-878", orderId: "ORD-1037", customer: "Bilal Ahmed", method: "Stripe", amount: 18900, status: "Refunded", date: "2026-07-25" },
  { id: "PAY-877", orderId: "ORD-1036", customer: "Sana Javed", method: "PayPal", amount: 33400, status: "Failed", date: "2026-07-24" },
  { id: "PAY-876", orderId: "ORD-1035", customer: "Omar Sheikh", method: "JazzCash", amount: 51200, status: "Refunded", date: "2026-07-23" },
  { id: "PAY-875", orderId: "ORD-1034", customer: "Nida Malik", method: "Bank Transfer", amount: 97800, status: "Paid", date: "2026-07-22" },
];

export default function AdminPaymentsPage() {
  const [payments, setPayments] = useState(initialPayments);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [message, setMessage] = useState("");

  const filtered = useMemo(() => {
    return payments.filter((p) => {
      const q = search.toLowerCase();
      const matchesSearch =
        !q ||
        p.id.toLowerCase().includes(q) ||
        p.orderId.toLowerCase().includes(q) ||
        p.customer.toLowerCase().includes(q) ||
        p.method.toLowerCase().includes(q);
      const matchesStatus = statusFilter === "all" || p.status === statusFilter;
      return matchesSearch && matchesStatus;
    });
  }, [payments, search, statusFilter]);

  const stats = useMemo(() => {
    return {
      total: payments.reduce((s, p) => s + (p.status === "Paid" ? p.amount : 0), 0),
      pending: payments.filter((p) => p.status === "Pending").length,
      failed: payments.filter((p) => p.status === "Failed").length,
      refunded: payments.filter((p) => p.status === "Refunded").length,
    };
  }, [payments]);

  const flash = (text: string) => {
    setMessage(text);
    window.setTimeout(() => setMessage(""), 2200);
  };

  const exportData = (format: string) => {
    flash(`Exported ${filtered.length} transactions as ${format}`);
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Payments"
        description="Track transactions, refunds, and failed payments."
        actions={
          <>
            <AdminButton variant="secondary" onClick={() => exportData("CSV")}>Export CSV</AdminButton>
            <AdminButton variant="secondary" onClick={() => exportData("Excel")}>Export Excel</AdminButton>
            <AdminButton variant="ghost" onClick={() => exportData("PDF")}>Export PDF</AdminButton>
          </>
        }
      />

      {message ? (
        <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm text-emerald-800">
          {message}
        </div>
      ) : null}

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Collected" value={formatCurrency(stats.total)} tone="success" />
        <StatCard label="Pending" value={stats.pending} tone="warning" />
        <StatCard label="Failed" value={stats.failed} tone="danger" />
        <StatCard label="Refunds" value={stats.refunded} tone="info" />
      </div>

      <Panel title="Transactions">
        <FilterBar>
          <SearchInput value={search} onChange={setSearch} placeholder="Search payment, order, customer…" />
          <SelectFilter
            value={statusFilter}
            onChange={setStatusFilter}
            options={[
              { value: "all", label: "All statuses" },
              { value: "Paid", label: "Paid" },
              { value: "Pending", label: "Pending" },
              { value: "Failed", label: "Failed" },
              { value: "Refunded", label: "Refunded" },
            ]}
          />
        </FilterBar>

        {filtered.length === 0 ? (
          <EmptyState title="No transactions found" description="Adjust search or status filters." />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full min-w-[800px] text-left text-sm">
              <thead>
                <tr className="border-b border-border text-xs uppercase tracking-wide text-muted-foreground">
                  <th className="pb-2 font-semibold">Transaction</th>
                  <th className="pb-2 font-semibold">Order</th>
                  <th className="pb-2 font-semibold">Customer</th>
                  <th className="pb-2 font-semibold">Method</th>
                  <th className="pb-2 font-semibold">Amount</th>
                  <th className="pb-2 font-semibold">Status</th>
                  <th className="pb-2 font-semibold">Date</th>
                  <th className="pb-2 font-semibold">Actions</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((payment) => (
                  <tr key={payment.id} className="border-b border-border/60">
                    <td className="py-3 font-semibold">{payment.id}</td>
                    <td className="py-3">
                      <AdminButton href={`/admin/orders/${payment.orderId}`} variant="ghost">
                        {payment.orderId}
                      </AdminButton>
                    </td>
                    <td className="py-3">{payment.customer}</td>
                    <td className="py-3">{payment.method}</td>
                    <td className="py-3 font-semibold">{formatCurrency(payment.amount)}</td>
                    <td className="py-3"><StatusBadge status={payment.status} /></td>
                    <td className="py-3 text-muted-foreground">{payment.date}</td>
                    <td className="py-3">
                      <div className="flex flex-wrap gap-1.5">
                        {payment.status === "Paid" ? (
                          <AdminButton
                            variant="secondary"
                            onClick={() => {
                              setPayments((prev) =>
                                prev.map((p) => (p.id === payment.id ? { ...p, status: "Refunded" } : p)),
                              );
                              flash(`Refunded ${payment.id}`);
                            }}
                          >
                            Refund
                          </AdminButton>
                        ) : null}
                        {payment.status === "Failed" ? (
                          <AdminButton
                            variant="secondary"
                            onClick={() => {
                              setPayments((prev) =>
                                prev.map((p) => (p.id === payment.id ? { ...p, status: "Pending" } : p)),
                              );
                              flash(`Retry queued for ${payment.id}`);
                            }}
                          >
                            Retry
                          </AdminButton>
                        ) : null}
                        <AdminButton variant="ghost" onClick={() => flash(`Details for ${payment.id}`)}>
                          View
                        </AdminButton>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Panel>

      <div className="grid gap-4 xl:grid-cols-2">
        <Panel title="Failed Payments">
          <div className="space-y-2">
            {payments.filter((p) => p.status === "Failed").map((p) => (
              <div key={p.id} className="flex items-center justify-between rounded-xl border border-border px-3 py-2.5 text-sm">
                <div>
                  <p className="font-semibold">{p.id}</p>
                  <p className="text-xs text-muted-foreground">{p.customer} · {p.method}</p>
                </div>
                <p className="font-semibold">{formatCurrency(p.amount)}</p>
              </div>
            ))}
            {payments.filter((p) => p.status === "Failed").length === 0 ? (
              <EmptyState title="No failed payments" />
            ) : null}
          </div>
        </Panel>
        <Panel title="Recent Refunds">
          <div className="space-y-2">
            {payments.filter((p) => p.status === "Refunded").map((p) => (
              <div key={p.id} className="flex items-center justify-between rounded-xl border border-border px-3 py-2.5 text-sm">
                <div>
                  <p className="font-semibold">{p.id}</p>
                  <p className="text-xs text-muted-foreground">{p.orderId}</p>
                </div>
                <p className="font-semibold">{formatCurrency(p.amount)}</p>
              </div>
            ))}
            {payments.filter((p) => p.status === "Refunded").length === 0 ? (
              <EmptyState title="No refunds yet" />
            ) : null}
          </div>
        </Panel>
      </div>
    </div>
  );
}