// ─────────────────────────────────────────────────────────
// ChefVerse · Shell components — sidebar, topbar, locale chip
// ─────────────────────────────────────────────────────────

const { useState, useEffect, useRef } = React;

// Reusable lucide icon (inline SVG so it works without runtime fetch)
function Icon({ name, size = 16, strokeWidth = 1.75, style }) {
  const paths = {
    "panel-left":   <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></>,
    "panel-top":    <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></>,
    "bell":         <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>,
    "settings":     <><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></>,
    "search":       <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></>,
    "chevron-down": <><path d="m6 9 6 6 6-6"/></>,
    "chevron-up":   <><path d="m18 15-6-6-6 6"/></>,
    "chevron-right":<><path d="m9 18 6-6-6-6"/></>,
    "chevron-left": <><path d="m15 18-6-6 6-6"/></>,
    "chevrons-up-down": <><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></>,
    "play":         <><polygon points="6 3 20 12 6 21 6 3"/></>,
    "pause":        <><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></>,
    "skip-forward": <><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" x2="19" y1="5" y2="19"/></>,
    "skip-back":    <><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" x2="5" y1="19" y2="5"/></>,
    "list-video":   <><path d="M12 12H3"/><path d="M16 6H3"/><path d="M12 18H3"/><path d="m18 9 5 3-5 3z"/></>,
    "graduation-cap": <><path d="M22 10v6"/><path d="M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></>,
    "layers":       <><path d="m12 2 9 5-9 5-9-5 9-5z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></>,
    "salad":        <><path d="M7 21h10"/><path d="M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9z"/><path d="M11.38 12a2.4 2.4 0 0 1-.4-4.77 2.4 2.4 0 0 1 3.2-2.77 2.4 2.4 0 0 1 3.47-.63 2.4 2.4 0 0 1 3.37 3.37 2.4 2.4 0 0 1-1.1 3.7 2.51 2.51 0 0 1 .03 1.1"/></>,
    "briefcase":    <><rect width="20" height="14" x="2" y="7" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    "users":        <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    "user":         <><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    "help-circle":  <><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></>,
    "log-out":      <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></>,
    "globe":        <><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10z"/></>,
    "check":        <><polyline points="20 6 9 17 4 12"/></>,
    "check-circle": <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></>,
    "circle":       <><circle cx="12" cy="12" r="10"/></>,
    "lock":         <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    "clock":        <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    "calendar":     <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></>,
    "video":        <><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></>,
    "captions":     <><rect width="18" height="14" x="3" y="5" rx="2"/><path d="M7 15h4M15 15h2"/><path d="M7 11h2M13 11h4"/></>,
    "trending-up":  <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>,
    "trending-down":<><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></>,
    "arrow-right":  <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
    "arrow-up-right": <><path d="M7 7h10v10"/><path d="M7 17 17 7"/></>,
    "filter":       <><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></>,
    "plus":         <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    "x":            <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
    "bookmark":     <><path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></>,
    "bookmark-plus":<><path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/><path d="M12 7v6"/><path d="M9 10h6"/></>,
    "instagram":    <><rect width="20" height="20" x="2" y="2" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17.5 6.5h.01"/></>,
    "facebook":     <><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></>,
    "tiktok":       <><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></>,
    "youtube":      <><path d="M22 8.5a4.5 4.5 0 0 0-3.5-4.4 89 89 0 0 0-13 0A4.5 4.5 0 0 0 2 8.5v7a4.5 4.5 0 0 0 3.5 4.4 89 89 0 0 0 13 0A4.5 4.5 0 0 0 22 15.5z"/><polygon points="10 9 15 12 10 15 10 9"/></>,
    "moon":         <><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></>,
    "sun":          <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></>,
    "more-horizontal": <><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></>,
    "edit-3":       <><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></>,
    "upload":       <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></>,
    "file-text":    <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/></>,
    "flame":        <><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></>,
    "award":        <><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></>,
    "external-link": <><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></>,
    "pin":          <><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></>,
    "send":         <><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></>,
    "package":      <><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/></>,
    "knife":        <><path d="m2.5 21.5 1-1"/><path d="M15.5 8.5 7 17l-3 3"/><path d="M21 3l-7.5 7.5L9 6l8.5-4z"/></>,
    "sparkles":     <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></>,
    "dot":          <><circle cx="12" cy="12" r="1"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name] || null}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────
