"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  IndianRupee,
  CheckCircle2,
  XCircle,
  Clock,
  RefreshCw,
  HelpCircle,
  Copy,
  Check,
} from "lucide-react";
import { useAdminTransactions } from "../hooks/transaction.hooks";
import { PaginationBar } from "@/components/common/PaginationBar";
import { formatDateTime } from "@/lib/format-date";
import { useTaskSocket } from "@/hooks/useTaskSocket";
import { useAppSelector } from "@/lib/store";

const STATUS_OPTIONS = [
  { label: "All", value: "ALL" },
  { label: "Success", value: "SUCCESS" },
  { label: "Pending", value: "INITIATED" },
  { label: "Failed", value: "FAILED" },
  { label: "Refunded", value: "REFUNDED" },
];

const STATUS_STYLES: Record<string, { label: string; color: string; bg: string; border: string; icon: React.ReactNode }> = {
  SUCCESS:  { label: "Success",  color: "#FFFFFF", bg: "#16A34A", border: "#16A34A", icon: <CheckCircle2 size={12} /> },
  INITIATED:{ label: "Pending",  color: "#B45309", bg: "#FFFBEB", border: "#FCD34D", icon: <Clock size={12} /> },
  FAILED:   { label: "Failed",   color: "#DC2626", bg: "#FEF2F2", border: "#FCA5A5", icon: <XCircle size={12} /> },
  REFUNDED: { label: "Refunded", color: "#2563EB", bg: "#EFF6FF", border: "#93C5FD", icon: <RefreshCw size={12} /> },
};

const INVOICE_STATUS_STYLES: Record<string, { color: string; bg: string; border: string }> = {
  PAID:          { color: "#FFFFFF", bg: "#16A34A", border: "#16A34A" },
  SENT:          { color: "#B45309", bg: "#FFFBEB", border: "#FCD34D" },
  DRAFT:         { color: "#6B7280", bg: "#F3F4F6", border: "#D1D5DB" },
  OVERDUE:       { color: "#DC2626", bg: "#FEF2F2", border: "#FCA5A5" },
  CANCELLED:     { color: "#6B7280", bg: "#F3F4F6", border: "#D1D5DB" },
  PARTIALLY_PAID:{ color: "#2563EB", bg: "#EFF6FF", border: "#93C5FD" },
};

const FALLBACK = { color: "#374151", bg: "#F3F4F6", border: "#D1D5DB", icon: <HelpCircle size={12} /> };

function StatusPill({ label, color, bg, border, icon }: { label: string; color: string; bg: string; border: string; icon?: React.ReactNode }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "2px 8px", borderRadius: 9999,
      border: `1px solid ${border}`, background: bg, color,
      fontSize: 10, fontWeight: 600, whiteSpace: "nowrap",
    }}>
      {icon}{label}
    </span>
  );
}

function PayStatusBadge({ status }: { status: string }) {
  const cfg = STATUS_STYLES[status];
  return <StatusPill label={cfg?.label ?? status} color={cfg?.color ?? FALLBACK.color} bg={cfg?.bg ?? FALLBACK.bg} border={cfg?.border ?? FALLBACK.border} icon={cfg?.icon ?? FALLBACK.icon} />;
}

function InvoiceStatusBadge({ status }: { status: string }) {
  const cfg = INVOICE_STATUS_STYLES[status];
  return <StatusPill label={status.replace(/_/g, " ")} color={cfg?.color ?? FALLBACK.color} bg={cfg?.bg ?? FALLBACK.bg} border={cfg?.border ?? FALLBACK.border} />;
}

function CopyRef({ value }: { value: string }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard.writeText(value);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
      <span style={{ fontFamily: "monospace", fontSize: 10, color: "hsl(var(--muted-foreground))", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 160, display: "block" }} title={value}>
        {value}
      </span>
      <button onClick={copy} title="Copy" style={{ flexShrink: 0, background: "none", border: "none", cursor: "pointer", padding: 2, borderRadius: 4, color: copied ? "#16A34A" : "hsl(var(--muted-foreground))", display: "flex", alignItems: "center" }}>
        {copied ? <Check size={11} /> : <Copy size={11} />}
      </button>
    </div>
  );
}

