import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { createRequest } from '@/data/request/create-request';
import { TMarket, TMarketOutcome } from '@/types/market.types';
import { CheckCircleIcon, TrophyIcon } from '@phosphor-icons/react';
import { forwardRef, useImperativeHandle, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

export interface ResolveMarketDialogHandle {
  open: (market: TMarket) => void;
}

interface ResolveMarketDialogProps {
  onSuccess: () => void;
}

const ResolveMarketDialog = forwardRef<
  ResolveMarketDialogHandle,
  ResolveMarketDialogProps
>(({ onSuccess }, ref) => {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const [market, setMarket] = useState<TMarket | null>(null);
  const [winningOutcomeId, setWinningOutcomeId] = useState<number | null>(null);
  const [resolving, setResolving] = useState(false);

  useImperativeHandle(ref, () => ({
    open(m: TMarket) {
      setMarket(m);
      setWinningOutcomeId(m.outcomes?.[0]?.id ?? null);
      setOpen(true);
    },
  }));

  const handleResolve = async () => {
    if (!market || !winningOutcomeId) return;
    setResolving(true);
    const result = await createRequest({
      url: `/api/admin/markets/${market.id}/resolve`,
      formData: { winning_outcome_id: winningOutcomeId },
    });
    setResolving(false);
    if (result) {
      toast.success(t('Market resolved and payouts sent.'));
      setOpen(false);
      onSuccess();
    }
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t('Resolve Market')}</DialogTitle>
        </DialogHeader>

        <div className="space-y-3 py-2">
          <p className="text-sm text-black/60 dark:text-white/60">
            {t('Select the winning outcome for')}:{' '}
            <strong>{market?.title}</strong>
          </p>
          <div className="space-y-2">
            {market?.outcomes?.map((outcome: TMarketOutcome) => (
              <button
                key={outcome.id}
                onClick={() => setWinningOutcomeId(outcome.id)}
                className={`flex w-full items-center gap-3 rounded-xl border p-3 text-left text-sm transition-all ${
                  winningOutcomeId === outcome.id
                    ? 'border-primary bg-primary/5'
                    : 'border-black/10 dark:border-white/10'
                }`}
              >
                <CheckCircleIcon
                  weight={winningOutcomeId === outcome.id ? 'fill' : 'regular'}
                  className={`size-5 shrink-0 ${winningOutcomeId === outcome.id ? 'text-primary' : 'text-black/20 dark:text-white/20'}`}
                />
                <span>{outcome.title}</span>
                <span className="ml-auto text-xs text-black/40 dark:text-white/40">
                  {Math.round(outcome.probability * 100)}%
                </span>
              </button>
            ))}
          </div>
        </div>

        <DialogFooter>
          <Button variant="ghost" onClick={() => setOpen(false)}>
            {t('Cancel')}
          </Button>
          <Button
            onClick={handleResolve}
            loading={resolving}
            disabled={!winningOutcomeId || resolving}
          >
            <TrophyIcon weight="bold" className="mr-1.5 size-4" />
            {t('Confirm & Pay Out')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
});

ResolveMarketDialog.displayName = 'ResolveMarketDialog';

export default ResolveMarketDialog;