import React from 'react';

function createNavIcon(children) {
  return function NavIconGlyph() {
    return (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
        {children}
      </svg>
    );
  };
}

export const NAV_ICONS = {
  'master-dashboard': createNavIcon(
    <>
      <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" />
    </>
  ),
  dashboard: createNavIcon(<path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V9.5z" />),
  upload: createNavIcon(
    <>
      <path d="M12 16V4M12 4l4 4M12 4L8 8" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" strokeLinecap="round" />
    </>
  ),
  'my-videos': createNavIcon(
    <>
      <rect x="3" y="6" width="14" height="12" rx="2" />
      <path d="M17 10l4-2v8l-4-2" strokeLinecap="round" strokeLinejoin="round" />
    </>
  ),
  'admin-pending': createNavIcon(
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" strokeLinecap="round" />
    </>
  ),
  'assigned-videos': createNavIcon(
    <>
      <path d="M9 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4" />
      <path d="M9 5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2" />
      <path d="M9 12h6" strokeLinecap="round" />
    </>
  ),
  'nav-admin-form-mgmt': createNavIcon(<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" />),
  'admin-orac-form-browse': createNavIcon(
    <>
      <circle cx="11" cy="11" r="7" />
      <path d="M20 20l-3-3" strokeLinecap="round" />
    </>
  ),
  'admin-orac-form-list': createNavIcon(<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" strokeLinecap="round" />),
  'admin-orac-form-add': createNavIcon(
    <>
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6" />
      <path d="M12 11v6M9 14h6" strokeLinecap="round" />
    </>
  ),
  'admin-orac-form-edit': createNavIcon(
    <>
      <path d="M12 20h9" strokeLinecap="round" />
      <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
    </>
  ),
  'nav-admin-section-mgmt': createNavIcon(
    <>
      <rect x="3" y="4" width="18" height="16" rx="2" />
      <path d="M3 10h18M9 4v16" />
    </>
  ),
  'admin-orac-section-list': createNavIcon(<path d="M4 6h16M4 12h16M4 18h10" strokeLinecap="round" />),
  'admin-orac-section-add': createNavIcon(
    <>
      <path d="M12 8v8M8 12h8" strokeLinecap="round" />
      <rect x="4" y="4" width="16" height="16" rx="2" />
    </>
  ),
  'admin-orac-section-edit': createNavIcon(
    <>
      <path d="M4 20h16" strokeLinecap="round" />
      <path d="M7 16l8-8 3 3-8 8H7v-3z" />
    </>
  ),
  'nav-admin-question-mgmt': createNavIcon(
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M9.5 9a2.5 2.5 0 1 1 4.2 1.8c-.8.7-1.2 1.2-1.2 2.2" strokeLinecap="round" />
      <circle cx="12" cy="17" r="0.5" fill="currentColor" stroke="none" />
    </>
  ),
  'admin-orac-question-list': createNavIcon(<path d="M8 6h12M8 12h12M8 18h8M4 6h.01M4 12h.01M4 18h.01" strokeLinecap="round" />),
  'admin-orac-question-add': createNavIcon(
    <>
      <path d="M12 8v8M8 12h8" strokeLinecap="round" />
      <circle cx="12" cy="12" r="9" />
    </>
  ),
  'nav-exec-assign': createNavIcon(<path d="M9 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4M9 5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2" />),
  'executor-assignments': createNavIcon(<path d="M4 6h16M4 12h16M4 18h16" strokeLinecap="round" />),
  'executor-assignments-not-started': createNavIcon(<circle cx="12" cy="12" r="9" />),
  'executor-assignments-verification-required': createNavIcon(
    <>
      <path d="M12 3l7 4v5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V7l7-4z" />
      <path d="M9 12l2 2 4-4" strokeLinecap="round" strokeLinejoin="round" />
    </>
  ),
  'executor-assignments-returned': createNavIcon(
    <>
      <path d="M3 10h10a4 4 0 0 1 0 8H7" strokeLinecap="round" />
      <path d="M7 14l-3-3 3-3" strokeLinecap="round" strokeLinejoin="round" />
    </>
  ),
  'executor-assignments-done': createNavIcon(
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M8 12l2.5 2.5L16 9" strokeLinecap="round" strokeLinejoin="round" />
    </>
  ),
  'nav-ver-assign': createNavIcon(
    <>
      <path d="M12 3l7 4v5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V7l7-4z" />
    </>
  ),
  'verifier-assignments': createNavIcon(<path d="M4 6h16M4 12h16M4 18h16" strokeLinecap="round" />),
  'verifier-assignments-not-started': createNavIcon(<circle cx="12" cy="12" r="9" />),
  'verifier-assignments-in-process': createNavIcon(
    <>
      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4" strokeLinecap="round" />
      <circle cx="12" cy="12" r="4" />
    </>
  ),
  'verifier-assignments-returned': createNavIcon(
    <>
      <path d="M21 10H11a4 4 0 1 0 0 8h4" strokeLinecap="round" />
      <path d="M17 14l3 3-3 3" strokeLinecap="round" strokeLinejoin="round" />
    </>
  ),
  'verifier-assignments-done': createNavIcon(
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M8 12l2.5 2.5L16 9" strokeLinecap="round" strokeLinejoin="round" />
    </>
  ),
  'executor-videos': createNavIcon(
    <>
      <rect x="2" y="7" width="15" height="11" rx="2" />
      <path d="M17 10l5-3v10l-5-3" strokeLinecap="round" strokeLinejoin="round" />
    </>
  ),
  'verifier-videos': createNavIcon(
    <>
      <path d="M9 11l3 2 5-4" strokeLinecap="round" strokeLinejoin="round" />
      <rect x="3" y="6" width="18" height="13" rx="2" />
    </>
  ),
};

export function NavIcon({ name, className = '' }) {
  const Icon = NAV_ICONS[name];
  if (!Icon) return null;
  return (
    <span className={`sidebar-nav-icon${className ? ` ${className}` : ''}`} aria-hidden>
      <Icon />
    </span>
  );
}
