/* Shell: sidebar, topbar, role switcher, tweaks panel */

const { useState, useEffect, useRef, useMemo } = React;

window.Sidebar = function Sidebar({ active, setActive, role, setRole }) {
  const items = [
    { id: "overview", label: "Overzicht", icon: "home" },
    { id: "tenders", label: "Aanbestedingen", icon: "clipboard", badge: "14" },
    { id: "offertes", label: "Offertes", icon: "docs", badge: "3" },
    { id: "kennis", label: "Kennisbank", icon: "book" },
  ];
  const secondary = [
    { id: "archief", label: "Archief", icon: "file" },
    { id: "instellingen", label: "Instellingen", icon: "settings" },
  ];
  const [roleOpen, setRoleOpen] = useState(false);

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="mark">M</div>
        <div>
          <div className="title">Mous<span style={{color: "var(--accent)"}}>·</span>AI</div>
          <div className="sub">Waterbeheer · intern</div>
        </div>
      </div>

      <div className="nav-section">Werk</div>
      {items.map(it => (
        <div key={it.id}
             className={"nav-item " + (active === it.id ? "active" : "")}
             onClick={() => setActive(it.id)}>
          <Icon name={it.icon} className="ico" />
          <span>{it.label}</span>
          {it.badge && <span className="badge num">{it.badge}</span>}
        </div>
      ))}

      <div className="nav-section">Systeem</div>
      {secondary.map(it => (
        <div key={it.id} className="nav-item">
          <Icon name={it.icon} className="ico" />
          <span>{it.label}</span>
        </div>
      ))}

      <div style={{flex: 1}} />

      <div className="bottom">
        <div style={{position: "relative"}}>
          <button className="role-chip" onClick={() => setRoleOpen(o => !o)}>
            <div className="avatar">{role.initials}</div>
            <div style={{flex: 1, minWidth: 0}}>
              <div className="name" style={{whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{role.name}</div>
              <div className="role">{role.role}</div>
            </div>
            <Icon name="chevronDown" size={14} style={{color: "var(--ink-3)"}} />
          </button>
          {roleOpen && (
            <div style={{
              position: "absolute", bottom: "calc(100% + 6px)", left: 0, right: 0,
              background: "var(--bg-card)", border: "1px solid var(--rule)",
              borderRadius: "var(--radius-lg)", padding: 4, zIndex: 30,
              boxShadow: "0 10px 30px -10px rgba(11,29,42,0.25)"
            }}>
              {MOUS_DATA.roles.map(r => (
                <div key={r.id}
                     onClick={() => { setRole(r); setRoleOpen(false); }}
                     style={{
                       padding: "8px 10px", display: "flex", gap: 10, alignItems: "center",
                       cursor: "pointer", borderRadius: "var(--radius)",
                       background: r.id === role.id ? "var(--bg-inset)" : "transparent"
                     }}>
                  <div style={{
                    width: 26, height: 26, borderRadius: "50%",
                    background: "var(--accent)", color: "white",
                    display: "grid", placeItems: "center", fontSize: 10.5, fontWeight: 600
                  }}>{r.initials}</div>
                  <div>
                    <div style={{fontSize: 12.5, fontWeight: 500}}>{r.name}</div>
                    <div style={{fontSize: 11, color: "var(--ink-3)"}}>{r.role}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </aside>
  );
};

window.Topbar = function Topbar({ crumbs }) {
  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            <span className={i === crumbs.length - 1 ? "current" : ""}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="search">
        <Icon name="search" size={14} />
        <input placeholder="Zoek tenders, projecten, documenten…" />
        <kbd>⌘K</kbd>
      </div>
      <button className="icon-btn" title="Notificaties"><Icon name="bell" size={15}/></button>
      <button className="icon-btn" title="Nieuw"><Icon name="plus" size={15}/></button>
    </div>
  );
};

window.TweaksPanel = function TweaksPanel({ tweaks, setTweaks }) {
  const Seg = ({ field, options }) => (
    <div className="seg">
      {options.map(o => (
        <button key={o.v}
                className={tweaks[field] === o.v ? "on" : ""}
                onClick={() => setTweaks({ ...tweaks, [field]: o.v })}>
          {o.l}
        </button>
      ))}
    </div>
  );
  return (
    <div className="tweaks-panel">
      <h4>
        <span>Tweaks</span>
        <span style={{color: "var(--ink-4)", fontSize: 10}}>design-tijd</span>
      </h4>
      <div className="group">
        <div className="lbl">Thema</div>
        <Seg field="theme" options={[{v:"light",l:"Licht"},{v:"dark",l:"Donker"}]} />
      </div>
      <div className="group">
        <div className="lbl">Densiteit</div>
        <Seg field="density" options={[{v:"cozy",l:"Comfortabel"},{v:"compact",l:"Compact"}]} />
      </div>
      <div className="group">
        <div className="lbl">AI-uitleg</div>
        <Seg field="aiLevel" options={[{v:"subtle",l:"Subtiel"},{v:"balanced",l:"Gebalanceerd"},{v:"prominent",l:"Prominent"}]} />
      </div>
      <div className="group">
        <div className="lbl">Accent</div>
        <Seg field="accent" options={[
          {v:"teal",l:"Teal"},{v:"navy",l:"Navy"},{v:"olive",l:"Olijf"}
        ]} />
      </div>
    </div>
  );
};

/* Sparkline (SVG) */
window.Spark = function Spark({ data, color = "var(--accent)", width = 90, height = 34 }) {
  if (!data || data.length < 2) return null;
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * width;
    const y = height - ((v - min) / range) * height;
    return [x, y];
  });
  const d = pts.map((p,i)=> (i===0?"M":"L") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = d + ` L ${width} ${height} L 0 ${height} Z`;
  return (
    <svg width={width} height={height} style={{overflow:"visible"}}>
      <path d={area} fill={color} opacity="0.10" />
      <path d={d} fill="none" stroke={color} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2.2" fill={color} />
    </svg>
  );
};

/* Pill builder for risk */
window.RiskPill = function RiskPill({ risk }) {
  const map = {
    ok:   { cls: "ok",   label: "Laag risico" },
    warn: { cls: "warn", label: "Aandacht" },
    risk: { cls: "risk", label: "Risicovol" },
  };
  const m = map[risk] || map.warn;
  return <span className={"pill " + m.cls}><span className="dot" />{m.label}</span>;
};

window.StatusPill = function StatusPill({ status }) {
  const map = {
    advies: { cls: "ai",     label: "AI-advies" },
    review: { cls: "warn",   label: "In review" },
    go:     { cls: "ok",     label: "Go" },
    nogo:   { cls: "risk",   label: "No-go" },
  };
  const m = map[status] || map.advies;
  return <span className={"pill " + m.cls}><span className="dot" />{m.label}</span>;
};