"use client";

import clsx from "clsx";
import { useState } from "react";
import { PageHeader, Panel, Skeleton } from "@/components/ui/kit";
import { FilterTabs, Pager, StatTile } from "@/components/admin/common";
import { qs } from "@/lib/api";
import { formatDateTime, formatPaise } from "@/lib/format";
import { useApi } from "@/lib/use-api";
import type { Earnings, Invoice, Payment } from "@/lib/types";

type Entry = { id: number; type: "commission" | "markup" | "reversal" | "payout"; amount_paise: number; description: string; customer: { id: number; name: string } | null; created_at: string };
type Month = { month: string; commission_paise: number; markup_paise: number; reversals_paise: number; payouts_paise: number };
const TYPE: Record<Entry["type"], string> = { commission: "Commission", markup: "Markup", reversal: "Reversal", payout: "Payout" };
const monthLabel = (m: string) => new Date(`${m}-01T00:00:00Z`).toLocaleDateString("en-IN", { month: "short", year: "numeric", timeZone: "UTC" });

function Ledger() {
  const [page, setPage] = useState(1);
  const { data } = useApi<{ data: Entry[]; meta: { last_page: number; total: number; summary: Earnings } }>(`/reseller/commissions${qs({ page })}`);
  if (!data) return <Skeleton className="m-5 h-40" />;
  if (!data.data.length) return <p className="px-5 py-10 text-center text-sm text-muted">No earnings yet. You earn when your customers pay.</p>;
  return (
    <>
      <ul className="divide-y divide-line">
        {data.data.map((e) => (
          <li key={e.id} className="flex items-center gap-3 px-5 py-3 text-sm">
            <div className="min-w-0 flex-1">
              <p className="font-medium">
                {TYPE[e.type]}
                {e.customer ? `, ${e.customer.name}` : ""}
              </p>
              <p className="truncate text-[13px] text-muted">
                {e.description}, {formatDateTime(e.created_at)}
              </p>
            </div>
            <span className={clsx("tabular font-medium", e.amount_paise > 0 ? "text-teal" : "text-text")}>
              {e.amount_paise > 0 ? "+" : ""}
              {formatPaise(e.amount_paise)}
            </span>
          </li>
        ))}
      </ul>
      <Pager page={page} last={data.meta.last_page} total={data.meta.total} onPage={setPage} />
    </>
  );
}

function Months() {
  const { data } = useApi<{ data: Month[] }>("/reseller/earnings");
  if (!data) return <Skeleton className="m-5 h-40" />;
  return (
    <div className="relative overflow-x-auto">
      <table className="w-full min-w-[600px] text-sm">
        <thead className="text-left text-[13px] text-muted">
          <tr>
            <th className="px-5 py-2.5 font-medium">Month</th>
            <th className="px-3 py-2.5 text-right font-medium">Commission</th>
            <th className="px-3 py-2.5 text-right font-medium">Markup</th>
            <th className="px-3 py-2.5 text-right font-medium">Reversals</th>
            <th className="px-3 py-2.5 text-right font-medium">Net earned</th>
            <th className="px-5 py-2.5 text-right font-medium">Paid out</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-line border-t border-line">
          {[...data.data].reverse().map((m) => (
            <tr key={m.month}>
              <td className="px-5 py-2.5">{monthLabel(m.month)}</td>
              <td className="tabular px-3 py-2.5 text-right">{formatPaise(m.commission_paise)}</td>
              <td className="tabular px-3 py-2.5 text-right">{formatPaise(m.markup_paise)}</td>
              <td className="tabular px-3 py-2.5 text-right text-muted">{m.reversals_paise ? `−${formatPaise(m.reversals_paise)}` : "—"}</td>
              <td className="tabular px-3 py-2.5 text-right font-medium">{formatPaise(m.commission_paise + m.markup_paise - m.reversals_paise)}</td>
              <td className="tabular px-5 py-2.5 text-right text-muted">{formatPaise(m.payouts_paise)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function CustomerPayments() {
  const [page, setPage] = useState(1);
  const { data } = useApi<{ data: Payment[]; meta: { last_page: number; total: number } }>(`/reseller/payments${qs({ page })}`);
  const inv = useApi<{ data: Invoice[] }>("/reseller/invoices");
  if (!data) return <Skeleton className="m-5 h-40" />;
  if (!data.data.length) return <p className="px-5 py-10 text-center text-sm text-muted">Your customers haven&apos;t paid anything yet.</p>;
  const invoiceFor = (id: number) => inv.data?.data.find((i) => i.payment_id === id);
  return (
    <>
      <ul className="divide-y divide-line">
        {data.data.map((p) => {
          const i = invoiceFor(p.id);
          return (
            <li key={p.id} className="flex items-center gap-3 px-5 py-3 text-sm">
              <div className="min-w-0 flex-1">
                <p className="font-medium">
                  {p.customer?.name}: {p.purpose === "recharge" ? "wallet recharge" : "plan"}
                </p>
                <p className="text-[13px] text-muted">
                  {formatDateTime(p.paid_at ?? p.created_at)}
                  {i ? `, invoice ${i.number}` : ""}
                </p>
              </div>
              <span className="tabular">{formatPaise(p.total_paise)}</span>
            </li>
          );
        })}
      </ul>
      <Pager page={page} last={data.meta.last_page} total={data.meta.total} onPage={setPage} />
    </>
  );
}

export default function ResellerEarningsPage() {
  const [tab, setTab] = useState<"ledger" | "months" | "payments">("ledger");
  const { data } = useApi<{ data: Entry[]; meta: { summary: Earnings } }>("/reseller/commissions");
  const s = data?.meta.summary;
  return (
    <>
      <PageHeader title="Earnings" description="Commission and markup from your customers' payments, and what Devwebs has paid you." />
      {s && (
        <div className="mb-6 grid grid-cols-2 gap-3 md:grid-cols-4">
          <StatTile label="Commission" value={formatPaise(s.commission)} />
          <StatTile label="Markup" value={formatPaise(s.markup)} />
          <StatTile label="Paid out" value={formatPaise(s.paid_out)} />
          <StatTile label="Outstanding" value={formatPaise(s.outstanding)} sub={s.reversals ? `after ${formatPaise(s.reversals)} of refund reversals` : undefined} />
        </div>
      )}
      <div className="mb-3">
        <FilterTabs
          label="Earnings views"
          value={tab}
          onChange={setTab}
          options={[
            ["ledger", "Commission ledger"],
            ["months", "By month"],
            ["payments", "Customer payments"],
          ]}
        />
      </div>
      <Panel>
        {tab === "ledger" && <Ledger />}
        {tab === "months" && <Months />}
        {tab === "payments" && <CustomerPayments />}
      </Panel>
    </>
  );
}