import { useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import {
  IconTicket,
  IconUsers,
  IconTargetArrow,
  IconReportMoney,
  IconScale,
  IconFolders,
  IconCalendar,
  IconSettings,
  IconLogout,
  IconLayoutSidebarLeftCollapse,
  IconLayoutSidebarLeftExpand,
  IconExternalLink,
} from '@tabler/icons-react'
import { openProjectAdmin } from '../lib/employeeAdminApi'

export default function Sidebar() {
  const { user, logout, isAdmin } = useAuth()
  const navigate = useNavigate()
  const location = useLocation()
  const [collapsed, setCollapsed] = useState(false)
  const [switching, setSwitching] = useState(false)

  const handleProjectAdmin = async () => {
    setSwitching(true)
    await openProjectAdmin()
  }

  const handleLogout = async () => {
    await logout()
    navigate('/login')
  }

  // Eine flache Liste: fuer ein kleines Team reichen acht Eintraege ohne Gruppen
  const links = [
    { label: 'Tickets', href: '/tickets', icon: <IconTicket /> },
    { label: 'Planboard', href: '/planboard', icon: <IconCalendar /> },
    { label: 'Projekte', href: '/projects', icon: <IconFolders /> },
    { label: 'Kunden', href: '/customers', icon: <IconUsers /> },
    // Leads liegen auf Eis (Lead-Automatik gestoppt 2026-09-30): grau, nicht klickbar
    { label: 'Leads', href: '/leads', icon: <IconTargetArrow />, paused: true },
    { label: 'Finanzen', href: '/finance', icon: <IconReportMoney /> },
    { label: 'Rechtliches', href: '/rechtliches', icon: <IconScale /> },
    ...(isAdmin ? [{ label: 'Admin', href: '/admin', icon: <IconSettings /> }] : []),
  ]

  const isActive = (href) =>
    location.pathname === href || location.pathname.startsWith(href + '/')

  return (
    <aside className={`side ${collapsed ? 'collapsed' : ''}`}>
      <div className="side-head">
        <Link to="/" className="side-logo" title="Webklar">W</Link>
        <div className="side-brand">
          Webklar
          <small>Ticket-Plattform</small>
        </div>
      </div>

      <nav className="side-nav">
        <div className="side-group">
          {links.map((link) => link.paused ? (
            <span
              key={link.href}
              className="side-link side-link-paused"
              title={`${link.label} (pausiert)`}
              aria-disabled="true"
            >
              {link.icon}
              <span className="side-link-label">{link.label}</span>
            </span>
          ) : (
            <Link
              key={link.href}
              to={link.href}
              className={`side-link ${isActive(link.href) ? 'active' : ''}`}
              title={link.label}
            >
              {link.icon}
              <span className="side-link-label">{link.label}</span>
            </Link>
          ))}
          <button
            type="button"
            className="side-link side-link-button"
            onClick={handleProjectAdmin}
            disabled={switching}
            title="Projekt-Admin"
          >
            <IconExternalLink />
            <span className="side-link-label">Projekt-Admin</span>
          </button>
        </div>
      </nav>

      <div className="side-foot">
        {user && (
          <div className="side-link" title={user.name || user.email} style={{ cursor: 'default' }}>
            <div className="side-logo" style={{ width: 28, height: 28, fontSize: 12, background: 'linear-gradient(135deg,#667eea,#764ba2)' }}>
              {(user.name || user.email || '?').charAt(0).toUpperCase()}
            </div>
            <span className="side-link-label text-ellipsis">{user.name || user.email}</span>
          </div>
        )}
        <button className="side-toggle" onClick={handleLogout} title="Logout">
          <IconLogout size={20} />
          <span className="side-link-label">Logout</span>
        </button>
        <button className="side-toggle" onClick={() => setCollapsed((c) => !c)} title="Menue ein-/ausklappen">
          {collapsed ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutSidebarLeftCollapse size={20} />}
          <span className="side-link-label">Einklappen</span>
        </button>
      </div>
    </aside>
  )
}