"use client";

import { useEffect, useState } from "react";
import { Button, EmptyState, Spinner, useToast } from "@/components/ui";
import { api } from "@/lib/api-client";
import { formatCount, formatDate, formatMoney } from "@/lib/format";

type Data = {
  channel: { isMonetized: boolean; memberPrice: number; memberPerks: string | null };
  eligibility: Record<string, { value: number; required: number | string; met: boolean }>;
  eligible: boolean;
  members: { id: string; tier: string; priceCents: number; since: string; userName: string }[];
  payouts: { id: string; kind: string; amountCents: number; createdAt: string; status: string; note: string | null; reference: string | null }[];
  revenue: { estimatedCents: number; earnedCents: number; paidOutCents: number; pendingCents: number };
};

export default function MonetizationPage() {
  const { toast, toastNode } = useToast();
  const [data, setData] = useState<Data | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = async () => {
    const result = await api<Data>("/api/monetization").catch((e) => {
      setError(e.message);
      return null;
    });
    setData(result);
  };

  useEffect(() => {
    void load();
  }, []);

  if (error) return <EmptyState icon="🔒" title="Monetization needs a channel" hint={error} />;
  if (!data) return <div className="grid place-items-center py-20"><Spinner /></div>;

  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">Monetization</h1>
          <p className="text-sm text-muted">
            {data.channel.isMonetized ? "Your channel is monetized — ads serve on enabled videos." : "Enable monetization once your channel meets the thresholds."}
          </p>
        </div>
        <Button
          variant={data.channel.isMonetized ? "secondary" : "primary"}
          onClick={async () => {
            await api("/api/monetization", {
              method: "POST",
              json: { action: data.channel.isMonetized ? "disable" : "enable" },
            }).catch((e) => toast(e.message));
            toast(data.channel.isMonetized ? "Monetization disabled" : "Monetization enabled");
            await load();
          }}
        >
          {data.channel.isMonetized ? "Disable" : "Enable monetization"}
        </Button>
      </header>

      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {[
          { label: "Estimated revenue", value: formatMoney(data.revenue.estimatedCents) },
          { label: "Earned (support)", value: formatMoney(data.revenue.earnedCents) },
          { label: "Paid out", value: formatMoney(data.revenue.paidOutCents) },
          { label: "Pending payout", value: formatMoney(data.revenue.pendingCents) },
        ].map((stat) => (
          <div key={stat.label} className="rounded-xl border border-line p-4">
            <p className="text-xs uppercase tracking-wide text-muted">{stat.label}</p>
            <p className="mt-1 text-2xl font-bold">{stat.value}</p>
          </div>
        ))}
      </section>

      <section className="rounded-xl border border-line p-4">
        <h2 className="mb-3 text-sm font-bold uppercase tracking-wide text-muted">Eligibility</h2>
        <div className="space-y-3">
          {Object.entries(data.eligibility).map(([key, rule]) => (
            <div key={key} className="flex items-center gap-3 text-sm">
              <span className={`grid h-6 w-6 place-items-center rounded-full text-xs ${rule.met ? "bg-green-500/20 text-green-500" : "bg-chip text-muted"}`}>
                {rule.met ? "✓" : "•"}
              </span>
              <span className="w-40 capitalize">{key.replace(/([A-Z])/g, " $1")}</span>
              <span className="text-xs text-muted">
                {formatCount(Number(rule.value))} / {typeof rule.required === "number" ? formatCount(rule.required) : rule.required}
              </span>
              <span className="h-2 flex-1 overflow-hidden rounded bg-chip">
                <span
                  className="block h-full bg-brand"
                  style={{ width: `${Math.min(100, (Number(rule.value) / (typeof rule.required === "number" ? rule.required : 1)) * 100)}%` }}
                />
              </span>
            </div>
          ))}
        </div>
        <Button
          className="mt-4"
          disabled={!data.eligible || data.revenue.pendingCents < 10000}
          onClick={async () => {
            await api("/api/monetization", { method: "POST", json: { action: "request-payout" } }).catch((e) => toast(e.message));
            toast("Payout requested");
            await load();
          }}
        >
          Request payout (min $100)
        </Button>
      </section>

      <div className="grid gap-4 lg:grid-cols-2">
        <section className="rounded-xl border border-line p-4">
          <h2 className="mb-3 text-sm font-bold uppercase tracking-wide text-muted">Members ({data.members.length})</h2>
          <div className="space-y-2 text-sm">
            {data.members.length === 0 ? <p className="text-muted">No members yet.</p> : null}
            {data.members.map((member) => (
              <div key={member.id} className="flex items-center justify-between">
                <span>{member.userName}</span>
                <span className="text-xs text-muted">{formatMoney(member.priceCents)} / mo · since {formatDate(member.since)}</span>
              </div>
            ))}
          </div>
          {data.channel.memberPerks ? <p className="mt-3 text-xs text-muted">Perks: {data.channel.memberPerks}</p> : null}
        </section>

        <section className="rounded-xl border border-line p-4">
          <h2 className="mb-3 text-sm font-bold uppercase tracking-wide text-muted">Payment history</h2>
          <div className="space-y-2 text-sm">
            {data.payouts.length === 0 ? <p className="text-muted">No payments yet.</p> : null}
            {data.payouts.map((payment) => (
              <div key={payment.id} className="flex items-center justify-between gap-2">
                <span className="min-w-0">
                  <span className="capitalize">{payment.kind.replace("_", " ")}</span>
                  <span className="block text-xs text-muted">{payment.reference} · {formatDate(payment.createdAt)} · {payment.status}</span>
                </span>
                <span className="font-semibold">{formatMoney(payment.amountCents)}</span>
              </div>
            ))}
          </div>
        </section>
      </div>
      {toastNode}
    </div>
  );
}