"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import DashboardSidebar from "@/app/components/astrologer/DashboardSidebar";

type Period = "WEEKLY" | "MONTHLY";
type SettlementStatus = "COMPLETED" | "PENDING" | "FAILED";

type Settlement = {
  id: string | number;
  date: string;
  period: string;
  periodStart?: string;
  periodEnd?: string;
  transactions: number;
  totalEarnings: number;
  platformCommission: number;
  settledAmount: number;
  status: SettlementStatus;
  settledOn?: string;
  [key: string]: any;
};

const STATIC_SETTLEMENTS: Settlement[] = [
  { id: 1, date: "07 Sep 2025", period: "Weekly Settlement", periodStart: "01 Sep 2025", periodEnd: "07 Sep 2025", transactions: 12, totalEarnings: 14750, platformCommission: 2300, settledAmount: 12450, status: "COMPLETED", settledOn: "08 Sep 2025, 10:24 AM" },
  { id: 2, date: "31 Aug 2025", period: "Weekly Settlement", periodStart: "25 Aug 2025", periodEnd: "31 Aug 2025", transactions: 10, totalEarnings: 12200, platformCommission: 2000, settledAmount: 10200, status: "COMPLETED", settledOn: "01 Sep 2025, 10:12 AM" },
  { id: 3, date: "24 Aug 2025", period: "Weekly Settlement", periodStart: "18 Aug 2025", periodEnd: "24 Aug 2025", transactions: 8, totalEarnings: 10500, platformCommission: 1750, settledAmount: 8750, status: "COMPLETED", settledOn: "25 Aug 2025, 11:05 AM" },
  { id: 4, date: "17 Aug 2025", period: "Weekly Settlement", periodStart: "11 Aug 2025", periodEnd: "17 Aug 2025", transactions: 9, totalEarnings: 11200, platformCommission: 1600, settledAmount: 9600, status: "FAILED", settledOn: "18 Aug 2025, 09:42 AM" },
  { id: 5, date: "10 Aug 2025", period: "Weekly Settlement", periodStart: "04 Aug 2025", periodEnd: "10 Aug 2025", transactions: 11, totalEarnings: 13000, platformCommission: 1700, settledAmount: 11300, status: "COMPLETED", settledOn: "11 Aug 2025, 10:18 AM" },
];

const STATIC_MONTHLY = [
  { id: 101, date: "30 Sep 2025", period: "Monthly Settlement", periodStart: "01 Sep 2025", periodEnd: "30 Sep 2025", transactions: 42, totalEarnings: 31200, platformCommission: 5300, settledAmount: 25900, status: "COMPLETED" as SettlementStatus, settledOn: "01 Oct 2025, 10:20 AM" },
  { id: 102, date: "31 Aug 2025", period: "Monthly Settlement", periodStart: "01 Aug 2025", periodEnd: "31 Aug 2025", transactions: 55, totalEarnings: 45850, platformCommission: 6000, settledAmount: 39850, status: "COMPLETED" as SettlementStatus, settledOn: "01 Sep 2025, 10:20 AM" },
  { id: 103, date: "31 Jul 2025", period: "Monthly Settlement", periodStart: "01 Jul 2025", periodEnd: "31 Jul 2025", transactions: 47, totalEarnings: 38100, platformCommission: 5100, settledAmount: 33000, status: "COMPLETED" as SettlementStatus, settledOn: "01 Aug 2025, 10:20 AM" },
];

function money(v: any) {
  const n = Number(v ?? 0);
  return Number.isFinite(n) ? `₹${Math.round(n).toLocaleString("en-IN")}` : "₹0";
}

function status(v: any): SettlementStatus {
  const s = String(v ?? "COMPLETED").toUpperCase();
  if (s.includes("FAIL")) return "FAILED";
  if (s.includes("PEND")) return "PENDING";
  return "COMPLETED";
}

function normalize(raw: any[]): Settlement[] {
  return raw.map((x: any, i) => {
    const range = x.settlementPeriod ?? x.period ?? x.dateRange ?? "";
    const start = x.periodStart ?? x.startDate ?? x.fromDate ?? "";
    const end = x.periodEnd ?? x.endDate ?? x.toDate ?? "";
    return {
      ...x,
      id: x.id ?? x.settlementId ?? x.referenceId ?? `live-${i}`,
      date: x.date ?? x.settlementDate ?? x.settledDate ?? x.periodEnd ?? "",
      period: x.periodLabel ?? x.settlementPeriodLabel ?? (range || "Settlement"),
      periodStart: start,
      periodEnd: end,
      transactions: Number(x.transactions ?? x.transactionCount ?? x.totalTransactions ?? 0),
      totalEarnings: Number(x.totalEarnings ?? x.grossAmount ?? x.earnings ?? 0),
      platformCommission: Number(x.platformCommission ?? x.commission ?? x.platformCharges ?? 0),
      settledAmount: Number(x.settledAmount ?? x.netAmount ?? x.payoutAmount ?? 0),
      status: status(x.status ?? x.statusLabel),
      settledOn: x.settledOn ?? x.settlementDateTime ?? x.processedAt ?? "",
    };
  });
}

