'use client';

import { useState, useEffect } from 'react';
import { Moon, Sun } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useTheme } from './ThemeProvider';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const [isAnimating, setIsAnimating] = useState(false);

  // Track initial mount to prevent animation on first render
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(true);
  }, []);

  const toggleTheme = () => {
    if (isAnimating) return;
    
    setIsAnimating(true);
    
    // Set new theme after a small delay for animation
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    setTimeout(() => {
      setTheme(newTheme);
      setTimeout(() => {
        setIsAnimating(false);
      }, 300);
    }, 200);
  };

  if (!isMounted) {
    return (
      <Button 
        variant="ghost" 
        size="icon" 
        className="opacity-0"
      >
        <Sun className="h-[1.2rem] w-[1.2rem]" />
      </Button>
    );
  }

  return (
    <Button 
      variant="ghost" 
      size="icon" 
      onClick={toggleTheme}
      className={`relative overflow-hidden hover:bg-muted/80 hover:text-foreground transition-all duration-300 ${isAnimating ? 'cursor-wait' : ''}`}
      aria-label={
        theme === 'dark' 
          ? 'Switch to light theme' 
          : 'Switch to dark theme'
      }
      disabled={isAnimating}
    >
      <div className={`absolute inset-0 bg-primary/5 rounded-full transition-all duration-500 ${isAnimating ? 'scale-[5] opacity-0' : 'scale-0 opacity-0'}`}></div>
      
      <div className="relative">
        {theme === 'dark' ? (
          <Sun className={`h-5 w-5 transition-all duration-300 ${isAnimating ? 'rotate-90 scale-50 opacity-0' : 'rotate-0 scale-100 opacity-100'}`} />
        ) : (
          <Moon className={`h-5 w-5 transition-all duration-300 ${isAnimating ? 'rotate-90 scale-50 opacity-0' : 'rotate-0 scale-100 opacity-100'}`} />
        )}
      </div>
    </Button>
  );
}