import { useEffect, useState, useCallback } from 'react';
import { TimerView } from './components/TimerView';
import { TaskList } from './components/TaskList';
import { SettingsPanel } from './components/SettingsPanel';
import { NotificationOverlay } from './components/NotificationOverlay';
import { useTimerEvents } from './hooks/useTimerEvents';
import { useTaskStore } from './store/taskStore';
import { useAudioStore } from './store/audioStore';
import { useSettingsStore } from './store/settingsStore';

function GearIcon() {
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="12" r="3" />
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
    </svg>
  );
}

function App() {
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [notifVisible, setNotifVisible] = useState(false);
  const [notifTaskId, setNotifTaskId] = useState<string | null>(null);

  const fetchTasks = useTaskStore((s) => s.fetchTasks);
  const fetchSettings = useSettingsStore((s) => s.fetchSettings);
  const fetchAudioStatus = useAudioStore((s) => s.fetchStatus);

  // Bootstrap data on mount
  useEffect(() => {
    fetchTasks();
    fetchSettings();
    fetchAudioStatus();
  }, [fetchTasks, fetchSettings, fetchAudioStatus]);

  const handleCompleted = useCallback((taskId: string | null) => {
    setNotifTaskId(taskId);
    setNotifVisible(true);
  }, []);

  useTimerEvents(handleCompleted);

  return (
    <div
      style={{
        display: 'flex',
        width: '100vw',
        height: '100vh',
        background: 'var(--ink-0)',
        overflow: 'hidden',
        position: 'relative',
      }}
    >
      {/* Sidebar */}
      <TaskList />

      {/* Main area */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
        <button
          onClick={() => setSettingsOpen(true)}
          title="Settings"
          style={{
            position: 'absolute',
            top: '14px',
            right: '16px',
            display: 'flex',
            alignItems: 'center',
            padding: '6px',
            border: 'none',
            background: 'transparent',
            color: 'var(--fg-3)',
            cursor: 'pointer',
            borderRadius: 'var(--r-2)',
            transition: 'color 0.15s ease',
            zIndex: 2,
          }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLButtonElement).style.color = 'var(--fg-1)';
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLButtonElement).style.color = 'var(--fg-3)';
          }}
        >
          <GearIcon />
        </button>

        <TimerView />
      </div>

      {/* Overlays */}
      <SettingsPanel open={settingsOpen} onClose={() => setSettingsOpen(false)} />
      <NotificationOverlay
        visible={notifVisible}
        taskId={notifTaskId}
        onDismiss={() => setNotifVisible(false)}
      />
    </div>
  );
}

export default App;