function formatRange(s: Settlement) {
  if (s.periodStart && s.periodEnd) return `${s.periodStart} - ${s.periodEnd}`;
  if (s.periodStart || s.periodEnd) return [s.periodStart, s.periodEnd].filter(Boolean).join(" - ");
  return s.date || "Settlement period";
}

function dateParts(value: string) {
  const d = new Date(value);
  if (!Number.isNaN(d.getTime())) return { month: d.toLocaleString("en-US", { month: "short" }).toUpperCase(), day: d.getDate(), week: d.toLocaleString("en-US", { weekday: "short" }).toUpperCase() };
  const m = value.match(/^([A-Za-z]{3,9})\s+(\d{1,2})/);
  return { month: m?.[1]?.slice(0, 3).toUpperCase() || "SEP", day: Number(m?.[2] || 7), week: "SUN" };
}

function Icon({ name, size = 21 }: { name: string; size?: number }) {
  const p: any = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.9, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths: Record<string, React.ReactNode> = {
    wallet: <><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h14A1.5 1.5 0 0 1 21 6.5V18a2 2 0 0 1-2 2H5.5A2.5 2.5 0 0 1 3 17.5v-10Z"/><path d="M3 8h15.5A2.5 2.5 0 0 1 21 10.5V14h-5.5a2.5 2.5 0 0 1 0-5H21"/></>,
    hourglass: <><path d="M6 3h12M6 21h12M7 3c0 5 5 5 5 9s-5 4-5 9M17 3c0 5-5 5-5 9s5 4 5 9"/></>,
    chart: <><path d="M4 19V10M10 19V5M16 19v-7M22 19H2"/><path d="m15 7 3-3 3 3"/></>,
    calendar: <><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M7 2v4M17 2v4M3 9h18"/></>,
    file: <><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></>,
    check: <><path d="m5 12 4 4L19 6"/></>,
    x: <><path d="m7 7 10 10M17 7 7 17"/></>,
    chevron: <><path d="m9 5 7 7-7 7"/></>,
    left: <><path d="m15 18-6-6 6-6"/></>,
    right: <><path d="m9 18 6-6-6-6"/></>,
    send: <><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></>,
    info: <><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></>,
  };
  return <svg {...p}>{paths[name] || paths.file}</svg>;
}

