"use client";

import * as React from "react";
import { useActionState } from "react";
import { Banknote, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { requestPayoutAction } from "@/lib/actions/affiliates";
import { affiliatesTexts } from "@/lib/i18n/affiliates";
import type { ActionResult } from "@/lib/errors";

type State = ActionResult<{ amount: string }> | null;

export function PayoutRequestForm({
  available,
  minPayout,
  canRequest,
}: {
  available: string;
  minPayout: string;
  canRequest: boolean;
}) {
  const [state, formAction, pending] = useActionState<State, FormData>(
    requestPayoutAction,
    null,
  );

  const handled = React.useRef<State>(null);

  React.useEffect(() => {
    if (!state || handled.current === state) return;
    handled.current = state;
    if (state.ok) toast.success(affiliatesTexts.payoutRequested);
    else toast.error(state.error);
  }, [state]);

  const blocked = !canRequest || pending;

  return (
    <form action={formAction} className="rounded-2xl border bg-card p-5 shadow-sm sm:p-6">
      <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
        <div className="space-y-1">
          <div className="flex items-center gap-2">
            <div className="flex size-8 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
              <Banknote className="size-4" />
            </div>
            <h2 className="font-display text-base font-semibold tracking-tight">
              {affiliatesTexts.payoutTitle}
            </h2>
          </div>
          <p className="text-sm text-muted-foreground">{affiliatesTexts.payoutSubtitle}</p>
        </div>

        <div className="flex flex-col items-start gap-3 sm:items-end">
          <div className="text-left sm:text-right">
            <p className="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">
              {affiliatesTexts.payoutAmountLabel}
            </p>
            <p className="font-mono text-xl font-semibold tracking-tight">{available}</p>
          </div>
          <Button type="submit" disabled={blocked}>
            {pending ? <Loader2 className="size-4 animate-spin" /> : null}
            {pending ? affiliatesTexts.requestingPayout : affiliatesTexts.requestPayout}
          </Button>
        </div>
      </div>

      <p className="mt-4 border-t pt-4 text-xs text-muted-foreground">
        {canRequest
          ? affiliatesTexts.payoutWholeBalance
          : affiliatesTexts.payoutBelowMinimum(minPayout, available)}
      </p>

      {state && state.ok === false ? (
        <p className="mt-3 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-500/25 dark:bg-rose-500/10 dark:text-rose-400">
          {state.error}
        </p>
      ) : null}
    </form>
  );
}

export default PayoutRequestForm;