// nav.jsx — Sidebar + topbar + role switcher

const NAV_GROUPS = [
  {
    label: "환자 상담 플로우",
    role: ["patient", "manager", "doctor"],
    items: [
      { id: "intake",    label: "체크인 · 문진",      ico: "Intake",   short: "01" },
      { id: "capture",   label: "피부 촬영",          ico: "Camera",   short: "02" },
      { id: "analysis",  label: "AI 진단 결과",        ico: "Brain",    short: "03" },
      { id: "report",    label: "세부 지표 리포트",    ico: "Report",   short: "04" },
      { id: "recommend", label: "시술 추천 · 패키지",  ico: "Recommend",short: "05" },
      { id: "ba",        label: "B&A 3D · 시뮬레이션", ico: "Compare",  short: "06" },
    ],
  },
  {
    label: "진료 / 운영",
    role: ["doctor", "manager"],
    items: [
      { id: "chart",     label: "Smart Chart Auto-fill", ico: "Doc",     short: "07" },
      { id: "revisit",   label: "재방문 관리 · 알림톡",  ico: "Bell",    short: "08" },
    ],
  },
  {
    label: "클리닉 운영",
    role: ["manager"],
    items: [
      { id: "devices",   label: "Connected Devices",     ico: "Device",  short: "09" },
      { id: "bi",        label: "운영 BI Dashboard",     ico: "Bi",      short: "10" },
    ],
  },
];

const ROLES = [
  { v: "patient", l: "환자", ico: "User", desc: "환자 본인이 직접 사용" },
  { v: "manager", l: "실장", ico: "Manager", desc: "상담 실장 응대 도구" },
  { v: "doctor",  l: "의사", ico: "Doctor", desc: "진료·시술 결정" },
];

const PHASES = [
  { v: "1", l: "Prototype", desc: "UI 흐름 · 샘플 데이터" },
  { v: "2", l: "Beta", desc: "실 데이터 · 핵심 AI" },
  { v: "3", l: "Launch", desc: "상용 · 보안·확장성" },
];

function Sidebar({ route, setRoute, role, persona, onAbout }) {
  const Icons = window.Icons;
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">L</div>
        <div>
          <div className="brand-name">LUMA</div>
          <div className="brand-sub">Skin Diagnostic Console</div>
        </div>
      </div>

      {NAV_GROUPS.filter(g => g.role.includes(role)).map(group => (
        <div key={group.label}>
          <div className="nav-group-label">{group.label}</div>
          {group.items.map(item => {
            const Icon = Icons[item.ico];
            return (
              <button key={item.id}
                      className={`nav-item ${route === item.id ? "active" : ""}`}
                      onClick={() => setRoute(item.id)}>
                <span className="nav-ico"><Icon size={16} /></span>
                <span>{item.label}</span>
                <span className="nav-tail">{item.short}</span>
              </button>
            );
          })}
        </div>
      ))}

      <div style={{ marginTop: "auto", paddingTop: 18 }}>
        <div className="nav-group-label">현재 세션</div>
        <div style={{
          background: "var(--bg-subtle)", borderRadius: 12, padding: "12px 14px",
          display: "flex", alignItems: "center", gap: 10,
        }}>
          <Avatar initials={persona.initials} size={32}
                  color={role === "patient" ? "var(--skin-coral)" : role === "doctor" ? "var(--data-blue)" : "var(--ink-1)"} />
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-1)" }}>{persona.nameMasked}</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{persona.id}</div>
          </div>
          <Icons.ChevRight size={14} stroke="currentColor" style={{ color: "var(--ink-4)" }} />
        </div>
        <div style={{ padding: "12px 6px 4px", fontSize: 10.5, color: "var(--ink-4)", lineHeight: 1.4 }}>
          본 화면은 Phase 1 Clickable Prototype입니다.<br />
          실제 AI 연산은 발생하지 않으며 샘플 데이터로 구성되어 있습니다.
        </div>
        <button className="sidebar-about" onClick={onAbout}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5 }}>ⓘ</span>
          About · 프로젝트 개요·면책
        </button>
      </div>
    </aside>
  );
}

function TopBar({ role, setRole, route, persona, phase }) {
  const Icons = window.Icons;
  const currentItem = NAV_GROUPS.flatMap(g => g.items).find(i => i.id === route);
  return (
    <div className="topbar">
      <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-3)", fontSize: 13 }}>
        <span style={{ color: "var(--ink-4)" }}>{currentItem?.short}</span>
        <Icons.ChevRight size={14} stroke="currentColor" style={{ color: "var(--ink-5)" }} />
        <span style={{ color: "var(--ink-1)", fontWeight: 600 }}>{currentItem?.label}</span>
      </div>

      <div className="search" style={{ marginLeft: 18 }}>
        <Icons.Search size={14} />
        <span style={{ flex: 1 }}>환자/시술/장비 검색</span>
        <span className="kbd">⌘ K</span>
      </div>

      <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 14 }}>
        <Pill tone="outline" dot>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--good)" }}></span>
          Phase {phase} · {PHASES.find(p => p.v === phase)?.l}
        </Pill>

        <div className="role-switcher">
          {ROLES.map(r => {
            const Icon = Icons[r.ico];
            return (
              <button key={r.v} className={`role-opt ${role === r.v ? "active" : ""}`}
                      onClick={() => setRole(r.v)}>
                <Icon size={13} />
                {r.l}
              </button>
            );
          })}
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: 6, borderLeft: "1px solid var(--line-hair)" }}>
          <Avatar initials="안" size={28} color="var(--ink-2)" />
          <div style={{ fontSize: 12, lineHeight: 1.2 }}>
            <div style={{ fontWeight: 600, color: "var(--ink-1)" }}>안양 강남점</div>
            <div style={{ color: "var(--ink-4)", fontSize: 10.5 }}>이지영 실장 · 진행중</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.NAV_GROUPS = NAV_GROUPS;
window.ROLES = ROLES;
window.PHASES = PHASES;
window.Sidebar = Sidebar;
window.TopBar = TopBar;