export default function SettlementHistoryPage() {
  const router = useRouter();
  const [tab, setTab] = useState<Period>("WEEKLY");
  const [rows, setRows] = useState<Settlement[]>(STATIC_SETTLEMENTS);
  const [live, setLive] = useState(false);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(0);

  useEffect(() => {
    const token = localStorage.getItem("astrologerToken");
    if (!token) { router.replace("/astrologer/signin"); return; }
    fetch("/api/astrologer/wallet/settlement-history", { headers: { Accept: "application/json", Authorization: token }, cache: "no-store" })
      .then(async (r) => {
        const body = await r.json();
        if (!r.ok) throw new Error(body?.message || "Unable to load settlement history.");
        const data = Array.isArray(body?.data) ? body.data : [];
        if (data.length) { setRows(normalize(data)); setLive(true); }
      })
      .catch((e) => { console.error(e); toast.error("Using preview settlement data until live records are available."); })
      .finally(() => setLoading(false));
  }, [router]);

  const visible = tab === "WEEKLY" ? rows : (live ? rows.filter((x) => String(x.period).toUpperCase().includes("MONTH")) : STATIC_MONTHLY);
  const paged = visible.slice(page * 5, page * 5 + 5);

  const summary = useMemo(() => {
    const list = visible;
    const settled = list.filter((x) => x.status === "COMPLETED").reduce((a, x) => a + x.settledAmount, 0);
    const pending = list.filter((x) => x.status === "PENDING").reduce((a, x) => a + x.settledAmount, 0);
    const earnings = list.reduce((a, x) => a + x.totalEarnings, 0);
    return { settled, pending, earnings, count: list.length };
  }, [visible]);

  useEffect(() => setPage(0), [tab]);

  return <div className="page"><DashboardSidebar active="Wallet"/><main className="main">
    <div className="crumb">Home <span>›</span> Wallet <span>›</span> <b>Settlement History</b></div>
    <header><div><h1>Settlement History</h1><p>View your settlement records and track your earnings.</p></div></header>

    <div className="tabs"><button className={tab === "WEEKLY" ? "active" : ""} onClick={() => setTab("WEEKLY")}>Weekly</button><button className={tab === "MONTHLY" ? "active" : ""} onClick={() => setTab("MONTHLY")}>Monthly</button></div>

    <section className="stats">
      <Stat icon="wallet" label={tab === "WEEKLY" ? "TOTAL SETTLED (THIS WEEK)" : "TOTAL SETTLED (THIS MONTH)"} value={money(summary.settled)} sub={`${Math.max(summary.count, 0)} settlements`} green/>
      <Stat icon="hourglass" label="PENDING SETTLEMENT" value={money(summary.pending)} sub={`${visible.filter((x) => x.status === "PENDING").length} settlement`} />
      <Stat icon="chart" label="TOTAL EARNINGS" value={money(summary.earnings)} sub={tab === "WEEKLY" ? "This Week" : "This Month"} />
      <Stat icon="file" label="TOTAL SETTLEMENTS" value={String(summary.count)} sub={tab === "WEEKLY" ? "This Week" : "This Month"} />
    </section>

    <div className="range"><span><Icon name="calendar" size={23}/> {tab === "WEEKLY" ? "01 Sep 2025 - 07 Sep 2025" : "01 Sep 2025 - 30 Sep 2025"}</span><div><button onClick={() => setPage(Math.max(0, page - 1))}><Icon name="left"/></button><button onClick={() => setPage(Math.min(Math.max(0, Math.ceil(visible.length / 5) - 1), page + 1))}><Icon name="right"/></button></div></div>

    <section className="table-card">
      <table><thead><tr><th>Date</th><th>Settlement Period</th><th>Transactions</th><th>Settled Amount</th><th>Status</th><th>Action</th></tr></thead>
      <tbody>{loading ? <tr><td colSpan={6} className="empty">Loading settlement history...</td></tr> : paged.length === 0 ? <tr><td colSpan={6} className="empty"><Icon name="wallet" size={28}/><b>No settlement records found</b><span>Live settlement history is currently empty. Preview records are shown when the API returns no data.</span></td></tr> : paged.map((s) => { const d = dateParts(s.date); return <tr key={String(s.id)}><td><div className="datebox"><small>{d.month}</small><strong>{d.day}</strong><span>{d.week}</span></div></td><td><b>{s.period}</b><small>{formatRange(s)}</small></td><td>{s.transactions} Transactions</td><td><b>{money(s.settledAmount)}</b></td><td><span className={`status ${s.status.toLowerCase()}`}><Icon name={s.status === "FAILED" ? "x" : "check"} size={14}/>{s.status.charAt(0)+s.status.slice(1).toLowerCase()}</span></td><td><Link className="view" href={`/astrologer/wallet/settlement-history/${encodeURIComponent(String(s.id))}?type=${tab.toLowerCase()}`}>View Details <Icon name="chevron" size={17}/></Link></td></tr>})}</tbody></table>
    </section>

    <section className="summary-head"><h2><Icon name="chart"/> Settlement Summary</h2><button onClick={() => setTab("MONTHLY")}>View Details <Icon name="chevron" size={17}/></button></section>
    <section className="summary-grid"><SummaryCard title="This Month (Sep 2025)" amount="₹25,900" badge="↑ 12%" up/><SummaryCard title="Last Month (Aug 2025)" amount="₹39,850" badge="↓ 8%"/></section>
    <Link href="/astrologer/wallet/withdraw" className="withdraw"><Icon name="send"/> Submit Withdraw Request</Link>
    {!live && <div className="preview-note"><Icon name="info" size={16}/> Preview settlement data is being displayed because the live API currently returned an empty <code>data</code> array. When live records arrive, this page automatically uses them.</div>}
  </main><style jsx>{css}</style></div>;
}

function Stat({ icon, label, value, sub, green }: any) { return <div className="stat"><span className="stat-icon"><Icon name={icon}/></span><div><label>{label}</label><strong className={green ? "green" : ""}>{value}</strong><small>{sub}</small></div></div>; }
function SummaryCard({ title, amount, badge, up }: any) { return <div className="summary"><div><span>{title}</span><strong>{amount}</strong><small>{up ? "9 settlements vs last month" : "13 settlements vs previous"}</small></div><b className={up ? "badge up" : "badge down"}>{badge}</b></div>; }

