/* ============================================================
   Presentational components (icons, avatar, sidebar, chat, cards)
   ============================================================ */

// ---------- icons ----------
function Icon({ name, size = 18, color = "currentColor", stroke = 1.7 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.2-3.2" /></>,
    plus: <><path d="M12 5v14M5 12h14" /></>,
    bell: <><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.7 21a2 2 0 0 1-3.4 0" /></>,
    dots: <><circle cx="5" cy="12" r="1.4" fill={color} stroke="none"/><circle cx="12" cy="12" r="1.4" fill={color} stroke="none"/><circle cx="19" cy="12" r="1.4" fill={color} stroke="none"/></>,
    chat: <><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.3-.5L3 21l1.4-4.2A8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5z" /></>,
    send: <><path d="M12 19V5M5 12l7-7 7 7" /></>,
    paperclip: <><path d="M21 9.5 12 18.5a4 4 0 0 1-5.6-5.6l8.5-8.5a2.7 2.7 0 0 1 3.8 3.8l-8.5 8.5a1.3 1.3 0 0 1-1.9-1.9l7.8-7.8" /></>,
    doc: <><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><path d="M14 3v5h5" /></>,
    members: <><circle cx="9" cy="8" r="3.2" /><path d="M3.5 19a5.5 5.5 0 0 1 11 0" /><path d="M16 5.2A3.2 3.2 0 0 1 16 11" /><path d="M16.5 13.5A5.5 5.5 0 0 1 20.5 19" /></>,
    chevDown: <><path d="m6 9 6 6 6-6" /></>,
    chevRight: <><path d="m9 6 6 6-6 6" /></>,
    check: <><path d="M20 6 9 17l-5-5" /></>,
    checkCircle: <><circle cx="12" cy="12" r="9" /><path d="m8.5 12 2.5 2.5 4.5-5" /></>,
    x: <><path d="M18 6 6 18M6 6l12 12" /></>,
    refresh: <><path d="M3 12a9 9 0 0 1 15-6.7L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-15 6.7L3 16" /><path d="M3 21v-5h5" /></>,
    sparkle: <><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z" /><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z" /></>,
    lock: <><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></>,
    flag: <><path d="M5 21V4M5 4h11l-2 4 2 4H5" /></>,
    upload: <><path d="M12 16V4M7 9l5-5 5 5" /><path d="M5 20h14" /></>,
    grip: <><circle cx="9" cy="6" r="1.3" fill={color} stroke="none"/><circle cx="9" cy="12" r="1.3" fill={color} stroke="none"/><circle cx="9" cy="18" r="1.3" fill={color} stroke="none"/><circle cx="15" cy="6" r="1.3" fill={color} stroke="none"/><circle cx="15" cy="12" r="1.3" fill={color} stroke="none"/><circle cx="15" cy="18" r="1.3" fill={color} stroke="none"/></>,
    info: <><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8h.01" /></>,
    arrowRight: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    shield: <><path d="M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z" /></>,
  };
  return <svg {...p} style={{ flex: "none" }}>{paths[name]}</svg>;
}

// ---------- avatar ----------
function Avatar({ user, size = 36 }) {
  if (!user) return null;
  return (
    <span className="avatar" style={{ width: size, height: size, fontSize: size * 0.42, background: user.color }}>
      {user.initials}
    </span>
  );
}

// ---------- badge ----------
const STATUS_META = {
  locked:    { cls: "wait",   label: "대기" },
  requested: { cls: "wait",   label: "검토 요청" },
  reviewing: { cls: "review", label: "검토중" },
  rejected:  { cls: "reject", label: "피드백" },
  redo:      { cls: "redo",   label: "재요청" },
  approved:  { cls: "done",   label: "완료" },
  upload:    { cls: "review", label: "업로드 대기" },
  done:      { cls: "done",   label: "완료" },
};
function Badge({ status }) {
  const m = STATUS_META[status] || STATUS_META.locked;
  return <span className={`badge badge--${m.cls}`}><span className="dot" />{m.label}</span>;
}

