import { CheckCircle2, Loader2, Timer } from 'lucide-react';

import { useEffect, useState } from 'react';

import { cn } from '@/lib/utils';

interface AnalysisRunStatusProps {
  run: { status: string };
}

const ANALYSIS_STEPS = [
  'Fetching GSC data',
  'Calculating traffic deltas',
  'Scoring recommendations',
  'Generating insights',
];

export default function AnalysisRunStatus({ run }: AnalysisRunStatusProps) {
  const [elapsed, setElapsed] = useState<number>(0);

  useEffect(() => {
    if (run.status !== 'processing') return;

    const startedAt = Date.now();
    const interval = setInterval(() => {
      setElapsed(Date.now() - startedAt);
    }, 100);

    return () => clearInterval(interval);
  }, [run.status]);

  const currentStep = Math.min(3, Math.floor(elapsed / 15000));

  if (run.status === 'pending') {
    return (
      <div className="rounded-lg border border-warning/20 bg-warning/5 p-6 text-center">
        <Timer className="h-8 w-8 mx-auto text-warning" />
        <p className="mt-3 font-medium text-foreground">Analysis queued</p>
        <p className="text-sm text-muted-foreground">
          Your analysis is waiting to start. This usually begins within a few seconds.
        </p>
      </div>
    );
  }

  if (run.status === 'completed') {
    return (
      <div className="rounded-lg border border-success/20 bg-success/5 p-6 text-center">
        <CheckCircle2 className="h-8 w-8 mx-auto text-success" />
        <p className="mt-3 font-medium text-foreground">Analysis complete</p>
      </div>
    );
  }

  // Default: processing — UIUX-002: 4-step progress indicator
  return (
    <div className="rounded-lg border border-info/20 bg-info/5 p-6">
      <div className="space-y-3">
        <div className="flex items-center gap-2">
          <Loader2 className="h-4 w-4 animate-spin" />
          <span className="text-sm font-medium">{ANALYSIS_STEPS[currentStep]}</span>
          <span className="text-xs text-muted-foreground">
            Step {currentStep + 1} of {ANALYSIS_STEPS.length}
          </span>
        </div>
        <div className="flex gap-1">
          {ANALYSIS_STEPS.map((_, i) => (
            <div
              key={i}
              className={cn(
                'h-1 flex-1 rounded-full transition-colors',
                i <= currentStep ? 'bg-primary' : 'bg-muted',
              )}
            />
          ))}
        </div>
        <p className="text-sm text-muted-foreground">
          Comparing traffic patterns across your pages — typically takes 30–60 seconds for small
          sites, up to 2 minutes for larger sites. The page will update automatically.
        </p>
      </div>
    </div>
  );
}