const css = `
.page{min-height:100vh;display:flex;background:radial-gradient(circle at 68% 0%,rgba(135,75,30,.22),transparent 36%),#0b0d0e;color:#f5f0eb}.main{flex:1;min-width:0;padding:26px 30px 34px;background-image:radial-gradient(circle at 72% 30%,rgba(170,94,37,.08),transparent 28%)}.crumb{font-size:14px;color:#aaa39e;margin-bottom:6px}.crumb span{margin:0 9px;color:#6f6863}.crumb b{color:#f1ebe6}header h1{font-size:31px;margin:0 0 4px}header p{margin:0 0 17px;color:#c2bbb5}.tabs{width:530px;height:47px;display:grid;grid-template-columns:1fr 1fr;border:1px solid #554a43;border-radius:8px;overflow:hidden;margin-bottom:15px}.tabs button{border:0;background:rgba(31,27,24,.8);color:#f0e9e3;font-size:15px;font-weight:700;cursor:pointer}.tabs .active{background:#ffd600;color:#17130d}.stats,.table-card,.range,.summary,.note{border:1px solid rgba(121,104,94,.4);background:linear-gradient(135deg,rgba(39,32,28,.94),rgba(25,23,22,.96));border-radius:13px}.stats{display:grid;grid-template-columns:repeat(4,1fr);min-height:123px;padding:18px 20px;margin-bottom:11px}.stat{display:flex;align-items:center;gap:18px;padding:0 18px;border-right:1px solid rgba(116,98,88,.4)}.stat:last-child{border:0}.stat-icon{width:59px;height:59px;display:grid;place-items:center;border-radius:10px;color:#ffd600;border:1px solid #806b00;background:rgba(114,91,0,.22)}.stat label{display:block;color:#aaa29c;font-size:12px;letter-spacing:.2px}.stat strong{display:block;font-size:24px;margin-top:4px}.stat strong.green{color:#00dca6}.stat small{display:block;color:#948c85;margin-top:3px}.range{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 13px 0 20px;margin-bottom:11px}.range>span{display:flex;align-items:center;gap:13px;font-weight:700}.range>span svg{color:#f1ece8}.range button{width:38px;height:35px;margin-left:13px;border:1px solid #62564e;background:rgba(25,22,20,.75);border-radius:8px;color:#e9e2dc;cursor:pointer}.table-card{overflow:hidden}.table-card table{width:100%;border-collapse:collapse}.table-card th{height:48px;text-align:left;padding:0 25px;font-size:13px}.table-card td{padding:8px 25px;border-top:1px solid rgba(116,98,88,.25);font-size:13px}.table-card td:nth-child(2) b,.table-card td:nth-child(4) b{display:block;font-size:14px}.table-card td:nth-child(2) small{display:block;color:#9e958e;margin-top:4px}.datebox{width:50px;height:55px;background:#020202;border-radius:7px;text-align:center;display:flex;flex-direction:column;justify-content:center}.datebox small{font-size:11px;color:#ffd600;font-weight:800}.datebox strong{font-size:21px;line-height:19px}.datebox span{font-size:9px}.status{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:7px 12px;font-weight:700}.status.completed{color:#00dca6;background:rgba(0,156,113,.18);border:1px solid rgba(0,220,166,.35)}.status.pending{color:#ffd600;background:rgba(132,104,0,.18);border:1px solid rgba(255,214,0,.35)}.status.failed{color:#ff5661;background:rgba(156,27,39,.2);border:1px solid rgba(255,83,96,.45)}.view{display:inline-flex;align-items:center;gap:9px;color:#f3ece6;text-decoration:none;border:1px solid #665951;background:rgba(31,27,24,.72);border-radius:8px;padding:9px 13px;font-weight:600}.summary-head{display:flex;align-items:center;justify-content:space-between;margin:19px 3px 8px}.summary-head h2{font-size:16px;margin:0;display:flex;align-items:center;gap:11px}.summary-head h2 svg{color:#ffd600}.summary-head button{background:none;border:0;color:#c9c0b8;display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.summary{min-height:98px;padding:17px 21px;display:flex;align-items:center;justify-content:space-between}.summary span,.summary small{display:block;color:#aaa19a}.summary strong{display:block;font-size:22px;margin:5px 0}.badge{padding:8px 14px;border-radius:8px}.badge.up{color:#00dca6;background:rgba(0,156,113,.15);border:1px solid rgba(0,220,166,.35)}.badge.down{color:#ff5661;background:rgba(156,27,39,.15);border:1px solid rgba(255,83,96,.4)}.withdraw{height:50px;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:7px;background:#ffd600;color:#14110c;text-decoration:none;font-weight:800;font-size:16px}.preview-note{margin-top:11px;padding:10px 13px;color:#9d948d;font-size:12px;display:flex;align-items:center;gap:8px}.preview-note svg{color:#ffd600;flex:none}.empty{text-align:center;padding:35px!important;color:#9f968f}.empty b,.empty span{display:block;margin-top:7px}.empty svg{color:#ffd600}@media(max-width:1100px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat{min-height:72px}.summary-grid{grid-template-columns:1fr}}@media(max-width:760px){.main{padding:18px 12px}.tabs{width:100%}.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid rgba(116,98,88,.3);padding:13px 0}.stat:last-child{border-bottom:0}.range{height:auto;padding:10px}.range>span{font-size:12px}.table-card{overflow-x:auto}.table-card table{min-width:900px}.summary-grid{grid-template-columns:1fr}}
`;