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 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9.5z" />
  </svg>
);

const IconDoc = () => (
  <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-2V8z" />
    <path d="M14 2v6h6M8 13h8M8 17h5" />
  </svg>
);

const IconLocation = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M12 21s7-4.5 7-11a7 7 0 1 0-14 0c0 6.5 7 11 7 11z" />
    <circle cx="12" cy="10" r="2.5" />
  </svg>
);

const IconTasks = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
  </svg>
);

const IconList = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
  </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>
);

export const USER_NAV_SECTIONS = [
  {
    id: "home",
    title: "Home",
    items: [
      { id: "user-home", label: "User home", icon: IconHome },
      { id: "my-swis", label: "My SWIs", icon: IconDoc },
      { id: "my-location-swis", label: "SWIs at my location", icon: IconLocation },
    ],
  },
  {
    id: "work",
    title: "Work",
    items: [
      { id: "assigned-swis", label: "Assigned SWIs", icon: IconTasks },
      { id: "assignment-list", label: "Assignment list", icon: IconList },
    ],
  },
  {
    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 handleUserNav(id, setActiveNav) {
  for (const section of USER_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;
  }
}
