"use client";

import Link from "next/link";
import { useState } from "react";
import { Handshake, Plus } from "lucide-react";
import { Badge, Button, Dialog, EmptyState, Field, Input, PageHeader, Panel, Skeleton } from "@/components/ui/kit";
import { useToast } from "@/components/ui/toast";
import { useSession } from "@/components/session";
import { bpToPct } from "@/components/admin/common";
import { TenantDialog } from "@/components/admin/tenant-dialog";
import { api, ApiError } from "@/lib/api";
import { formatPaise } from "@/lib/format";
import { useApi } from "@/lib/use-api";
import type { Earnings } from "@/lib/types";

interface Reseller {
  id: number;
  name: string;
  status: string;
  commission_rate_bp: number;
  max_markup_bp: number;
  contact_email: string | null;
  customers: number;
  earnings: Earnings;
}

function RatesDialog({ r, onClose, onDone }: { r: Reseller; onClose: () => void; onDone: () => void }) {
  const toast = useToast();
  const [commission, setCommission] = useState(String(r.commission_rate_bp / 100));
  const [markup, setMarkup] = useState(String(r.max_markup_bp / 100));
  const [busy, setBusy] = useState(false);
  async function save() {
    setBusy(true);
    try {
      await api.patch(`/admin/resellers/${r.id}`, { commission_rate_bp: Math.round(Number(commission) * 100), max_markup_bp: Math.round(Number(markup) * 100) });
      toast("success", "Rates updated");
      onDone();
    } catch (e) {
      toast("error", (e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <Dialog
      open
      onClose={onClose}
      title={`Rates for ${r.name}`}
      description="New rates apply to payments from now on. Resale prices above a lowered markup are capped."
      footer={
        <>
          <Button onClick={onClose}>Cancel</Button>
          <Button variant="primary" loading={busy} onClick={save}>
            Save
          </Button>
        </>
      }
    >
      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="Commission (%)" htmlFor="rr-com">
          <Input id="rr-com" inputMode="decimal" value={commission} onChange={(e) => setCommission(e.target.value)} />
        </Field>
        <Field label="Max plan markup (%)" htmlFor="rr-mk">
          <Input id="rr-mk" inputMode="decimal" value={markup} onChange={(e) => setMarkup(e.target.value)} />
        </Field>
      </div>
    </Dialog>
  );
}

function PayoutDialog({ r, onClose, onDone }: { r: Reseller; onClose: () => void; onDone: () => void }) {
  const toast = useToast();
  const [amount, setAmount] = useState("");
  const [reference, setReference] = useState("");
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [busy, setBusy] = useState(false);
  async function save() {
    setBusy(true);
    setErrors({});
    try {
      await api.post(`/admin/resellers/${r.id}/payouts`, { amount, reference });
      toast("success", "Payout recorded");
      onDone();
    } catch (e) {
      if (e instanceof ApiError && Object.keys(e.fields).length) setErrors(e.fields);
      else toast("error", (e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <Dialog
      open
      onClose={onClose}
      title="Record a payout"
      description={`${formatPaise(r.earnings.outstanding)} is outstanding to ${r.name}. Record bank transfers here after you've made them.`}
      footer={
        <>
          <Button onClick={onClose}>Cancel</Button>
          <Button variant="primary" loading={busy} onClick={save}>
            Record payout
          </Button>
        </>
      }
    >
      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="Amount (₹)" htmlFor="po-amount" error={errors.amount}>
          <Input id="po-amount" inputMode="decimal" value={amount} onChange={(e) => setAmount(e.target.value)} invalid={!!errors.amount} />
        </Field>
        <Field label="Bank reference" htmlFor="po-ref" error={errors.reference}>
          <Input id="po-ref" value={reference} onChange={(e) => setReference(e.target.value)} invalid={!!errors.reference} placeholder="e.g. NEFT UTR" />
        </Field>
      </div>
    </Dialog>
  );
}

export default function AdminResellersPage() {
  const toast = useToast();
  const { can } = useSession();
  const { data, reload } = useApi<{ data: Reseller[] }>("/admin/resellers");
  const [creating, setCreating] = useState(false);
  const [rates, setRates] = useState<Reseller | null>(null);
  const [payout, setPayout] = useState<Reseller | null>(null);
  const rows = data?.data ?? [];
  return (
    <>
      <PageHeader
        title="Resellers"
        description="Partners who sign up and manage their own customers, and what they've earned."
        actions={
          can("platform.organizations.manage") && (
            <Button variant="primary" icon={<Plus className="size-4" />} onClick={() => setCreating(true)}>
              New reseller
            </Button>
          )
        }
      />
      <Panel>
        {!data ? (
          <Skeleton className="m-5 h-32" />
        ) : rows.length === 0 ? (
          <EmptyState icon={<Handshake />} title="No resellers yet" body="Add a reseller to let a partner onboard and manage their own customers." />
        ) : (
          <div className="relative overflow-x-auto">
            <table className="w-full min-w-[800px] text-sm">
              <thead className="border-b border-line text-left text-[13px] text-muted">
                <tr>
                  <th className="px-5 py-3 font-medium">Reseller</th>
                  <th className="px-3 py-3 text-right font-medium">Customers</th>
                  <th className="px-3 py-3 font-medium">Terms</th>
                  <th className="px-3 py-3 text-right font-medium">Earned</th>
                  <th className="px-3 py-3 text-right font-medium">Outstanding</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((r) => (
                  <tr key={r.id}>
                    <td className="px-5 py-3">
                      <Link href={`/admin/resellers/${r.id}`} className="font-medium text-ink hover:text-teal">
                        {r.name}
                      </Link>
                      {r.status !== "active" && (
                        <span className="ml-2">
                          <Badge tone="brick">Suspended</Badge>
                        </span>
                      )}
                      <p className="text-[13px] text-muted">{r.contact_email}</p>
                    </td>
                    <td className="tabular px-3 py-3 text-right">{r.customers}</td>
                    <td className="px-3 py-3 text-muted">
                      {bpToPct(r.commission_rate_bp)} commission, up to {bpToPct(r.max_markup_bp)} markup
                    </td>
                    <td className="tabular px-3 py-3 text-right">{formatPaise(r.earnings.earned)}</td>
                    <td className="tabular px-3 py-3 text-right font-medium">{formatPaise(r.earnings.outstanding)}</td>
                    <td className="px-5 py-3">
                      <div className="flex justify-end gap-1">
                        {can("platform.resellers.manage") && (
                          <Button size="sm" variant="ghost" onClick={() => setRates(r)}>
                            Rates
                          </Button>
                        )}
                        {can("platform.billing.manage") && (
                          <Button size="sm" variant="ghost" onClick={() => setPayout(r)} disabled={r.earnings.outstanding <= 0}>
                            Payout
                          </Button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Panel>
      {creating && (
        <TenantDialog
          kind="reseller"
          endpoint="/admin/organizations"
          plans={[]}
          onClose={() => setCreating(false)}
          onCreated={(c) => {
            toast("success", `Created ${c.name}`);
            setCreating(false);
            reload();
          }}
        />
      )}
      {rates && <RatesDialog r={rates} onClose={() => setRates(null)} onDone={() => (setRates(null), reload())} />}
      {payout && <PayoutDialog r={payout} onClose={() => setPayout(null)} onDone={() => (setPayout(null), reload())} />}
    </>
  );
}