import React, { useState, useEffect } from 'react';
import { Play, Pause, Square, CheckSquare } from 'lucide-react';

interface TaskTimerProps {
  taskId: string;
  projectId: string;
  onStop: (elapsedHours: number) => void;
  disabled?: boolean;
}

export const TaskTimer: React.FC<TaskTimerProps> = ({ taskId, projectId, onStop, disabled }) => {
  const [isRunning, setIsRunning] = useState(false);
  const [elapsedSeconds, setElapsedSeconds] = useState(0);
  const [startTime, setStartTime] = useState<string | null>(null);

  const syncTimer = () => {
    const stored = localStorage.getItem(`task-timer-${taskId}`);
    if (stored) {
      try {
        const parsed = JSON.parse(stored);
        if (parsed.isRunning && parsed.startTimeEpoch) {
          const elapsed = Math.floor((Date.now() - parsed.startTimeEpoch) / 1000);
          setElapsedSeconds(elapsed > 0 ? Math.floor(elapsed) : 0);
        } else if (!parsed.isRunning && parsed.pausedElapsedSeconds !== undefined) {
          setElapsedSeconds(parsed.pausedElapsedSeconds);
        } else if (parsed.startTimeEpoch) {
          const elapsed = Math.floor((Date.now() - parsed.startTimeEpoch) / 1000);
          setElapsedSeconds(elapsed > 0 ? Math.floor(elapsed) : 0);
        }
        setStartTime(parsed.startTimeString || null);
        setIsRunning(Boolean(parsed.isRunning));
      } catch (e) {
        console.error(e);
      }
    } else {
      setIsRunning(false);
      setElapsedSeconds(0);
      setStartTime(null);
    }
  };

  useEffect(() => {
    syncTimer();
    window.addEventListener('task-timer-updated', syncTimer);
    return () => window.removeEventListener('task-timer-updated', syncTimer);
  }, [taskId]);

  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (isRunning) {
      interval = setInterval(() => {
        const stored = localStorage.getItem(`task-timer-${taskId}`);
        if (stored) {
          try {
            const parsed = JSON.parse(stored);
            if (parsed.startTimeEpoch) {
              const elapsed = Math.floor((Date.now() - parsed.startTimeEpoch) / 1000);
              setElapsedSeconds(elapsed > 0 ? Math.floor(elapsed) : 0);
            }
          } catch (e) {}
        } else {
           setElapsedSeconds((prev) => prev + 1);
        }
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isRunning, taskId]);

  const handleStart = () => {
    if (disabled) return;
    const nowEpoch = Date.now();
    const effectiveStartTimeEpoch = nowEpoch - (elapsedSeconds * 1000);
    const nowString = new Date(effectiveStartTimeEpoch).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
    
    setIsRunning(true);
    if (!startTime) {
      setStartTime(nowString);
    }
    
    localStorage.setItem(`task-timer-${taskId}`, JSON.stringify({
      isRunning: true,
      startTimeEpoch: effectiveStartTimeEpoch,
      startTimeString: startTime || nowString
    }));
  };

  const handlePause = () => {
    setIsRunning(false);
    const stored = localStorage.getItem(`task-timer-${taskId}`);
    if (stored) {
      try {
        const parsed = JSON.parse(stored);
        localStorage.setItem(`task-timer-${taskId}`, JSON.stringify({ ...parsed, isRunning: false, pausedElapsedSeconds: elapsedSeconds }));
      } catch (e) {}
    }
  };

  const handleStop = () => {
    handlePause();
    const elapsedHours = Number((elapsedSeconds / 3600).toFixed(2));
    onStop(elapsedHours);
  };

  // Add a way to reset when externally needed or keep as is? The user said "resume feature off", so maybe just disable resume.

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

  return (
    <div className="flex flex-col items-center gap-1 shrink-0">
      <div className="flex items-center gap-2 shrink-0">
        {isRunning && (
          <span className="font-mono text-xs font-semibold text-green-600 bg-green-50 px-2.5 py-1 rounded-full border border-green-200 whitespace-nowrap shrink-0 shadow-sm">
            {formatTime(elapsedSeconds)}
          </span>
        )}
        {!isRunning && elapsedSeconds > 0 && (
          <span className="font-mono text-xs font-semibold text-gray-500 bg-gray-50 px-2.5 py-1 rounded-full border border-gray-200 whitespace-nowrap shrink-0 shadow-sm">
            {formatTime(elapsedSeconds)}
          </span>
        )}
        {(!isRunning) && (
          <button
            onClick={handleStart}
            className="cursor-pointer w-8 h-8 shrink-0 rounded-md bg-green-500/10 flex items-center justify-center text-green-600 hover:bg-green-500/20 transition-colors"
            title={elapsedSeconds > 0 ? "Resume Timer" : "Start Timer"}
          >
            <Play size={16} fill="currentColor" />
          </button>
        )}

        {(elapsedSeconds > 0 || isRunning) && (
          <button
            onClick={handleStop}
            className="cursor-pointer w-8 h-8 shrink-0 rounded-md bg-brand-950/10 flex items-center justify-center text-brand-950 hover:bg-brand-950/20 transition-colors"
            title="Finish Work & Submit Report"
          >
            <CheckSquare size={16} />
          </button>
        )}
      </div>
      {startTime && (
        <span className="text-[10px] text-gray-400 font-medium whitespace-nowrap">
          Started at {startTime}
        </span>
      )}
    </div>
  );
};