import { useLocation, Link } from 'react-router-dom'
import { useState, useEffect } from 'react'

const navItems = [
  {
    href: '/',
    label: 'Timeline',
    icon: (
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
    ),
  },
  {
    href: '/servers',
    label: 'Server',
    icon: (
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
      </svg>
    ),
  },
  {
    href: '/processes',
    label: 'Prozesse',
    icon: (
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
      </svg>
    ),
  },
]

export default function Sidebar() {
  const { pathname } = useLocation()
  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'dark')

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme)
    localStorage.setItem('theme', theme)
  }, [theme])

  const toggleTheme = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'))

  return (
    <aside className="sidebar">
      <div className="sidebar-logo">
        <Link to="/">
          <img src="/logo.png" alt="AZ INTEC" />
          <span className="logo-suffix">ion</span>
        </Link>
        <span className="subtitle">Prozess Scheduler</span>
      </div>

      <nav className="sidebar-nav">
        {navItems.map(({ href, label, icon }) => (
          <Link key={href} to={href} className={pathname === href ? 'active' : ''}>
            {icon}
            {label}
          </Link>
        ))}
      </nav>

      <div className="sidebar-footer">
        <div className="theme-row">
          <span>Erscheinungsbild</span>
          <div className="theme-toggle" onClick={toggleTheme} title="Theme wechseln" />
        </div>
        <div className="version">
          <img src="/logo.png" alt="" />
          AZion v23.01
        </div>
      </div>
    </aside>
  )
}
