import React, { useState } from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Outlet,
} from 'react-router-dom';
import logo from './assets/logo.png';
import './App.css';

// Lucide Icons importieren
import {
  LayoutDashboard,
  Calendar,
  Boxes,
  Image,
  User,
  Settings,
  Monitor,
  MonitorDotIcon,
  LogOut,
  Wrench,
} from 'lucide-react';
import { ToastProvider } from './components/ToastProvider';

const sidebarItems = [
  { name: 'Dashboard', path: '/', icon: LayoutDashboard },
  { name: 'Termine', path: '/termine', icon: Calendar },
  { name: 'Ressourcen', path: '/ressourcen', icon: Boxes },
  { name: 'Raumgruppen', path: '/infoscr_groups', icon: MonitorDotIcon },
  { name: 'Infoscreen-Clients', path: '/clients', icon: Monitor },
  { name: 'Erweiterungsmodus', path: '/setup', icon: Wrench },
  { name: 'Medien', path: '/medien', icon: Image },
  { name: 'Benutzer', path: '/benutzer', icon: User },
  { name: 'Einstellungen', path: '/einstellungen', icon: Settings },
];

// Dummy Components (können in eigene Dateien ausgelagert werden)
import Dashboard from './dashboard';
import Appointments from './appointments';
import Ressourcen from './ressourcen';
import Infoscreens from './clients';
import Infoscreen_groups from './infoscreen_groups';
import Media from './media';
import Benutzer from './benutzer';
import Einstellungen from './einstellungen';
import SetupMode from './SetupMode';

// ENV aus .env holen (Platzhalter, im echten Projekt über process.env oder API)
// const ENV = import.meta.env.VITE_ENV || 'development';

const Layout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className="layout-container">
      {/* Sidebar */}
      <aside
        className={`sidebar-theme flex flex-col transition-all duration-300 ${collapsed ? 'w-20' : 'w-30'}`}
      >
        <div
          className="h-20 flex items-center justify-center border-b"
          style={{ borderColor: 'var(--sidebar-border)' }}
        >
          <img
            src={logo}
            alt="Logo"
            className="h-12"
            style={{ display: collapsed ? 'none' : 'block' }}
          />
        </div>
        <button
          className="sidebar-btn p-2 focus:outline-none transition-colors"
          onClick={() => setCollapsed(!collapsed)}
          aria-label={collapsed ? 'Sidebar ausklappen' : 'Sidebar einklappen'}
          type="button"
        >
          <span style={{ fontSize: 20 }}>{collapsed ? '▶' : '◀'}</span>
        </button>
        <nav className="flex-1 mt-4">
          {sidebarItems.map(item => {
            const Icon = item.icon;
            return (
              <Link
                key={item.path}
                to={item.path}
                className="sidebar-link flex items-center gap-3 px-6 py-3 transition-colors no-underline"
                title={collapsed ? item.name : undefined}
              >
                <Icon size={22} />
                {!collapsed && item.name}
              </Link>
            );
          })}
        </nav>
        {/* Abmelden-Button immer ganz unten */}
        <div className="mb-4 mt-auto">
          <button
            className="sidebar-logout flex items-center gap-3 px-6 py-3 w-full transition-colors no-underline"
            title={collapsed ? 'Abmelden' : undefined}
            onClick={() => {
              // Hier ggf. Logout-Logik einfügen
              window.location.href = '/logout';
            }}
            type="button"
          >
            <LogOut size={22} />
            {!collapsed && 'Abmelden'}
          </button>
        </div>
      </aside>
      {/* Main Content */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <header
          className="flex items-center px-8 shadow"
          style={{
            backgroundColor: '#e5d8c7',
            color: '#78591c',
            height: 'calc(48px + 20px)',
            fontSize: '1.15rem',
            fontFamily:
              'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
          }}
        >
          <img
            src={logo}
            alt="Logo"
            className="h-12 mr-4"
            style={{ marginTop: 10, marginBottom: 10 }}
          />
          <span className="text-2xl font-bold mr-8">Infoscreen-Management</span>
          <span className="ml-auto" style={{ color: '#78591c' }}>
            [Organisationsname]
          </span>
        </header>
        <main className="flex-1 p-8 bg-gray-100 page-content-scroll">
          <Outlet />
        </main>
      </div>
    </div>
  );
};


const App: React.FC = () => {

  // Automatische Navigation zu /clients bei leerer Beschreibung entfernt

  return (
    <ToastProvider>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Dashboard />} />
          <Route path="termine" element={<Appointments />} />
          <Route path="ressourcen" element={<Ressourcen />} />
          <Route path="infoscr_groups" element={<Infoscreen_groups />} />
          <Route path="medien" element={<Media />} />
          <Route path="benutzer" element={<Benutzer />} />
          <Route path="einstellungen" element={<Einstellungen />} />
          <Route path="clients" element={<Infoscreens />} />
          <Route path="setup" element={<SetupMode />} />
        </Route>
      </Routes>
    </ToastProvider>
  );
};

const AppWrapper: React.FC = () => (
  <Router>
    <App />
  </Router>
);

export default AppWrapper;