"use client";

import Link from "next/link";
import { useCallback, useEffect, useId, useRef, useState } from "react";
import { earningsApi } from "@/lib/api/earnings";
import { cn } from "@/lib/cn";
import { creatorDashboardEarningsChip } from "@/lib/creator-dashboard";
import { formatMoneyMinor } from "@/lib/format";
import type { CreatorEarningsSummary } from "@/types/earnings";

const ZERO_SUMMARY: CreatorEarningsSummary = {
  currency: "USD",
  payable_amount: 0,
  in_progress_amount: 0,
  transferred_amount: 0,
};

export function DashboardEarningsHeaderItem() {
  const [summary, setSummary] = useState<CreatorEarningsSummary>(ZERO_SUMMARY);
  const [loading, setLoading] = useState(true);
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const menuId = useId();
  const toggleId = useId();

  const loadSummary = useCallback(async () => {
    setLoading(true);
    try {
      const page = await earningsApi.listMine();
      setSummary(page.summary);
    } catch {
      // Keep last known / zero on error so the header still renders.
    } finally {
      setLoading(false);
    }
  }, []);

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

  useEffect(() => {
    if (!open) {
      return;
    }

    function onPointerDown(event: MouseEvent) {
      if (!rootRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    }

    function onKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpen(false);
      }
    }

    document.addEventListener("mousedown", onPointerDown);
    document.addEventListener("keydown", onKeyDown);

    return () => {
      document.removeEventListener("mousedown", onPointerDown);
      document.removeEventListener("keydown", onKeyDown);
    };
  }, [open]);

  const chip = creatorDashboardEarningsChip(summary);

  return (
    <div ref={rootRef} className="relative flex shrink-0 items-center">
      <div
        className={cn(
          "inline-flex max-w-full items-stretch overflow-hidden rounded-pv border border-line bg-surface text-primary transition hover:border-primary",
          open && "border-primary",
        )}
      >
        <Link
          href="/dashboard/earnings"
          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-left"
          aria-label={chip.ariaLabel}
          onClick={() => setOpen(false)}
        >
          <span className="text-[0.8125rem] font-semibold tracking-[-0.01em]">{chip.label}</span>
          <span
            className={cn(
              "hidden text-[0.8125rem] font-semibold tabular-nums sm:inline",
              loading && "text-ink-40",
            )}
          >
            {chip.amountLabel}
          </span>
        </Link>
        <button
          type="button"
          id={toggleId}
          className="hidden items-center border-l border-line px-1.5 text-ink-40 hover:bg-bg hover:text-primary sm:inline-flex"
          aria-haspopup="menu"
          aria-expanded={open}
          aria-controls={menuId}
          aria-label="Earnings summary"
          onClick={() => setOpen((value) => !value)}
        >
          <svg
            aria-hidden="true"
            className={cn("size-3.5 shrink-0", open && "rotate-180")}
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth="1.8"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
          </svg>
        </button>
      </div>
      {open ? (
        <div
          id={menuId}
          role="menu"
          aria-labelledby={toggleId}
          className="absolute right-0 top-[calc(100%+6px)] z-70 w-[15.5rem] overflow-hidden rounded-pv border border-line bg-surface py-1 shadow-pv"
        >
          <p className="px-3 py-1.5 text-[0.6875rem] font-medium uppercase tracking-[0.06em] text-ink-40">
            Earnings
          </p>
          <div className="space-y-1 border-b border-line px-3 py-2 text-[0.8125rem]">
            <div className="flex items-center justify-between gap-3">
              <span className="text-ink-60">Payable</span>
              <span className="font-semibold tabular-nums text-primary">
                {formatMoneyMinor(summary.payable_amount, summary.currency)}
              </span>
            </div>
            <div className="flex items-center justify-between gap-3">
              <span className="text-ink-60">In progress</span>
              <span className="font-semibold tabular-nums text-primary">
                {formatMoneyMinor(summary.in_progress_amount, summary.currency)}
              </span>
            </div>
            <div className="flex items-center justify-between gap-3">
              <span className="text-ink-60">Transferred</span>
              <span className="font-semibold tabular-nums text-primary">
                {formatMoneyMinor(summary.transferred_amount, summary.currency)}
              </span>
            </div>
          </div>
          <Link
            role="menuitem"
            href="/dashboard/earnings"
            className="block px-3 py-2.5 text-[0.8125rem] font-medium text-primary hover:bg-bg"
            onClick={() => setOpen(false)}
          >
            View earnings
          </Link>
        </div>
      ) : null}
    </div>
  );
}