// Locale switcher in header
// ─────────────────────────────────────────────────────────
function LocaleChip({ locale, onChange }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const t = window.I18N[locale];
  return (
    <div className="locale-chip" ref={ref}>
      <button className="chip-btn" onClick={() => setOpen(!open)}>
        <span className="flag">{t.flag}</span>
        <span className="loc-label">{t.market}</span>
        <Icon name="chevron-down" size={14} />
      </button>
      {open && (
        <div className="chip-menu">
          {["en", "de", "id"].map(k => {
            const o = window.I18N[k];
            return (
              <button key={k} className={"chip-opt " + (locale === k ? "on" : "")} onClick={() => { onChange(k); setOpen(false); }}>
                <span className="flag">{o.flag}</span>
                <div className="opt-text">
                  <div className="opt-name">{o.market}</div>
                  <div className="opt-sub">{o.locale}</div>
                </div>
                {locale === k && <Icon name="check" size={14} style={{ color: "var(--ufs-orange)" }} />}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Sidebar
// ─────────────────────────────────────────────────────────
function Sidebar({ route, onRoute, locale, profile, onOpenNotif, hasUnread }) {
  const t = window.I18N[locale].nav;
  const items = [
    { id: "dashboard", icon: "layers", label: t.dashboard },
    { id: "courses",   icon: "salad", label: t.learning },
    { id: "briefs",    icon: "flame", label: t.briefs },
    { id: "rewards", icon: "award", label: locale === "de" ? "Belohnungen" : locale === "id" ? "Hadiah" : "Rewards" },
    { id: "community", icon: "users", label: t.community },
  ];
  const accountItems = [
    { id: "profile",  icon: "user", label: t.profile },
    { id: "settings", icon: "settings", label: t.settings },
    { id: "help",     icon: "help-circle", label: t.help },
  ];
  return (
    <aside className="sidebar" data-tour="fr-nav">
      <div className="sb-head">
        <img src="assets/UFS_logo_orange_box.png" alt="UFS" />
        <div className="sb-brand">
          <div className="sb-brand-name">ChefVerse</div>
        </div>
      </div>
      <div className="sb-group">
        <div className="sb-label">{t.platform}</div>
        {items.map(it => (
          <button key={it.id} className={"sb-item " + (route === it.id ? "active" : "")} onClick={() => onRoute(it.id)}>
            <Icon name={it.icon} />
            <span>{it.label}</span>
          </button>
        ))}
      </div>
      <div className="sb-group">
        <div className="sb-label">{t.account}</div>
        {accountItems.map(it => (
          <button key={it.id} className={"sb-item " + (route === it.id ? "active" : "")} onClick={() => onRoute(it.id)}>
            <Icon name={it.icon} />
            <span>{it.label}</span>
          </button>
        ))}
      </div>
      <div className="sb-spacer" />
      <button className="sb-foot" onClick={() => onRoute("profile")}>
        <Avatar name={profile.name} initials={profile.initials} cls="av-mr" />
        <div className="sb-who">
          <div className="sb-name">{profile.name}</div>
          <div className="sb-email display-italic">{window.I18N[locale].onboard[profile.role_key]}</div>
        </div>
        <Icon name="chevrons-up-down" size={14} style={{ color: "var(--smoke)", marginLeft: "auto" }} />
      </button>
    </aside>
  );
}

// ─────────────────────────────────────────────────────────
// Top bar (used inside sidebar layout)
// ─────────────────────────────────────────────────────────
function TopBar({ crumbs, locale, onLocaleChange, onOpenNotif, hasUnread }) {
  return (
    <div className="topbar">
      <button className="icon-btn ghost"><Icon name="panel-left" size={16} /></button>
      <div className="sep" />
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="crumb-sep">/</span>}
            <span className={"crumb" + (i < crumbs.length - 1 ? " muted" : "")}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-right">
        <div className="tb-search">
          <Icon name="search" size={14} />
          <input placeholder="Search…" />
          <kbd>⌘K</kbd>
        </div>
        <LocaleChip locale={locale} onChange={onLocaleChange} />
        <button className="icon-btn ghost notif-btn" title="Notifications" onClick={onOpenNotif}>
          <Icon name="bell" size={16} />
          {hasUnread && <span className="dot-red" />}
        </button>
      </div>
    </div>
  );
}

window.Icon = Icon;
window.LocaleChip = LocaleChip;
window.Sidebar = Sidebar;
window.TopBar = TopBar;