// ---------- file chip ----------
function FileChip({ name, kind = "p", className = "" }) {
  const map = { p: "P", x: "X", w: "W" };
  const cls = { p: "", x: "x", w: "w" }[kind] || "";
  return (
    <div className={`filechip ${className}`}>
      <span className={`filechip__icon ${cls}`}>{map[kind] || "P"}</span>
      <span className="filechip__name">{name}</span>
    </div>
  );
}

// ---------- nav (col 1) ----------
function Nav() {
  return (
    <aside className="nav">
      <div className="nav__logo">Samsung <span>AI</span> Portal</div>
      <div className="nav__item">판매자별 리포트</div>
      <div className="nav__item head active">상품관련 문서관리</div>
      <div className="nav__sub">
        <div className="nav__item active">— 기안하기</div>
        <div className="nav__item">— 파일관리</div>
      </div>
      <div className="nav__item head" style={{ fontWeight: 500, color: "var(--text-2)" }}>Menu 3</div>
      <div className="nav__item head" style={{ fontWeight: 500, color: "var(--text-2)" }}>Menu 4</div>
    </aside>
  );
}

// ---------- channel list (col 2) ----------
function ChannelList() {
  return (
    <aside className="chl">
      <div className="chl__head">
        <div className="chl__title">채널</div>
        <button className="chl__add"><Icon name="plus" size={20} /></button>
      </div>
      <div className="chl__search">
        <Icon name="search" size={18} />
        <input placeholder="검색어를 입력해주세요." />
      </div>
      <div className="chl__list">
        {window.CHANNELS.map((c) => (
          <div key={c.id} className={`chl__item ${c.active ? "active" : ""}`}>
            <span className="txt">{c.name}</span>
          </div>
        ))}
      </div>
    </aside>
  );
}

// ---------- chat header ----------
function ChatHeader({ tab, setTab, closed }) {
  return (
    <div className="chat__head">
      <span className="ico"><Icon name="chat" size={22} /></span>
      <div className="chat__name">KODEX 반도체레버리지 리플렛에 대한 기획</div>
      {closed && <span className="badge badge--done" style={{ marginLeft: 4 }}><span className="dot" />종결</span>}
      <div className="chat__tabs">
        <div className={`chat__tab ${tab === "chat" ? "active" : ""}`} onClick={() => setTab("chat")}>대화</div>
        <div className={`chat__tab ${tab === "file" ? "active" : ""}`} onClick={() => setTab("file")}>파일</div>
      </div>
      <div className="chat__head-right">
        <span className="chat__members"><Icon name="members" size={20} /> 24</span>
        <span className="chat__hicon"><Icon name="bell" size={20} /></span>
        <span className="chat__hicon"><Icon name="dots" size={20} /></span>
      </div>
    </div>
  );
}

// ---------- messages ----------
function ChatMessage({ m, user }) {
  if (m.type === "system") return <SystemMessage m={m} />;
  const out = m.dir === "out";
  return (
    <div className={`msg ${out ? "out" : "in"}`}>
      <div className="msg__meta">
        {!out && <Avatar user={user} size={30} />}
        {!out && <span className="who">{user.name} {user.role}</span>}
        <span>{m.time}</span>
      </div>
      <div className="msg__row">
        <div>
          {m.text && <div className="bubble">{m.text}</div>}
          {m.file && <FileChip name={m.file} kind={m.fileKind || "p"} />}
        </div>
      </div>
    </div>
  );
}

function SystemMessage({ m }) {
  return (
    <div className="sys">
      <div className={`sys__pill is-${m.tone || "info"}`}>
        <Icon name={m.icon || "info"} size={15} />
        <span className="tag">{m.tag}</span>
        <span dangerouslySetInnerHTML={{ __html: m.html }} />
      </div>
    </div>
  );
}

// ---------- recent files panel ----------
function RecentFiles() {
  return (
    <div className="panel" style={{ padding: "18px 14px 12px" }}>
      <div className="panel__title" style={{ padding: "0 4px 8px" }}>최근 올라온 파일</div>
      {window.RECENT_FILES.map((f, i) => (
        <div className="rfile" key={i}>
          <span className="filechip__icon" style={{ width: 26, height: 26, fontSize: 11 }}>P</span>
          <span className="nm">{f}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Icon, Avatar, Badge, FileChip, Nav, ChannelList, ChatHeader, ChatMessage, SystemMessage, RecentFiles, STATUS_META });