import { openMasterDashboard, openMasterDashboardPath } from "./satPortal.js";

const IconHome = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V9.5z" />
  </svg>
);

const IconPlus = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M12 5v14M5 12h14" />
  </svg>
);

const IconUser = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
  </svg>
);

const IconTicket = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M3 8h18v3a2 2 0 0 0 0 4v3H3v-3a2 2 0 0 1 0-4V8zM12 8v8" />
  </svg>
);

const IconLog = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8" />
  </svg>
);

const IconUsers = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
  </svg>
);

const IconActivity = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M12 8v4l3 3M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
  </svg>
);

const IconAudit = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9h6m-6 4h6" />
  </svg>
);

const IconGrid = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <rect x="3" y="3" width="7" height="9" rx="1" />
    <rect x="14" y="3" width="7" height="5" rx="1" />
    <rect x="14" y="12" width="7" height="9" rx="1" />
    <rect x="3" y="16" width="7" height="5" rx="1" />
  </svg>
);

const IconChart = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M18 20V10M12 20V4M6 20v-6" />
  </svg>
);

const IconDocs = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8" />
  </svg>
);

/** Sidebar for SWI admin shell. */
export const ADMIN_NAV_SECTIONS = [
  {
    id: "overview",
    title: "Overview",
    items: [
      { id: "admin-overview", label: "Admin home", icon: IconHome },
    ],
  },
  {
    id: "swi",
    title: "SWI documents",
    items: [
      { id: "create-document", label: "Create document", icon: IconPlus },
      { id: "my-documents", label: "My documents", icon: IconDocs },
      { id: "assign-document", label: "Assign document", icon: IconUser },
    ],
  },
  {
    id: "general",
    title: "General admin",
    items: [
      { id: "tickets", label: "Tickets", icon: IconTicket },
      { id: "ticket-logs", label: "Ticket logs", icon: IconLog },
      { id: "users", label: "User directory", icon: IconUsers },
      { id: "activity-log", label: "Activity log", icon: IconActivity },
      { id: "audits", label: "Audits", icon: IconAudit },
    ],
  },
  {
    id: "portals",
    title: "Master Dashboard",
    items: [
      {
        id: "master-dashboard",
        label: "Master Dashboard",
        icon: IconGrid,
        external: true,
        onNavigate: () => openMasterDashboard(),
      },
      {
        id: "personal-dashboard",
        label: "Personal Dashboard",
        icon: IconChart,
        external: true,
        onNavigate: () => openMasterDashboardPath("/personalized-dashboard"),
      },
    ],
  },
];

export function handleAdminNav(id, setActiveNav) {
  for (const section of ADMIN_NAV_SECTIONS) {
    const item = section.items.find((i) => i.id === id);
    if (!item) continue;
    if (item.external && item.onNavigate) {
      item.onNavigate();
      return;
    }
    setActiveNav(id);
    return;
  }
}
