"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/Button";
import { DashboardPageContainer } from "@/components/dashboard/DashboardPageContainer";
import { DashboardShell } from "@/components/dashboard/DashboardShell";
import { DashboardStatCard } from "@/components/dashboard/DashboardStatCard";
import { Card } from "@/components/ui/Card";
import { EmptyState } from "@/components/ui/EmptyState";
import { ErrorState } from "@/components/ui/ErrorState";
import { PageHeader, SectionHeader } from "@/components/ui/PageHeader";
import { AccountListSkeleton, StatGridSkeleton } from "@/components/ui/Skeleton";
import { StatusBadge } from "@/components/ui/StatusBadge";
import { ApiError } from "@/lib/api";
import { earningsApi } from "@/lib/api/earnings";
import {
  creatorEarningBadgeVariant,
  creatorEarningsPageViewState,
  creatorEarningUiLabel,
  creatorEarningUiStatus,
  creatorTransferFailedGuidance,
  earningDeliverableContext,
  earningDisplayDate,
  showPayoutSetupCta,
  showReadyForTransfer,
} from "@/lib/earnings";
import { formatMoneyMinor, formatRelativeTime } from "@/lib/format";
import type { CreatorEarningListItem, CreatorEarningsPage } from "@/types/earnings";

const CREATOR_ONLY = ["creator"] as const;

export function DashboardEarningsPage() {
  return (
    <DashboardShell title="Earnings" allowedAccountTypes={CREATOR_ONLY}>
      {() => <EarningsPageContent />}
    </DashboardShell>
  );
}

function EarningsPageContent() {
  const [page, setPage] = useState<CreatorEarningsPage | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      const next = await earningsApi.listMine();
      setPage(next);
    } catch (caught) {
      const message =
        caught instanceof ApiError ? caught.message : "Unable to load earnings.";
      setError(message);
      setPage(null);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const view = creatorEarningsPageViewState({ loading, error, page });

  return (
    <DashboardPageContainer>
      <PageHeader description="Track your campaign earnings and Stripe transfers." />

      {view.kind === "loading" ? (
        <>
          <StatGridSkeleton count={3} />
          <AccountListSkeleton rows={3} />
        </>
      ) : null}

      {view.kind === "error" ? (
        <ErrorState
          title="Unable to load earnings"
          message={view.message}
          onRetry={() => {
            void load();
          }}
        />
      ) : null}

      {view.kind === "empty" || view.kind === "ready" ? (
        <>
          <section aria-labelledby="earnings-summary-heading">
            <h2 id="earnings-summary-heading" className="sr-only">
              Earnings summary
            </h2>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
              <DashboardStatCard
                label="Payable"
                hint="Amount currently eligible for transfer."
                value={formatMoneyMinor(
                  (view.kind === "ready" ? view.page.summary : view.summary).payable_amount,
                  (view.kind === "ready" ? view.page.summary : view.summary).currency,
                )}
                description="Amount currently eligible for transfer."
              />
              <DashboardStatCard
                label="In progress"
                hint="Funded campaign work that is not yet payable."
                value={formatMoneyMinor(
                  (view.kind === "ready" ? view.page.summary : view.summary).in_progress_amount,
                  (view.kind === "ready" ? view.page.summary : view.summary).currency,
                )}
                description="Funded campaign work that is not yet payable."
              />
              <DashboardStatCard
                label="Transferred"
                hint="Transferred to your Stripe Connect account."
                value={formatMoneyMinor(
                  (view.kind === "ready" ? view.page.summary : view.summary).transferred_amount,
                  (view.kind === "ready" ? view.page.summary : view.summary).currency,
                )}
                description="Transferred to your Stripe Connect account."
              />
            </div>
          </section>

          <ConnectStatusBanner
            page={
              view.kind === "ready"
                ? view.page
                : { summary: view.summary, connect: view.connect, earnings: [] }
            }
          />
        </>
      ) : null}

      {view.kind === "empty" ? (
        <EmptyState
          title="No earnings yet"
          description="Your campaign earnings will appear here after a brand funds your work."
        />
      ) : null}

      {view.kind === "ready" ? (
        <section aria-labelledby="earnings-list-heading" className="space-y-3">
          <SectionHeader title="Campaign earnings" id="earnings-list-heading" />
          <ul className="space-y-2">
            {view.page.earnings.map((item) => (
              <li key={item.id}>
                <EarningRow item={item} />
              </li>
            ))}
          </ul>
        </section>
      ) : null}
    </DashboardPageContainer>
  );
}

