import { Outlet, Link, useLocation } from 'react-router-dom';
import { UserCircle, FolderKanban, Receipt, ShoppingCart, Truck, Award, MessageSquare, LayoutDashboard } from 'lucide-react';

const NAV = [
  ['Dashboard', '/portal', LayoutDashboard],
  ['My Cover Requests', '/portal/requests', FolderKanban],
  ['Quotes', '/portal/quotes', Receipt],
  ['Orders', '/portal/orders', ShoppingCart],
  ['Shipping', '/portal/shipping', Truck],
  ['Completed Covers', '/portal/completed-covers', Award],
  ['Messages', '/portal/messages', MessageSquare],
  ['My Profile', '/portal/profile', UserCircle],
];

export default function PortalLayout() {
  const path = useLocation().pathname;
  return (
    <div className="min-h-screen bg-workshop text-shire-text">
      <aside className="fixed inset-y-0 left-0 w-60 border-r border-shire-border bg-shire-bg/80 p-4">
        <Link to="/portal" className="mb-6 flex items-center gap-2">
          <UserCircle className="h-7 w-7 text-shire-purple-bright" />
          <div>
            <p className="text-sm font-bold text-white">SHiRE Portal</p>
            <p className="text-xs text-shire-text-muted">Customer Area</p>
          </div>
        </Link>
        <nav className="space-y-1">
          {NAV.map(([label, to, Icon]) => (
            <Link key={to} to={to} className={`nav-link ${(to === '/portal' ? path === to : path.startsWith(to)) ? 'nav-link-active' : ''}`}><Icon /><span>{label}</span></Link>
          ))}
        </nav>
      </aside>
      <main className="ml-60 p-6 lg:p-8"><Outlet /></main>
    </div>
  );
}