import { ReactNode } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'
import { useAuthStore } from '../stores/authStore'
import { 
  HomeIcon, 
  UsersIcon, 
  SettingsIcon,
  MailIcon
} from './icons'
import { Building2 } from 'lucide-react'

interface LayoutProps {
  children: ReactNode
}

const navigation = [
  { name: 'Dashboard', href: '/', icon: HomeIcon },
  { name: 'Organigramm', href: '/organization', icon: Building2 },
  { name: 'Benutzerverwaltung', href: '/users', icon: UsersIcon },
  { name: 'Skills verwalten', href: '/skills', icon: SettingsIcon },
  { name: 'E-Mail-Einstellungen', href: '/email-settings', icon: MailIcon },
  { name: 'Synchronisation', href: '/sync', icon: SettingsIcon },
]

export default function Layout({ children }: LayoutProps) {
  const navigate = useNavigate()
  const { user, logout } = useAuthStore()

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

  return (
    <div className="flex h-screen bg-bg-main">
      <div className="relative w-[260px] bg-white border-r border-border-default flex flex-col pb-28">
        <div className="p-5">
          <h1 className="text-title-card font-poppins font-semibold text-primary">
            SkillMate Admin
          </h1>
        </div>
        
        <nav className="px-5 space-y-1">
          {navigation.map((item) => (
            <NavLink
              key={item.name}
              to={item.href}
              className={({ isActive }) =>
                `sidebar-item ${isActive ? 'sidebar-item-active' : ''}`
              }
            >
              <item.icon className="w-5 h-5 mr-3 flex-shrink-0" />
              <span className="font-poppins font-medium">{item.name}</span>
            </NavLink>
          ))}
        </nav>

        <div className="absolute bottom-0 left-0 right-0 p-5 border-t border-border-default">
          <div className="flex items-center justify-between mb-3">
            <div>
              <p className="text-body font-medium text-secondary">{user?.username}</p>
              <p className="text-small text-tertiary capitalize">{user?.role}</p>
            </div>
          </div>
          <button
            onClick={handleLogout}
            className="btn-secondary w-full"
          >
            Abmelden
          </button>
        </div>
      </div>

      <div className="flex-1 flex flex-col overflow-hidden">
        <header className="bg-white border-b border-border-default h-16 flex items-center px-container">
          <h2 className="text-title-dialog font-poppins font-semibold text-primary">
            Admin Panel
          </h2>
        </header>
        
        <main className="flex-1 overflow-y-auto p-container bg-bg-main">
          {children}
        </main>
      </div>
    </div>
  )
}
