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

const icon = (path) => () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    {path}
  </svg>
);

const IconHome = icon(<path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V9.5z" />);
const IconUsers = icon(<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 8M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />);
const IconForm = icon(<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" />);
const IconPermit = icon(<path d="M4 8h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8zM8 8V6a4 4 0 1 1 8 0v2" />);
const IconTicket = icon(<path d="M3 8h18v3a2 2 0 0 0 0 4v3H3v-3a2 2 0 0 1 0-4V8zM12 8v8" />);
const IconClipboard = icon(<path d="M9 4h6M10 2h4a2 2 0 0 1 2 2v1H8V4a2 2 0 0 1 2-2zm-2 3h8a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" />);
const IconGrid = icon(
  <>
    <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" />
  </>
);

export const ADMIN_NAV_SECTIONS = [
  {
    id: "overview",
    title: "Overview",
    items: [{ id: "overview", label: "Dashboard", icon: IconHome }]
  },
  {
    id: "ptw-ops",
    title: "PTW Admin",
    items: [
      { id: "users-access", label: "Users & Access", icon: IconUsers },
      { id: "permits-submissions", label: "Permits & Submissions", icon: IconPermit },
      { id: "permit-preview", label: "Submitted Forms", icon: IconClipboard },
      { id: "fill-form", label: "Fill Permit Form", icon: IconForm },
      { id: "activity-log", label: "Activity Log", icon: IconClipboard }
    ]
  },
  {
    id: "form-admin",
    title: "Form Administration",
    items: [
      { id: "form-management", label: "Form Management", icon: IconForm },
      { id: "job-type-management", label: "Job Type Management", icon: IconGrid },
      { id: "section-management", label: "Section Management", icon: IconClipboard },
      { id: "question-management", label: "Question Management", icon: IconClipboard }
    ]
  },
  {
    id: "ticket-management",
    title: "Ticket Management",
    items: [
      { id: "raise-ticket", label: "Raise Ticket", icon: IconTicket },
      { id: "ticket-list", label: "Ticket List", icon: IconTicket },
      { id: "ticket-logs", label: "Ticket Logs", icon: IconTicket }
    ]
  },
  {
    id: "portals",
    title: "Master Dashboard",
    items: [
      {
        id: "master-dashboard",
        label: "Master Dashboard",
        icon: IconGrid,
        external: true,
        onNavigate: () => openMasterDashboard()
      }
    ]
  }
];

export function handleAdminNav(id, setActiveNav, options = {}) {
  if (id === "permit-handover" || id === "permit-handback" || id === "permit-audit") {
    setActiveNav(id);
    return true;
  }
  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 false;
    }
    setActiveNav(id);
    return true;
  }
  return false;
}
