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

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

const items = [
  ['Painel', Gauge],
  ['Controladores', Router],
  ['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 shrink-0 flex-col border-r border-white/10 bg-[#020817] px-4 py-5">
      <div className="mb-8 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-[28px] font-black leading-none text-white">
            Litoral Regas
          </h1>

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

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

          return (
            <button
              key={label}
              type="button"
              onClick={() => onSelect(label)}
              className={`group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left text-sm font-semibold transition-all duration-200 ${isActive
                  ? 'border border-blue-500/20 bg-blue-500/15 text-white shadow-[0_0_25px_rgba(59,130,246,0.12)]'
                  : 'border border-transparent text-slate-300 hover:border-white/5 hover:bg-white/[0.035] hover:text-white'
                }`}
            >
              <div
                className={`rounded-xl p-2 transition ${isActive
                    ? 'bg-blue-500/10 text-blue-300'
                    : 'bg-white/[0.03] text-slate-400 group-hover:text-slate-200'
                  }`}
              >
                <Icon size={17} />
              </div>

              <span className="truncate">
                {label}
              </span>
            </button>
          );
        })}
      </nav>

      <div className="mt-auto border-t border-white/10 pt-4">
        <button
          type="button"
          onClick={onLogout}
          className="group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left text-sm font-semibold text-slate-300 transition-all duration-200 hover:bg-red-500/10 hover:text-red-200"
        >
          <div className="rounded-xl bg-white/[0.03] p-2 text-slate-400 transition group-hover:bg-red-500/10 group-hover:text-red-300">
            <LogOut size={17} />
          </div>

          <span>Terminar Sessão</span>
        </button>
      </div>
    </aside>
  );
}