import { useState, useEffect } from 'react';
import { Task, AppState } from './types';
import { generateId } from './utils/timeUtils';
import { useLocalStorage } from './hooks/useLocalStorage';
import { Header } from './components/Header';
import { TaskForm } from './components/TaskForm';
import { TaskItem } from './components/TaskItem';
import { CompletedTasks } from './components/CompletedTasks';
import { Footer } from './components/Footer';
import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string';
import { toast, Toaster } from 'react-hot-toast';
import { SEO } from './components/SEO';

function App() {
  const [showShareModal, setShowShareModal] = useState(false);
  const [shareUrl, setShareUrl] = useState('');
  const [includeCompleted, setIncludeCompleted] = useState(true);

  const handleShare = () => {
    // Filter tasks based on checkbox
    const tasksToShare = includeCompleted
      ? appState.tasks
      : appState.tasks.filter(task => !task.isComplete);

    const stateToShare = {
      ...appState,
      tasks: tasksToShare,
    };

    const compressed = compressToEncodedURIComponent(JSON.stringify(stateToShare));
    setShareUrl(`https://focodo.work/?tasks=${compressed}`);
    // setShareUrl(`https://focodo.work/?tasks=${compressed}`);
    setShowShareModal(true);
  };

  const urlParams = new URLSearchParams(window.location.search);
  const tasksParam = urlParams.get('tasks');
  let initialAppState = {
    tasks: [],
    activeTaskId: null,
  };

  if (tasksParam) {
    try {
      const decompressed = decompressFromEncodedURIComponent(tasksParam);
      if (decompressed) {
        initialAppState = JSON.parse(decompressed);
        // Optionally, save to localStorage for persistence
        window.localStorage.setItem('pomodoroApp', JSON.stringify(initialAppState));
      }
    } catch (e) {
      // handle error, fallback to default
      toast.error('Error loading tasks', {
        duration: 2000,
      });
    }
    // remove tasks param from url
    window.history.replaceState({}, '', window.location.pathname);
  }

  const [appState, setAppState] = useLocalStorage<AppState>('pomodoroApp', initialAppState);

  useEffect(() => {
    window.localStorage.setItem('pomodoroApp', JSON.stringify(appState));
  }, [appState]);
  const [editingTask, setEditingTask] = useState<Task | null>(null);

  const activeTasks = appState.tasks.filter(task => !task.isComplete);
  const completedTasks = appState.tasks.filter(task => task.isComplete);
  const totalWorkTime = completedTasks.reduce((sum, task) => sum + task.totalWorkTime, 0);

  const handleCreateTask = (taskData: Omit<Task, 'id' | 'isComplete' | 'totalWorkTime' | 'isActive' | 'currentTime' | 'isRunning' | 'isBreak'>) => {
    const newTask: Task = {
      ...taskData,
      id: generateId(),
      isComplete: false,
      totalWorkTime: 0,
      isActive: false,
      currentTime: taskData.workDuration * 60, // Convert minutes to seconds
      isRunning: false,
      isBreak: false,
      estimatedPomodoros: taskData.estimatedPomodoros || 1,
      actualPomodoros: 0,
    };

    setAppState((prev: AppState) => ({
      ...prev,
      tasks: [...prev.tasks, newTask],
    }));

    window.localStorage.setItem('pomodoroApp', JSON.stringify({...appState, tasks: [...appState.tasks, newTask]}));

  };

  const handleUpdateTask = (updatedTask: Task) => {
    setAppState((prev: AppState) => {
      // If this task is starting and another task is running, stop the other task
      let newActiveTaskId = prev.activeTaskId;
      const updatedTasks = prev.tasks.map((task: Task) => {
        if (task.id === updatedTask.id) {
          // If this task is starting, make it active
          if (updatedTask.isRunning && !task.isRunning) {
            newActiveTaskId = updatedTask.id;
            return { ...updatedTask, isActive: true };
          }
          return updatedTask;
        } else if (updatedTask.isRunning && task.isRunning) {
          // Stop other running tasks
          return { ...task, isRunning: false, isActive: false };
        }
        return task;
      });

      return {
        ...prev,
        tasks: updatedTasks,
        activeTaskId: newActiveTaskId,
      };
    });
    // window.localStorage.setItem('pomodoroApp', JSON.stringify(appState));
  };

  const handleEditTask = (task: Task) => {
    setEditingTask(task);
  };

  const handleUpdateEditedTask = (taskData: Omit<Task, 'id' | 'isComplete' | 'totalWorkTime' | 'isActive' | 'currentTime' | 'isRunning' | 'isBreak'>) => {
    if (!editingTask) return;

    const updatedTask: Task = {
      ...editingTask,
      ...taskData,
      estimatedPomodoros: taskData.estimatedPomodoros || editingTask.estimatedPomodoros || 1,
      actualPomodoros: typeof taskData.actualPomodoros === 'number' ? taskData.actualPomodoros : editingTask.actualPomodoros || 0,
      // Reset timer if durations changed
      currentTime: editingTask.isBreak 
        ? taskData.breakDuration * 60 
        : taskData.workDuration * 60,
      isRunning: false,
    };

    setAppState((prev: AppState) => ({
      ...prev,
      tasks: prev.tasks.map((task: Task) => 
        task.id === editingTask.id ? updatedTask : task
      ),
    }));

    setEditingTask(null);
  };

  const handleDeleteTask = (taskId: string) => {
    setAppState((prev: AppState) => ({
      ...prev,
      tasks: prev.tasks.filter((task: Task) => task.id !== taskId),
      activeTaskId: prev.activeTaskId === taskId ? null : prev.activeTaskId,
    }));
    // window.localStorage.setItem('pomodoroApp', JSON.stringify(appState));
  };

  const handleCompleteTask = (taskId: string) => {
   
    setAppState((prev: AppState) => ({
      ...prev,
      tasks: prev.tasks.map((task: Task) => 
        task.id === taskId 
          ? { 
              ...task, 
              isComplete: true, 
              isRunning: false, 
              isActive: false,
              completedAt: new Date(),
            }
          : task
      ),
      activeTaskId: prev.activeTaskId === taskId ? null : prev.activeTaskId,
    }));
  };

  const handleDeleteCompletedTask = (taskId: string) => {
    setAppState((prev: AppState) => ({
      ...prev,
      tasks: prev.tasks.filter((task: Task) => task.id !== taskId),
    }));
  };

  // Document title updates based on active timer
  useEffect(() => {
    const activeTask = appState.tasks.find(task => task.isActive && task.isRunning);
    if (activeTask) {
      const minutes = Math.floor(activeTask.currentTime / 60);
      const seconds = activeTask.currentTime % 60;
      const timeStr = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      const sessionType = activeTask.isBreak ? 'Break' : 'Focus';
      document.title = `${timeStr} - ${sessionType} | FocoDo`;
    } else {
      document.title = 'FocoDo - Productivity Timer & Task Manager';
    }
  }, [appState.tasks]);

  useEffect(() => {
    if (showShareModal) {
      const tasksToShare = includeCompleted
        ? appState.tasks
        : appState.tasks.filter(task => !task.isComplete);

      const stateToShare = {
        ...appState,
        tasks: tasksToShare,
      };

      const compressed = compressToEncodedURIComponent(JSON.stringify(stateToShare));
      setShareUrl(`https://focodo.work/?tasks=${compressed}`);
    }
  }, [includeCompleted, appState, showShareModal]);

  return (
   <>
    <SEO 
        title="FocoDo - Free Productivity Timer | Task Manager & To-Do List"
        description="Free Productivity Pomodoro timer Task Manager & To-Do List . Boost productivity with FocoDo — a privacy-first, minimalistic Pomodoro timer, task manager, and to-do list app. Track work sessions, manage tasks, and stay focused."
        keywords="pomodoro timer, pomofocus alternative,, pomofocus, pomodoro technique, focus timer, productivity timer, task manager, to-do list, time tracker, work timer, deep work, minimal app, tomato timer, pomodoro app, study timer, work sessions, break timer, productivity app, pomodoro method, time management, focus app"
      />
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
      <div className="container mx-auto px-4 py-8 max-w-8xl">
        <Header 
          completedTasksCount={completedTasks.length}
          totalWorkTime={totalWorkTime}
          // shareTaskButton={<ShareTaskButton />}
          handleShare={handleShare}
        />

        <main className="space-y-8">
          {/* Task Form */}
          <div className="max-w-2xl mx-auto">
            {editingTask ? (
              <TaskForm
                onSubmit={handleUpdateEditedTask}
                editingTask={editingTask}
                onCancel={() => setEditingTask(null)}
              />
            ) : (
              <TaskForm onSubmit={handleCreateTask} />
            )}
          </div>

          {/* Active Tasks */}
          {activeTasks.length > 0 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-bold text-white text-center">Active Tasks</h2>
              <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
                {activeTasks.map((task) => (
                  <TaskItem
                    key={task.id}
                    task={task}
                    onUpdate={handleUpdateTask}
                    onDelete={handleDeleteTask}
                    onEdit={handleEditTask}
                    onComplete={handleCompleteTask}
                    isActive={task.id === appState.activeTaskId}
                  />
                ))}
              </div>
            </div>
          )}

          {/* Empty State */}
          {activeTasks.length === 0 && completedTasks.length === 0 && (
            <div className="text-center py-12">
              <div className="text-gray-400 text-lg mb-4">
                No tasks yet. Create your first task to get started!
              </div>
              {/* SEO-friendly content for search engines */}
              <div className="hidden">
                <h1>FocoDo - Free Pomodoro Timer</h1>
                <p>Boost your productivity with FocoDo, a free Pomodoro timer. This privacy-first, minimalistic Pomodoro timer and task manager helps you stay focused and organized using the proven Pomodoro technique.</p>
                <h2>Key Features of FocoDo Pomodoro Timer</h2>
                <ul>
                  <li>Free Pomodoro timer</li>
                  <li>25-minute focused work sessions</li>
                  <li>5-minute break timer</li>
                  <li>Task management and to-do list</li>
                  <li>Productivity tracking and analytics</li>
                  <li>Privacy-first design</li>
                  <li>Minimalistic interface</li>
                  <li>No registration required</li>
                </ul>
                <h2>How to Use the Pomodoro Technique with FocoDo</h2>
                <ol>
                  <li>Create a new task with your work goal</li>
                  <li>Start the Pomodoro timer for 25 minutes</li>
                  <li>Focus on your task until the timer rings</li>
                  <li>Take a 5-minute break</li>
                  <li>Repeat the cycle and track your productivity</li>
                </ol>
                <p>FocoDo is the perfect Pomodoro timer for students, professionals, and anyone looking to improve their productivity and time management skills.</p>
              </div>
            </div>
          )}

          {/* Completed Tasks */}
          <CompletedTasks 
            tasks={completedTasks} 
            onDelete={handleDeleteCompletedTask}
          />
        </main>
      </div>
      <div className="h-16"></div>
      <Footer />
      <Toaster />
      {/* <button
        className="absolute flex items-center gap-2 top-4 right-4 z-50 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-2 shadow"
        onClick={handleShare}
        title="Share your tasks"
      >
        Share your tasks
        <Share2 className="w-5 h-5" />
      </button> */}
      {showShareModal && (
        <div 
        // className="bg-gray-700 p-6 rounded-lg border border-gray-600"
        className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
        >
          <div className="bg-gray-700 rounded-lg p-6 shadow-lg max-w-md w-full bg-gray-700 p-6 rounded-lg border border-gray-600">
            <h2 className="text-lg font-bold mb-2 text-gray-300">Share Your Tasks</h2>
            <label className="flex items-center mb-4 text-gray-300">
              <input
                type="checkbox"
                checked={includeCompleted}
                onChange={e => setIncludeCompleted(e.target.checked)}
                className="mr-2"
              />
              Include completed tasks
            </label>
            <input
              // className="w-full p-2 border rounded mb-4"
            className="w-full mb-4 px-3 p-2 bg-gray-800 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"

              value={shareUrl}
              readOnly
              onFocus={e => e.target.select()}
            />
            <button
              className="bg-blue-600 text-white px-4 py-2 rounded mr-2"
              onClick={() => {
                // notify user that the link has been copied with a toast
                navigator.clipboard.writeText(shareUrl);
                setShowShareModal(false)
                toast.success('Link copied to clipboard', {
                  duration: 2000,
                });
              }}
            >
              Copy Link
            </button>
            <button
              className="bg-gray-300 px-4 py-2 rounded"
              onClick={() => setShowShareModal(false)}
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
   </>
  );
}

export default App;