'use client';
import { ErrorState } from '@/components/ui/feedback/ErrorState';

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { formatDate } from '@/lib/format';
import { useLocale, useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/primitives/Select';
import { formatAgorotShekels } from '@/lib/money';
import { getCsrfToken } from '@/lib/csrf';
import { useState } from 'react';
import { TableSkeleton } from '@/components/ui/feedback/Skeleton';
import { QueryBoundary } from '@platform-modules/ui-primitives';

type PayoutRow = {
  id: string;
  amountAgorot: number;
  status: string;
  createdAt: string;
};

type SettlementRail = 'bank_transfer' | 'paypal' | 'other';
type PayoutActionVars =
  | { payoutId: string; action: 'approve' }
  | {
      payoutId: string;
      action: 'mark-paid';
      evidence: {
        settlement_rail: SettlementRail;
        settlement_reference: string;
        settled_at: string;
        amount_agorot: number;
      };
    };

interface Props {
  enrollmentId: string;
}

/**
 * Standalone payout approval panel for an affiliate enrollment.
 * Can be embedded in AffiliateDetail or used as a standalone island.
 */
export function AffiliatePayouts({ enrollmentId }: Props) {
  const t = useT('admin_affiliates');
  const tCommon = useT('common');
  const { locale } = useLocale();
  const qc = useQueryClient();
  const [actionError, setActionError] = useState<string | null>(null);
  const [pendingAction, setPendingAction] = useState<PayoutActionVars | null>(null);
  const [settlementRail, setSettlementRail] = useState<SettlementRail>('bank_transfer');
  const [settlementReference, setSettlementReference] = useState('');
  const [settledAt, setSettledAt] = useState('');

  const payoutsQuery = useQuery<PayoutRow[]>({
    queryKey: ['admin-affiliate-payouts', enrollmentId],
    queryFn: async () => {
      const res = await fetch(`/api/admin/affiliates/${enrollmentId}/payouts`);
      if (!res.ok) return [];
      const json = (await res.json()) as { data: PayoutRow[] };
      return json.data ?? [];
    },
  });

  const payoutAction = useMutation<unknown, Error, PayoutActionVars>({
    mutationFn: async (vars) => {
      const { payoutId, action } = vars;
      const res = await fetch(`/api/admin/affiliates/payouts/${payoutId}/${action}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCsrfToken() },
        body: JSON.stringify(action === 'mark-paid' ? vars.evidence : {}),
      });
      if (!res.ok) throw new Error(await res.text());
      return res.json();
    },
    onMutate: (vars) => {
      setPendingAction(vars);
      setActionError(null);
    },
    onSuccess: () => {
      void qc.invalidateQueries({ queryKey: ['admin-affiliate-payouts', enrollmentId] });
    },
    onError: (err) => setActionError(String(err)),
    onSettled: () => setPendingAction(null),
  });

  return (
    <QueryBoundary
      query={payoutsQuery}
      skeleton={<TableSkeleton rows={3} cols={2} />}
      errorFallback={(retry) => (
        <ErrorState
          title={tCommon('error_loading')}
          action={
            <Button variant="secondary" size="sm" onClick={() => retry()}>
              {tCommon('retry')}
            </Button>
          }
        />
      )}
    >
      {(resolvedPayouts) => (
        <section aria-labelledby="payouts-standalone-heading" className="space-y-3">
          <h2 id="payouts-standalone-heading" className="font-semibold">
            {t('payouts_section_title')}
          </h2>
          {resolvedPayouts.length === 0 ? (
            <p className="text-text-muted text-sm">{t('payouts_empty')}</p>
          ) : (
            <ul className="flex flex-col gap-2">
              {resolvedPayouts.map((p) => (
                <li key={p.id} className="flex items-center justify-between gap-3 border-b pb-2">
                  <div className="flex flex-col gap-0.5">
                    <span className="text-text-muted font-mono text-xs">{p.id.slice(0, 8)}</span>
                    <span className="font-semibold tabular-nums">
                      {formatAgorotShekels(p.amountAgorot)}
                    </span>
                    <span className="text-xs">{p.status}</span>
                    <span className="text-text-muted text-xs">
                      {formatDate(p.createdAt, locale)}
                    </span>
                  </div>
                  <div className="flex gap-2">
                    {p.status === 'requested' && (
                      <Button
                        size="sm"
                        variant="secondary"
                        onClick={() => payoutAction.mutate({ payoutId: p.id, action: 'approve' })}
                        disabled={pendingAction?.payoutId === p.id}
                        loading={
                          pendingAction?.payoutId === p.id && pendingAction.action === 'approve'
                        }
                      >
                        {t('payouts_approve')}
                      </Button>
                    )}
                    {p.status === 'approved' && (
                      <div className="flex w-full max-w-sm flex-col gap-3">
                        <FormField
                          label={t('payouts_settlement_rail_label')}
                          htmlFor={`payout-settlement-rail-${p.id}`}
                          required
                        >
                          <div>
                            <Select
                              value={settlementRail}
                              onValueChange={(value) => setSettlementRail(value as SettlementRail)}
                            >
                              <SelectTrigger
                                id={`payout-settlement-rail-${p.id}`}
                                aria-required="true"
                              >
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="bank_transfer">
                                  {t('payouts_settlement_rail_bank_transfer')}
                                </SelectItem>
                                <SelectItem value="paypal">
                                  {t('payouts_settlement_rail_paypal')}
                                </SelectItem>
                                <SelectItem value="other">
                                  {t('payouts_settlement_rail_other')}
                                </SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </FormField>
                        <FormField
                          label={t('payouts_settlement_reference_label')}
                          htmlFor={`payout-settlement-reference-${p.id}`}
                          hint={t('payouts_settlement_reference_hint')}
                          required
                        >
                          <Input
                            id={`payout-settlement-reference-${p.id}`}
                            value={settlementReference}
                            onChange={(event) => setSettlementReference(event.target.value)}
                            placeholder={t('payouts_settlement_reference_placeholder')}
                            autoComplete="off"
                            required
                          />
                        </FormField>
                        <FormField
                          label={t('payouts_settled_at_label')}
                          htmlFor={`payout-settled-at-${p.id}`}
                          hint={t('payouts_settled_at_hint')}
                          required
                        >
                          <Input
                            id={`payout-settled-at-${p.id}`}
                            type="datetime-local"
                            value={settledAt}
                            onChange={(event) => setSettledAt(event.target.value)}
                            required
                          />
                        </FormField>
                        <Button
                          size="sm"
                          variant="primary"
                          onClick={() => {
                            const reference = settlementReference.trim();
                            const settledAtDate = new Date(settledAt);
                            if (!reference || Number.isNaN(settledAtDate.getTime())) {
                              setActionError(t('payouts_evidence_required'));
                              return;
                            }
                            payoutAction.mutate({
                              payoutId: p.id,
                              action: 'mark-paid',
                              evidence: {
                                settlement_rail: settlementRail,
                                settlement_reference: reference,
                                settled_at: settledAtDate.toISOString(),
                                amount_agorot: p.amountAgorot,
                              },
                            });
                          }}
                          disabled={
                            pendingAction?.payoutId === p.id ||
                            !settlementReference.trim() ||
                            !settledAt
                          }
                          loading={
                            pendingAction?.payoutId === p.id && pendingAction.action === 'mark-paid'
                          }
                        >
                          {t('payouts_mark_paid')}
                        </Button>
                      </div>
                    )}
                  </div>
                </li>
              ))}
            </ul>
          )}
          {actionError && (
            <p role="alert" className="text-sm text-(--color-error)">
              {actionError}
            </p>
          )}
        </section>
      )}
    </QueryBoundary>
  );
}