import {
  FileClock,
  Gauge,
  LogOut,
  RadioTower,
  Settings,
  Shield,
  Wrench,
} from 'lucide-react';

import logoIcon from '@/assets/logo-icon.png';

const items = [
  ['Painel', Gauge],
  ['Configuração UDP2RAW', RadioTower],
  ['Provisionamento', Wrench],
  ['Registos de Atividade', FileClock],
  ['Posto de Trabalho', Settings],
] as const;

type SidebarProps = {
  active: string;
  onSelect: (value: string) => void;
  onLogout: () => void;
};

export function Sidebar({
  active,
  onSelect,
  onLogout,
}: SidebarProps) {
  return (
    <aside className="flex h-screen w-64 flex-col border-r border-white/10 bg-ink-950 px-4 py-5">
      <div className="mb-10 flex items-center gap-4 px-1">
        <img
          src={logoIcon}
          alt="Litoral Regas"
          className="h-12 w-12 shrink-0 object-contain"
        />

        <div className="min-w-0">
          <h1 className="truncate text-[20px] font-bold leading-none text-white">
            Litoral Regas
          </h1>

          <p className="mt-1 text-[11px] font-medium uppercase tracking-[0.12em] text-blue-300/70">
            VPN Orchestrator
          </p>
        </div>
      </div>

      <nav className="space-y-1">
        {items.map(([label, Icon]) => {
          const isActive = active === label;

          return (
            <button
              key={label}
              type="button"
              onClick={() => onSelect(label)}
              className={`flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-medium transition ${isActive
                ? 'bg-blue-500/15 text-blue-200'
                : 'text-slate-300 hover:bg-white/5 hover:text-white'
                }`}
            >
              <Icon size={18} />
              {label}
            </button>
          );
        })}
      </nav>

      <div className="mt-auto border-t border-white/10 pt-4">
        <button
          type="button"
          onClick={onLogout}
          className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-medium text-slate-300 transition hover:bg-red-500/10 hover:text-red-200"
        >
          <LogOut size={18} />
          Terminar Sessão
        </button>
      </div>
    </aside>
  );
}