export function TransactionDashboard() {
  const [status, setStatus] = useState("ALL");
  const [page, setPage] = useState(1);
  const orgId = useAppSelector((s) => s.auth.user?.organizationId);
  useTaskSocket(orgId, ["admin-transactions"]);

  const { data, isLoading } = useAdminTransactions({ page, limit: 20, status });
  const transactions = Array.isArray(data?.data) ? data.data : [];
  const meta = data?.meta;

  return (
    <div className="space-y-6 w-full max-w-full min-w-0">

      {/* Header */}
      <Card className="border-border bg-card shadow-sm">
        <CardHeader className="py-4 px-5">
          <h2 className="text-2xl font-bold tracking-tight text-foreground">Transactions</h2>
          <p className="text-muted-foreground text-sm mt-1">All payment transactions from your clients</p>
        </CardHeader>
      </Card>

      {/* Table Card */}
      <Card className="border-border bg-card shadow-sm">
        <CardHeader className="border-b border-border py-3 px-5">
          <div className="flex items-center gap-3">
            <Select value={status} onValueChange={(v) => { setStatus(v); setPage(1); }}>
              <SelectTrigger className="h-9 text-sm w-40 bg-background border-border">
                <SelectValue placeholder="All Status" />
              </SelectTrigger>
              <SelectContent>
                {STATUS_OPTIONS.map((s) => (
                  <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
            {meta && (
              <span className="text-xs text-muted-foreground ml-auto">
                {meta.total} total transactions
              </span>
            )}
          </div>
        </CardHeader>

        <CardContent className="p-0">
          {isLoading ? (
            <div className="p-6 space-y-3">
              {[1, 2, 3, 4].map((i) => <Skeleton key={i} className="h-14 w-full rounded-lg" />)}
            </div>
          ) : transactions.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 gap-2">
              <div className="rounded-full bg-muted p-4">
                <IndianRupee className="h-8 w-8 text-muted-foreground/50" />
              </div>
              <p className="text-sm font-semibold text-muted-foreground">No transactions found</p>
            </div>
          ) : (
            <>
              <div style={{ overflowX: "auto", width: "100%" }}>
                <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
                  <thead>
                    <tr style={{ background: "hsl(var(--muted))", borderBottom: "1px solid hsl(var(--border))" }}>
                      {["#", "Client", "Invoice", "Task", "Method", "Amount", "Pay Status", "Date", "Ref"].map((h) => (
                        <th key={h} style={{ padding: "10px 16px", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", color: "hsl(var(--muted-foreground))", whiteSpace: "nowrap" }}>
                          {h}
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {transactions.map((txn, idx) => (
                      <tr
                        key={txn.id}
                        style={{ borderBottom: "1px solid hsl(var(--border))", transition: "background 0.1s" }}
                        onMouseEnter={(e) => (e.currentTarget.style.background = "hsl(var(--muted))")}
                        onMouseLeave={(e) => (e.currentTarget.style.background = "")}
                      >
                        <td style={{ padding: "12px 16px", fontFamily: "monospace", fontSize: 12, color: "hsl(var(--muted-foreground))", whiteSpace: "nowrap" }}>
                          {(page - 1) * 20 + idx + 1}
                        </td>

                        <td style={{ padding: "12px 16px", whiteSpace: "nowrap" }}>
                          <div style={{ fontWeight: 600, fontSize: 13 }}>{txn.client.name}</div>
                          <div style={{ fontSize: 10, color: "hsl(var(--muted-foreground))", marginTop: 2 }}>{txn.client.email}</div>
                        </td>

                        <td style={{ padding: "12px 16px", whiteSpace: "nowrap" }}>
                          <div style={{ fontFamily: "monospace", fontSize: 12, fontWeight: 700, color: "hsl(var(--foreground))", marginBottom: 5 }}>
                            {txn.invoice.invoiceNumber}
                          </div>
                          <InvoiceStatusBadge status={txn.invoice.status} />
                        </td>

                        <td style={{ padding: "12px 16px", maxWidth: 150 }}>
                          {txn.invoice.task ? (
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <span style={{ display: "block", fontSize: 12, color: "hsl(var(--muted-foreground))", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 140, cursor: "default" }}>
                                  {txn.invoice.task.title}
                                </span>
                              </TooltipTrigger>
                              <TooltipContent><span>{txn.invoice.task.title}</span></TooltipContent>
                            </Tooltip>
                          ) : (
                            <span style={{ color: "hsl(var(--muted-foreground))", opacity: 0.4 }}>—</span>
                          )}
                        </td>

                        <td style={{ padding: "12px 16px", fontSize: 12, color: "hsl(var(--muted-foreground))", whiteSpace: "nowrap" }}>
                          {txn.method}
                        </td>

                        <td style={{ padding: "12px 16px", fontWeight: 700, fontSize: 13, whiteSpace: "nowrap" }}>
                          ₹{Number(txn.amount).toLocaleString("en-IN")}
                        </td>

                        <td style={{ padding: "12px 16px", whiteSpace: "nowrap" }}>
                          <PayStatusBadge status={txn.status} />
                        </td>

                        <td style={{ padding: "12px 16px", fontSize: 12, color: "hsl(var(--muted-foreground))", whiteSpace: "nowrap" }}>
                          {txn.paidAt ? formatDateTime(txn.paidAt) : formatDateTime(txn.createdAt)}
                        </td>

                        <td style={{ padding: "12px 16px", whiteSpace: "nowrap" }}>
                          {txn.transactionRef ? (
                            <CopyRef value={txn.transactionRef} />
                          ) : (
                            <span style={{ color: "hsl(var(--muted-foreground))", opacity: 0.4 }}>—</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              {meta && <PaginationBar meta={meta} onPageChange={setPage} />}
            </>
          )}
        </CardContent>
      </Card>
    </div>
  );
}