'use client';

import { useState, useEffect } from 'react';

interface GenerationTimerProps {
  isGenerating: boolean;
  startTime?: number;
  variant?: 'inline' | 'badge';
}

export function GenerationTimer({
  isGenerating,
  startTime,
  variant = 'inline',
}: GenerationTimerProps) {
  const [elapsed, setElapsed] = useState(0);

  useEffect(() => {
    if (!isGenerating || !startTime) {
      setElapsed(0);
      return;
    }

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

    return () => clearInterval(interval);
  }, [isGenerating, startTime]);

  const formatTime = (ms: number) => {
    return (ms / 1000).toFixed(1);
  };

  if (!isGenerating && elapsed === 0) {
    return null;
  }

  if (variant === 'badge') {
    return (
      <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-md text-xs text-gray-300">
        <svg
          className="w-3.5 h-3.5 text-amber-400"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <span className="font-medium">{formatTime(elapsed)}s</span>
      </div>
    );
  }

  return (
    <span className="inline-flex items-center gap-1.5 text-sm text-gray-400">
      <svg className="w-4 h-4 text-amber-400 animate-spin" fill="none" viewBox="0 0 24 24">
        <circle
          className="opacity-25"
          cx="12"
          cy="12"
          r="10"
          stroke="currentColor"
          strokeWidth="4"
        ></circle>
        <path
          className="opacity-75"
          fill="currentColor"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        ></path>
      </svg>
      <span className="font-medium">{formatTime(elapsed)}s</span>
    </span>
  );
}

interface CompletedTimerBadgeProps {
  durationMs: number;
}

export function CompletedTimerBadge({ durationMs }: CompletedTimerBadgeProps) {
  const formatTime = (ms: number) => {
    return (ms / 1000).toFixed(1);
  };

  return (
    <div className="inline-flex items-center gap-1 px-2 py-1 bg-green-900/20 border border-green-700/50 rounded text-xs text-green-400">
      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      <span className="font-medium">{formatTime(durationMs)}s</span>
    </div>
  );
}
