import { useState, useEffect } from 'react';
import { LayoutGrid, Package, Zap, Moon, Sun, Menu, ChevronLeft } from 'lucide-react';
import { Dashboard } from './components/Dashboard';
import { AppsView } from './components/Uninstaller/AppsView';
import { ToastProvider } from './components/ui';

type View = 'dashboard' | 'apps';

function App() {
  const [currentView, setCurrentView] = useState<View>('dashboard');
  const [isDark, setIsDark] = useState(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  useEffect(() => {
    // Check local storage or system preference
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'dark' || (!storedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      setIsDark(true);
      document.documentElement.classList.add('dark');
    } else {
      setIsDark(false);
      document.documentElement.classList.remove('dark');
    }
  }, []);

  const toggleTheme = () => {
    const newTheme = !isDark;
    setIsDark(newTheme);
    if (newTheme) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  };

  return (
    <ToastProvider>
      <div className="h-screen w-screen bg-gray-50 dark:bg-[#0f0f0f] overflow-hidden font-[-apple-system,BlinkMacSystemFont,'Inter','Segoe_UI',Roboto,Helvetica,Arial,sans-serif] flex text-gray-900 dark:text-white transition-colors duration-300">

        {/* Sidebar */}
        <div
          className={`shrink-0 bg-white dark:bg-white/5 border-r border-gray-200 dark:border-white/10 flex flex-col transition-all duration-300 ease-in-out backdrop-blur-xl z-20
            ${isSidebarOpen ? 'w-64' : 'w-20'}
            `}
        >
          {/* Header & Toggle */}
          <div className={`flex items-center gap-3 px-4 mb-8 mt-4 ${isSidebarOpen ? 'justify-between' : 'justify-center'}`}>
            {isSidebarOpen ? (
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-500 to-purple-500 flex items-center justify-center text-white shrink-0 shadow-lg">
                  <Zap className="w-5 h-5 fill-current" />
                </div>
                <span className="font-bold text-xl tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400 whitespace-nowrap">
                  Antigravity
                </span>
              </div>
            ) : (
              <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-500 to-purple-500 flex items-center justify-center text-white shrink-0 shadow-lg cursor-pointer" onClick={() => setIsSidebarOpen(true)}>
                <Zap className="w-5 h-5 fill-current" />
              </div>
            )}

            {/* Toggle Button */}
            {isSidebarOpen && (
              <button
                onClick={() => setIsSidebarOpen(false)}
                className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
              >
                <ChevronLeft className="w-5 h-5" />
              </button>
            )}
          </div>

          {/* Navigation */}
          <nav className="space-y-2 flex-1 px-3">
            <NavItem
              icon={<LayoutGrid className="w-5 h-5" />}
              label="Dashboard"
              isActive={currentView === 'dashboard'}
              onClick={() => setCurrentView('dashboard')}
              isCollapsed={!isSidebarOpen}
            />
            <NavItem
              icon={<Package className="w-5 h-5" />}
              label="Uninstaller"
              isActive={currentView === 'apps'}
              onClick={() => setCurrentView('apps')}
              isCollapsed={!isSidebarOpen}
            />
          </nav>

          {/* Footer Actions */}
          <div className="mt-auto space-y-4 px-3 mb-4">
            {/* Theme Toggle */}
            <button
              onClick={toggleTheme}
              className={`w-full flex items-center gap-3 px-3 py-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10 rounded-xl transition-colors ${!isSidebarOpen && 'justify-center'}`}
              title={isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
            >
              {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
              {isSidebarOpen && (
                <span className="font-medium text-sm whitespace-nowrap">
                  {isDark ? 'Light Mode' : 'Dark Mode'}
                </span>
              )}
            </button>

            {/* Hamburger / Menu Expand Button (If collapsed) */}
            {!isSidebarOpen && (
              <button
                onClick={() => setIsSidebarOpen(true)}
                className="w-full flex items-center justify-center p-2 text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-xl transition-colors"
              >
                <Menu className="w-5 h-5" />
              </button>
            )}

            {isSidebarOpen && (
              <div className="pt-4 border-t border-gray-200 dark:border-white/10 mx-2">
                <p className="text-[10px] text-gray-500 font-medium">
                  v0.1.0 Beta
                </p>
              </div>
            )}
          </div>
        </div>

        {/* Main Content */}
        <div className="flex-1 min-w-0 h-full overflow-hidden bg-white/50 dark:bg-transparent relative transition-all">
          {/* Mobile Sidebar Overlay Trigger? No, focusing on desktop sidebar slide first as per Electron app context */}
          <div className="absolute inset-0 overflow-auto">
            {currentView === 'dashboard' ? <Dashboard /> : <AppsView />}
          </div>
        </div>
      </div>
    </ToastProvider>
  );
}

function NavItem({ icon, label, isActive, onClick, isCollapsed }: { icon: React.ReactNode, label: string, isActive: boolean, onClick: () => void, isCollapsed: boolean }) {
  return (
    <button
      onClick={onClick}
      className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 group ${isActive
        ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/25'
        : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-gray-900 dark:hover:text-white'
        } ${isCollapsed ? 'justify-center' : ''}`}
      title={isCollapsed ? label : undefined}
    >
      <div className={`shrink-0 transition-transform duration-200 ${isActive ? 'scale-110' : 'group-hover:scale-110'}`}>
        {icon}
      </div>
      {!isCollapsed && (
        <span className="font-medium text-sm whitespace-nowrap animate-in fade-in slide-in-from-left-2 duration-200">{label}</span>
      )}
      {isActive && !isCollapsed && <div className="ml-auto w-1.5 h-1.5 rounded-full bg-white animate-pulse" />}
    </button>
  );
}

export default App;
