'use client';

import { AlertCircle, Loader  } from 'lucide-react';

import { Progress } from '@/components/ui/progress';
import type { TicketProcessingProgress } from '../../../hooks/useTicketDetailEvents';

import { TicketActionCard } from './TicketActionCard';

interface ProcessingTicketActionProps {
  progress: TicketProcessingProgress | null;
  errorMessage: string | null;
}

function getProgressMessage(progress: TicketProcessingProgress | null) {
  if (!progress) return 'Waiting for analysis updates.';
  if (progress.progress >= 95) {
    return progress.message ?? 'Rendering annotated video...';
  }
  return progress.message ?? 'Processing video.';
}

export function ProcessingTicketAction({
  progress,
  errorMessage,
}: ProcessingTicketActionProps) {
  const progressValue = progress ? progress.progress : 0;
  const hasProgress = Boolean(progress);

  return (
    <TicketActionCard
      icon={Loader}
      iconClassName="animate-spin"
      title="Analyzing Video"
    >
      <div className="space-y-4">
        <div className="space-y-2">
          <div className="flex items-center justify-between gap-3 text-sm">
            <span className="font-medium text-foreground">
              {getProgressMessage(progress)}
            </span>
            <span className="shrink-0 text-muted-foreground">
              {hasProgress ? `${Math.round(progressValue)}%` : '--'}
            </span>
          </div>
          <Progress value={hasProgress ? progressValue : 0} />
        </div>

        {errorMessage && (
          <div className="flex gap-2 rounded-md border border-destructive/25 bg-destructive/10 p-3 text-sm text-destructive">
            <AlertCircle className="mt-0.5 size-4 shrink-0" />
            <span>{errorMessage}</span>
          </div>
        )}
      </div>
    </TicketActionCard>
  );
}