'use client';

import { useState, useEffect, useCallback, useRef } from 'react';
import { TomatoIcon, PlayIcon, PauseIcon, RefreshIcon, XIcon } from '@/components/ui/Icons';
import { playTimerEnd } from '@/lib/sounds';

interface PomodoroTimerProps {
  isExpanded: boolean;
  onToggle: () => void;
  variant?: 'header' | 'floating';
}

const WORK_MINUTES = 25;
const SHORT_BREAK_MINUTES = 5;
const LONG_BREAK_MINUTES = 15;

export default function PomodoroTimer({ isExpanded, onToggle, variant = 'header' }: PomodoroTimerProps) {
  const [mode, setMode] = useState<'work' | 'shortBreak' | 'longBreak'>('work');
  const [timeLeft, setTimeLeft] = useState(WORK_MINUTES * 60);
  const [isRunning, setIsRunning] = useState(false);
  const [cycles, setCycles] = useState(0);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);

  const getDuration = useCallback(() => {
    switch (mode) {
      case 'work': return WORK_MINUTES * 60;
      case 'shortBreak': return SHORT_BREAK_MINUTES * 60;
      case 'longBreak': return LONG_BREAK_MINUTES * 60;
    }
  }, [mode]);

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  const getProgress = () => {
    const duration = getDuration();
    return ((duration - timeLeft) / duration) * 100;
  };

  useEffect(() => {
    if (isRunning && timeLeft > 0) {
      intervalRef.current = setInterval(() => {
        setTimeLeft(prev => {
          if (prev <= 1) {
            // Timer finished
            playTimerEnd();
            setIsRunning(false);
            
            if (mode === 'work') {
              const newCycles = cycles + 1;
              setCycles(newCycles);
              // After 4 work sessions, take a long break
              if (newCycles % 4 === 0) {
                setMode('longBreak');
                return LONG_BREAK_MINUTES * 60;
              } else {
                setMode('shortBreak');
                return SHORT_BREAK_MINUTES * 60;
              }
            } else {
              // Break is over, back to work
              setMode('work');
              return WORK_MINUTES * 60;
            }
          }
          return prev - 1;
        });
      }, 1000);
    } else {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    }

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, [isRunning, timeLeft, mode, cycles]);

  const toggleTimer = () => setIsRunning(!isRunning);
  
  const resetTimer = () => {
    setIsRunning(false);
    setTimeLeft(getDuration());
  };

  const skipToNext = () => {
    setIsRunning(false);
    if (mode === 'work') {
      const newCycles = cycles + 1;
      setCycles(newCycles);
      if (newCycles % 4 === 0) {
        setMode('longBreak');
        setTimeLeft(LONG_BREAK_MINUTES * 60);
      } else {
        setMode('shortBreak');
        setTimeLeft(SHORT_BREAK_MINUTES * 60);
      }
    } else {
      setMode('work');
      setTimeLeft(WORK_MINUTES * 60);
    }
  };

  const getModeLabel = () => {
    switch (mode) {
      case 'work': return 'Focus';
      case 'shortBreak': return 'Short Break';
      case 'longBreak': return 'Long Break';
    }
  };

  const getModeColor = () => {
    switch (mode) {
      case 'work': return 'text-indigo-600 dark:text-indigo-400';
      case 'shortBreak': return 'text-green-600 dark:text-green-400';
      case 'longBreak': return 'text-blue-600 dark:text-blue-400';
    }
  };

  // Compact view (icon only)
  if (!isExpanded) {
    if (variant === 'floating') {
      // Floating Action Button for mobile
      return (
        <button
          onClick={onToggle}
          className="relative w-14 h-14 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-105 active:scale-95"
          aria-label="Open timer"
        >
          <TomatoIcon size={28} className="text-white" />
          {isRunning && (
            <span className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white dark:border-gray-900 animate-pulse" />
          )}
          {/* Time badge */}
          {isRunning && (
            <span className="absolute -bottom-1 bg-gray-900 text-white text-xs px-2 py-0.5 rounded-full">
              {Math.ceil(timeLeft / 60)}m
            </span>
          )}
        </button>
      );
    }

    // Header variant - make it pop!
    return (
      <button
        onClick={onToggle}
        className="relative flex items-center gap-2 px-3 py-2 bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full transition-colors border border-red-200 dark:border-red-800"
        aria-label="Open timer"
      >
        <TomatoIcon size={22} />
        <span className="hidden sm:inline text-sm font-bold">Focus</span>
        {isRunning && (
          <>
            <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900 animate-pulse" />
            <span className="hidden sm:inline text-xs bg-red-100 dark:bg-red-900/40 px-2 py-0.5 rounded-full ml-1">
              {Math.ceil(timeLeft / 60)}m
            </span>
          </>
        )}
      </button>
    );
  }

  // Expanded view - position based on variant
  const positionClasses = variant === 'floating' 
    ? "fixed bottom-20 right-4 sm:bottom-auto sm:top-20 sm:right-4 w-[calc(100vw-2rem)] sm:w-80"
    : "absolute right-0 top-full mt-2 w-72";

  return (
    <div className={`${positionClasses} bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 p-4 z-50`}>
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <TomatoIcon className={getModeColor()} size={18} />
          <span className={`font-medium ${getModeColor()}`}>{getModeLabel()}</span>
        </div>
        <button
          onClick={onToggle}
          className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
          aria-label="Close timer"
        >
          <XIcon size={18} />
        </button>
      </div>

      {/* Timer Display */}
      <div className="text-center mb-4">
        <div className="text-4xl font-mono font-bold text-gray-900 dark:text-gray-100 mb-2">
          {formatTime(timeLeft)}
        </div>
        
        {/* Progress Bar */}
        <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div
            className={`h-full transition-all duration-1000 ${
              mode === 'work' ? 'bg-indigo-500' : 'bg-green-500'
            }`}
            style={{ width: `${getProgress()}%` }}
          />
        </div>
      </div>

      {/* Cycles indicator */}
      <div className="flex justify-center gap-1 mb-4">
        {[...Array(4)].map((_, i) => (
          <div
            key={i}
            className={`w-2 h-2 rounded-full ${
              i < (cycles % 4) ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
            }`}
          />
        ))}
      </div>

      {/* Controls */}
      <div className="flex items-center justify-center gap-3">
        <button
          onClick={resetTimer}
          className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
          aria-label="Reset timer"
        >
          <RefreshIcon size={18} />
        </button>
        
        <button
          onClick={toggleTimer}
          className={`p-3 rounded-full ${
            isRunning
              ? 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400'
              : 'bg-indigo-100 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400'
          }`}
          aria-label={isRunning ? 'Pause timer' : 'Start timer'}
        >
          {isRunning ? <PauseIcon size={20} /> : <PlayIcon size={20} />}
        </button>
        
        <button
          onClick={skipToNext}
          className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-sm font-medium"
          aria-label="Skip to next"
        >
          Skip
        </button>
      </div>

      {/* Mode switcher */}
      <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <div className="flex gap-2">
          <button
            onClick={() => { setMode('work'); setTimeLeft(WORK_MINUTES * 60); setIsRunning(false); }}
            className={`flex-1 py-1 px-2 text-xs rounded ${
              mode === 'work'
                ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
                : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700'
            }`}
          >
            Work (25m)
          </button>
          <button
            onClick={() => { setMode('shortBreak'); setTimeLeft(SHORT_BREAK_MINUTES * 60); setIsRunning(false); }}
            className={`flex-1 py-1 px-2 text-xs rounded ${
              mode === 'shortBreak'
                ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
                : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700'
            }`}
          >
            Short (5m)
          </button>
          <button
            onClick={() => { setMode('longBreak'); setTimeLeft(LONG_BREAK_MINUTES * 60); setIsRunning(false); }}
            className={`flex-1 py-1 px-2 text-xs rounded ${
              mode === 'longBreak'
                ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
                : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700'
            }`}
          >
            Long (15m)
          </button>
        </div>
      </div>
    </div>
  );
}
