'use client';

import { Button } from '@tale/ui/button';
import { useState, useCallback } from 'react';

import { useConvexMutation } from '@/app/hooks/use-convex-mutation';
import { toast } from '@/app/hooks/use-toast';
import { api } from '@/convex/_generated/api';
import { useT } from '@/lib/i18n/client';
import { cn } from '@/lib/utils/cn';

import { useArenaMode } from './arena-mode-context';

interface ArenaVerdictBarProps {
  threadIdA: string;
  threadIdB: string;
  organizationId: string;
}

type Verdict = 'a_better' | 'b_better' | 'tie' | 'both_bad';

export function ArenaVerdictBar({
  threadIdA,
  threadIdB,
  organizationId,
}: ArenaVerdictBarProps) {
  const { t } = useT('chat');
  const {
    modelA,
    modelB,
    verdict: selectedVerdict,
    setVerdict,
  } = useArenaMode();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const { mutateAsync: submitFeedback } = useConvexMutation(
    api.feedback.mutations.submitFeedback,
  );

  const handleVerdict = useCallback(
    async (verdict: Verdict) => {
      if (isSubmitting) return;
      setIsSubmitting(true);
      try {
        const rating = verdict === 'both_bad' ? 'negative' : 'positive';
        const messageId = `arena:${threadIdA}:${threadIdB}`;

        await submitFeedback({
          organizationId,
          threadId: threadIdA,
          messageId,
          rating,
          metadata: {
            arenaVerdict: verdict,
            modelA: modelA ?? undefined,
            modelB: modelB ?? undefined,
          },
        });

        setVerdict(verdict);

        toast({
          title: t('arena.verdictRecorded'),
        });
      } catch {
        toast({
          title: t('arena.verdictError'),
          variant: 'destructive',
        });
      } finally {
        setIsSubmitting(false);
      }
    },
    [
      isSubmitting,
      submitFeedback,
      setVerdict,
      organizationId,
      threadIdA,
      threadIdB,
      modelA,
      modelB,
      t,
    ],
  );

  const verdicts: { key: Verdict; label: string }[] = [
    { key: 'a_better', label: t('arena.aBetter') },
    { key: 'b_better', label: t('arena.bBetter') },
    { key: 'tie', label: t('arena.tie') },
    { key: 'both_bad', label: t('arena.bothBad') },
  ];

  return (
    <div
      className="border-border flex items-center justify-center gap-2 border-t px-4 py-3"
      role="group"
      aria-label={t('arena.verdictLabel')}
    >
      {verdicts.map(({ key, label }) => (
        <Button
          key={key}
          variant={selectedVerdict === key ? 'primary' : 'secondary'}
          size="sm"
          onClick={() => void handleVerdict(key)}
          disabled={isSubmitting || selectedVerdict !== null}
          className={cn(
            selectedVerdict === key && 'pointer-events-none',
            selectedVerdict !== null && selectedVerdict !== key && 'opacity-50',
          )}
        >
          {label}
        </Button>
      ))}
    </div>
  );
}
