import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';

interface SearchAnimationProps {
  startedAt: number;
}

export function SearchAnimation({ startedAt }: SearchAnimationProps) {
  const [elapsed, setElapsed] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setElapsed(Math.floor((Date.now() - startedAt) / 1000));
    }, 1000);
    return () => clearInterval(interval);
  }, [startedAt]);

  const minutes = Math.floor(elapsed / 60);
  const seconds = elapsed % 60;
  const timeStr = `${minutes}:${seconds.toString().padStart(2, '0')}`;

  return (
    <div className="flex flex-col items-center">
      <div className="relative w-40 h-40 sm:w-48 sm:h-48">
        <div className="absolute inset-0 rounded-full border-2 border-amber-500/20" />
        <div className="absolute inset-3 rounded-full border border-amber-500/10" />
        <div className="absolute inset-6 rounded-full border border-amber-500/5" />

        <motion.div
          className="absolute inset-0"
          animate={{ rotate: 360 }}
          transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
        >
          <div
            className="absolute top-1/2 left-1/2 w-1/2 h-0.5 origin-left"
            style={{
              background: 'linear-gradient(90deg, rgba(245,158,11,0.6), transparent)',
            }}
          />
        </motion.div>

        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-3xl font-mono font-bold text-text-primary">{timeStr}</span>
          <span className="text-xs text-text-muted mt-1 uppercase tracking-wider">Elapsed</span>
        </div>

        <motion.div
          className="absolute inset-0 rounded-full border-2 border-amber-500/30"
          animate={{ scale: [1, 1.1, 1], opacity: [0.3, 0, 0.3] }}
          transition={{ duration: 2, repeat: Infinity }}
        />
      </div>

      <motion.p
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-lg font-semibold text-text-primary mt-6 uppercase tracking-wider"
      >
        Searching
      </motion.p>
    </div>
  );
}
