"use client";

import { FormEvent, Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { AdminDataTable } from "@/components/admin/AdminDataTable";
import {
  AdminFilterBar,
  AdminFilterField,
  adminFilterInputClassName,
} from "@/components/admin/AdminFilterBar";
import { AdminPageIntro } from "@/components/admin/AdminPageIntro";
import { AdminPagination } from "@/components/admin/AdminPagination";
import { AdminShell } from "@/components/admin/AdminShell";
import { AdminStatusBadge } from "@/components/admin/AdminStatusBadge";
import { AdminTableSkeleton } from "@/components/admin/AdminTableSkeleton";
import { ErrorState } from "@/components/ui/ErrorState";
import { ApiError } from "@/lib/api";
import {
  adminListHref,
  buildAdminListQuery,
  parseAdminEnumParam,
  parseAdminIdParam,
  parseAdminPage,
} from "@/lib/admin-list-query";
import { adminApi, formatAdminDate, formatAdminMoney } from "@/lib/api/admin";
import type { AdminPaginationMeta, AdminPayment } from "@/types/admin";

const PAYMENT_STATUSES = [
  "requires_setup",
  "authorized",
  "processing",
  "action_required",
  "succeeded",
  "failed",
  "canceled",
] as const;

export function AdminPaymentsPage() {
  return (
    <AdminShell title="Payments" subtitle="Brand charges">
      {() => (
        <Suspense fallback={<AdminTableSkeleton columns={9} />}>
          <PaymentsContent />
        </Suspense>
      )}
    </AdminShell>
  );
}

function PaymentsContent() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const urlStatus = parseAdminEnumParam(searchParams.get("status"), PAYMENT_STATUSES);
  const urlCampaignId = parseAdminIdParam(searchParams.get("campaign_id"));
  const urlBrandProfileId = parseAdminIdParam(searchParams.get("brand_profile_id"));
  const urlPage = parseAdminPage(searchParams.get("page"));

  const [status, setStatus] = useState(urlStatus);
  const [payments, setPayments] = useState<AdminPayment[]>([]);
  const [meta, setMeta] = useState<AdminPaginationMeta | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setStatus(urlStatus);
  }, [urlStatus]);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      setLoading(true);
      setError(null);
      try {
        const result = await adminApi.listPayments({
          page: urlPage,
          status: urlStatus || undefined,
          campaign_id: urlCampaignId,
          brand_profile_id: urlBrandProfileId,
        });
        if (cancelled) return;
        setPayments(result.payments);
        setMeta(result.meta);
      } catch (err) {
        if (cancelled) return;
        setError(err instanceof ApiError ? err.message : "Unable to load payments.");
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void load();
    return () => {
      cancelled = true;
    };
  }, [urlStatus, urlCampaignId, urlBrandProfileId, urlPage]);

  function replaceQuery(next: {
    status?: string;
    campaign_id?: number | null;
    brand_profile_id?: number | null;
    page?: number;
  }) {
    const campaignId = next.campaign_id !== undefined ? next.campaign_id : urlCampaignId;
    const brandId = next.brand_profile_id !== undefined ? next.brand_profile_id : urlBrandProfileId;

    const query = buildAdminListQuery({
      status: next.status !== undefined ? next.status : urlStatus,
      campaign_id: campaignId ?? undefined,
      brand_profile_id: brandId ?? undefined,
      page: next.page !== undefined ? next.page : urlPage,
    });
    router.replace(`${pathname}${query}`, { scroll: false });
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    replaceQuery({ status, page: 1 });
  }

  function handleReset() {
    setStatus("");
    router.replace(pathname, { scroll: false });
  }

  const filterNote =
    urlCampaignId || urlBrandProfileId
      ? [
          urlCampaignId ? `campaign #${urlCampaignId}` : null,
          urlBrandProfileId ? `brand #${urlBrandProfileId}` : null,
        ]
          .filter(Boolean)
          .join(", ")
      : null;

  return (
    <div className="space-y-5">
      <AdminPageIntro description="Read-only PaymentIntent flow from brand charge to creator earning. Card secrets are never shown." />

      {filterNote ? (
        <p className="text-[0.8125rem] text-ink-60">
          Filtered by {filterNote}.{" "}
          <button
            type="button"
            className="font-medium text-primary underline-offset-2 hover:underline"
            onClick={() =>
              replaceQuery({ campaign_id: null, brand_profile_id: null, page: 1 })
            }
          >
            Clear record filters
          </button>
        </p>
      ) : null}

      <AdminFilterBar onSubmit={handleSubmit} onReset={handleReset} disabled={loading}>
        <AdminFilterField label="Status">
          <select
            className={adminFilterInputClassName}
            value={status}
            onChange={(e) => setStatus(e.target.value)}
          >
            <option value="">All</option>
            <option value="requires_setup">Requires setup</option>
            <option value="authorized">Authorized</option>
            <option value="processing">Processing</option>
            <option value="action_required">Action required</option>
            <option value="succeeded">Succeeded</option>
            <option value="failed">Failed</option>
            <option value="canceled">Canceled</option>
          </select>
        </AdminFilterField>
      </AdminFilterBar>

      {error ? (
        <ErrorState
          title="Unable to load payments"
          message={error}
          onRetry={() => replaceQuery({ page: urlPage })}
        />
      ) : loading ? (
        <AdminTableSkeleton columns={9} />
      ) : (
        <>
          <AdminDataTable
            rows={payments}
            caption="Payments"
            emptyTitle="No payments found"
            emptyDescription="Succeeded and in-progress brand charges will appear here."
            columns={[
              {
                key: "payment",
                header: "Payment",
                cell: (row) => (
                  <div className="min-w-[7rem]">
                    <p className="font-medium tabular-nums text-primary">#{row.id}</p>
                    <p className="mt-0.5 font-mono text-[0.6875rem] text-ink-40">
                      {row.stripe_payment_intent_id
                        ? `${row.stripe_payment_intent_id.slice(0, 18)}…`
                        : "—"}
                    </p>
                  </div>
                ),
              },
              {
                key: "campaign",
                header: "Campaign",
                cell: (row) => {
                  if (!row.campaign) {
                    return <span className="text-ink-60">—</span>;
                  }
                  return (
                    <Link
                      href={`/admin/campaigns/${row.campaign.id}`}
                      className="text-ink-60 underline-offset-2 hover:text-primary hover:underline"
                    >
                      {row.campaign.name}
                    </Link>
                  );
                },
              },
              {
                key: "brand",
                header: "Brand",
                cell: (row) => {
                  const label = row.brand?.company_name ?? "—";
                  const userId = row.brand?.user?.id;
                  if (!userId) {
                    return <span className="text-ink-60">{label}</span>;
                  }
                  return (
                    <Link
                      href={`/admin/users/${userId}`}
                      className="text-ink-60 underline-offset-2 hover:text-primary hover:underline"
                    >
                      {label}
                    </Link>
                  );
                },
              },
              {
                key: "amount",
                header: "Amount",
                cell: (row) => (
                  <span className="tabular-nums font-medium text-primary">
                    {formatAdminMoney(row.total_amount, row.currency)}
                  </span>
                ),
              },
              {
                key: "fee",
                header: "Platform fee",
                cell: (row) => (
                  <span className="tabular-nums text-ink-60">
                    {formatAdminMoney(row.platform_fee_amount, row.currency)}
                  </span>
                ),
              },
              {
                key: "status",
                header: "Status",
                cell: (row) => <AdminStatusBadge status={row.status} />,
              },
              {
                key: "timing",
                header: "Paid / failed",
                cell: (row) => (
                  <div className="space-y-0.5 text-[0.75rem] text-ink-40">
                    <p>Paid {formatAdminDate(row.paid_at)}</p>
                    <p>Failed {formatAdminDate(row.failed_at)}</p>
                    {row.failure_reason ? (
                      <p className="max-w-[12rem] truncate text-red-700" title={row.failure_reason}>
                        {row.failure_reason}
                      </p>
                    ) : null}
                  </div>
                ),
              },
              {
                key: "earning",
                header: "Earning",
                cell: (row) => {
                  if (!row.creator_earning) {
                    return <span className="text-ink-40">—</span>;
                  }
                  return (
                    <Link
                      href={adminListHref("/admin/finance/earnings", {
                        marketplace_payment_id: row.id,
                      })}
                      className="text-ink-60 underline-offset-2 hover:text-primary hover:underline"
                    >
                      <AdminStatusBadge status={row.creator_earning.status} />
                      <span className="mt-1 block tabular-nums text-[0.75rem]">
                        {formatAdminMoney(row.creator_earning.creator_amount, row.currency)}
                      </span>
                    </Link>
                  );
                },
              },
              {
                key: "created",
                header: "Created",
                cell: (row) => (
                  <span className="whitespace-nowrap text-[0.75rem] text-ink-40">
                    {formatAdminDate(row.created_at)}
                  </span>
                ),
              },
            ]}
          />
          {meta ? (
            <AdminPagination
              meta={meta}
              onPageChange={(next) => replaceQuery({ page: next })}
            />
          ) : null}
        </>
      )}
    </div>
  );
}