function ConnectStatusBanner({ page }: { page: CreatorEarningsPage }) {
  if (showPayoutSetupCta(page)) {
    return (
      <Card className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between" padding="compact">
        <div className="min-w-0">
          <p className="text-[0.8125rem] font-medium text-primary">Payout setup required</p>
          <p className="mt-0.5 text-[0.75rem] text-ink-60">
            Set up Stripe Connect so payable earnings can be transferred.
          </p>
        </div>
        <Button href="/dashboard/settings/payouts" size="sm">
          Set up payouts
        </Button>
      </Card>
    );
  }

  if (showReadyForTransfer(page)) {
    return (
      <Card padding="compact">
        <p className="text-[0.8125rem] font-medium text-primary">Ready for transfer</p>
        <p className="mt-0.5 text-[0.75rem] text-ink-60">
          Payable earnings can transfer to your Stripe Connect account automatically.
        </p>
      </Card>
    );
  }

  return null;
}

function EarningRow({ item }: { item: CreatorEarningListItem }) {
  const uiStatus = creatorEarningUiStatus(item);
  const context = earningDeliverableContext(item);
  const date = earningDisplayDate(item);
  const href = `/dashboard/opportunities/${item.campaign_participant_id}`;

  return (
    <Card padding="compact" className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
      <div className="min-w-0 space-y-1">
        <div className="flex flex-wrap items-center gap-2">
          <Link
            href={href}
            className="truncate text-[0.875rem] font-semibold tracking-[-0.01em] text-primary hover:underline"
          >
            {item.campaign?.name ?? "Campaign"}
          </Link>
          {uiStatus ? (
            <StatusBadge variant={creatorEarningBadgeVariant(uiStatus)}>
              {creatorEarningUiLabel(uiStatus)}
            </StatusBadge>
          ) : null}
        </div>
        {context ? <p className="text-[0.75rem] text-ink-60">{context}</p> : null}
        {uiStatus === "transfer_failed" ? (
          <p className="text-[0.75rem] text-ink-60">{creatorTransferFailedGuidance(item)}</p>
        ) : null}
        {date ? (
          <p className="text-[0.75rem] text-ink-40">{formatRelativeTime(date)}</p>
        ) : null}
      </div>
      <div className="shrink-0 text-left sm:text-right">
        <p className="text-[0.9375rem] font-semibold tabular-nums text-primary">
          {formatMoneyMinor(item.amount, item.currency)}
        </p>
        <p className="mt-0.5 text-[0.75rem] text-ink-60">
          Creator compensation {formatMoneyMinor(item.gross_amount, item.currency)}
          {item.platform_fee_amount > 0 && item.financial_model === "legacy_creator_commission"
            ? ` · Commission −${formatMoneyMinor(item.platform_fee_amount, item.currency)}`
            : null}
          {item.platform_fee_amount > 0 && item.financial_model === "additive_platform_fee"
            ? ` · Platform fee not deducted`
            : null}
        </p>
        {uiStatus === "payout_setup_required" ? (
          <Link
            href="/dashboard/settings/payouts"
            className="mt-1 inline-block text-[0.75rem] font-medium text-ink-60 underline decoration-line underline-offset-2 hover:text-primary"
          >
            Set up payouts
          </Link>
        ) : null}
      </div>
    </Card>
  );
}