'use client';

import { useState } from 'react';
import {
  useAdminDispute,
  useAdjudicateDispute,
  useSubmitEvidence,
} from '@/lib/queries/use-admin';
import { ConfirmWithJustificationDialog } from '@/components/admin/confirm-with-justification-dialog';

type Outcome = 'accepted' | 'submitted_evidence' | 'resolved';

function formatPrice(cents: number) {
  return `$${(cents / 100).toFixed(2)}`;
}

export function DisputeDetailClient({ purchaseId }: { purchaseId: string }) {
  const { data, isLoading, isError } = useAdminDispute(purchaseId);
  const detail = data?.data;
  const adjudicate = useAdjudicateDispute(purchaseId);
  const submitEvidence = useSubmitEvidence(purchaseId);

  const [outcome, setOutcome] = useState<Outcome>('submitted_evidence');
  const [reverseMap, setReverseMap] = useState<Record<string, boolean>>({});
  const [confirmOpen, setConfirmOpen] = useState(false);

  if (isLoading) return <div className="text-sm text-slate-400">Loading…</div>;
  if (isError || !detail)
    return (
      <p className="rounded bg-red-50 p-3 text-sm text-red-700">
        Couldn&apos;t load this dispute.
      </p>
    );

  const onConfirm = (justification: string) => {
    if (outcome === 'submitted_evidence') {
      submitEvidence.mutate(undefined, {
        onSuccess: () => setConfirmOpen(false),
      });
      return;
    }
    adjudicate.mutate(
      {
        outcome,
        justification,
        per_order_actions:
          outcome === 'accepted'
            ? detail.orders.map((o) => ({
                order_id: o.id,
                reverse_transfer: !!reverseMap[o.id],
              }))
            : [],
      },
      { onSuccess: () => setConfirmOpen(false) },
    );
  };

  const lastError = adjudicate.error?.message ?? submitEvidence.error?.message ?? null;

  return (
    <div className="max-w-4xl">
      <h1 className="text-2xl font-bold text-slate-900">
        Dispute · {formatPrice(detail.amount_cents)}
      </h1>
      <p className="mt-1 text-sm text-slate-500">
        Stripe state: {detail.status} · Reason: {detail.reason ?? '—'}
      </p>

      {lastError && (
        <p className="mt-4 rounded bg-red-50 p-3 text-sm text-red-700">
          Action failed: {lastError}
        </p>
      )}

      <section className="mt-6 rounded-lg border border-slate-200 bg-white p-5">
        <h2 className="font-semibold">Per-order breakdown</h2>
        <ul className="mt-3 divide-y divide-slate-100">
          {detail.orders.map((o) => (
            <li key={o.id} className="py-3 flex items-center justify-between">
              <div>
                <div className="font-medium text-slate-900">{o.store.name}</div>
                <div className="text-xs text-slate-400">
                  {formatPrice(o.subtotal + o.shipping_cost)} · status: {o.status} ·{' '}
                  {o.transferred_at ? 'transferred ✅' : 'not transferred'}
                </div>
              </div>
              {outcome === 'accepted' && o.stripe_transfer_id && (
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    aria-label={`Reverse transfer for ${o.store.name}`}
                    checked={!!reverseMap[o.id]}
                    onChange={(e) =>
                      setReverseMap((m) => ({ ...m, [o.id]: e.target.checked }))
                    }
                  />
                  Reverse transfer
                </label>
              )}
            </li>
          ))}
        </ul>
      </section>

      <section className="mt-6 rounded-lg border border-slate-200 bg-white p-5">
        <h2 className="font-semibold">Adjudication</h2>
        <fieldset className="mt-3 space-y-2 text-sm">
          {(
            [
              ['submitted_evidence', 'Submit evidence (platform contests)'],
              ['accepted', 'Accept dispute (refund + per-order reversals)'],
              ['resolved', 'Mark resolved (informational only)'],
            ] as const
          ).map(([value, label]) => (
            <label key={value} className="flex items-center gap-2">
              <input
                type="radio"
                name="outcome"
                value={value}
                checked={outcome === value}
                onChange={() => setOutcome(value)}
              />
              {label}
            </label>
          ))}
        </fieldset>

        <button
          className="mt-4 rounded-md bg-slate-900 px-3 py-1.5 text-sm font-medium text-white"
          onClick={() => setConfirmOpen(true)}
        >
          Submit decision
        </button>
      </section>

      <ConfirmWithJustificationDialog
        open={confirmOpen}
        title={
          outcome === 'accepted'
            ? 'Accept dispute and process refunds?'
            : outcome === 'submitted_evidence'
              ? 'Submit evidence to Stripe?'
              : 'Mark this dispute resolved?'
        }
        description="This action is recorded in the audit log."
        confirmLabel="Confirm"
        onConfirm={onConfirm}
        onCancel={() => setConfirmOpen(false)}
        isPending={adjudicate.isPending || submitEvidence.isPending}
      />
    </div>
  );
}