import { Outlet, Link, useLocation } from 'react-router-dom';
import { ShieldCheck, Users, KeyRound, FolderKanban, Settings, ClipboardCheck, Mail, LayoutDashboard } from 'lucide-react';

const NAV = [
  ['Dashboard', '/admin', LayoutDashboard],
  ['Users', '/admin/users', Users],
  ['Invitations', '/admin/invitations', Mail],
  ['Permissions', '/admin/permissions', KeyRound],
  ['Assignments', '/admin/assignments', FolderKanban],
  ['Settings', '/admin/settings', Settings],
  ['Release Readiness', '/admin/release-readiness', ClipboardCheck],
];

export default function AdminLayout() {
  const path = useLocation().pathname;
  return (
    <div className="min-h-screen bg-workshop text-shire-text">
      <aside className="fixed inset-y-0 left-0 w-64 border-r border-shire-border bg-shire-bg/80 p-4">
        <Link to="/admin" className="mb-6 flex items-center gap-2">
          <ShieldCheck className="h-7 w-7 text-shire-purple-bright" />
          <div>
            <p className="text-sm font-bold text-white">SHiRE Admin</p>
            <p className="text-xs text-shire-text-muted">Workshop Console</p>
          </div>
        </Link>
        <nav className="space-y-1">
          {NAV.map(([label, to, Icon]) => (
            <Link key={to} to={to} className={`nav-link ${path === to || path.startsWith(to + '/') ? 'nav-link-active' : ''}`}>
              <Icon /><span>{label}</span>
            </Link>
          ))}
        </nav>
        <div className="mt-8 border-t border-shire-border pt-4">
          <Link to="/" className="nav-link"><LayoutDashboard className="h-5 w-5" /><span>Workshop 3D</span></Link>
        </div>
      </aside>
      <main className="ml-64 p-6 lg:p-8"><Outlet /></main>
    </div>
  );
}