/* global React, Icon */
const { useState } = React;

function Sidebar({ active, onNav, counts }) {
  const items = [
    { id: "dashboard", label: "ภาพรวม", icon: "dashboard" },
    { id: "projects", label: "โครงการ", icon: "building", badge: counts.projects },
    { id: "contracts", label: "สัญญา", icon: "contract", badge: counts.contracts },
    { id: "houses", label: "บ้าน / ยูนิต", icon: "house", badge: counts.houses },
    { id: "payments", label: "การเบิกจ่าย", icon: "payment" },
    { id: "reports", label: "รายงาน", icon: "report" },
    { id: "settings", label: "ตั้งค่า", icon: "settings" },
  ];
  return (
    <aside className="side">
      <div className="side-brand">
        <div className="mark">JS</div>
        <div>
          <div className="name">JS Contract</div>
          <div className="sub">ระบบจัดการสัญญาก่อสร้าง</div>
        </div>
      </div>

      <div className="side-nav" style={{ marginTop: 8 }}>
        {items.map((it) => (
          <button key={it.id} className={`side-item ${active === it.id ? "active" : ""}`} onClick={() => onNav(it.id)}>
            <span className="ico"><Icon name={it.icon} size={16} /></span>
            <span>{it.label}</span>
            {it.badge != null && <span className="badge">{it.badge}</span>}
          </button>
        ))}
      </div>

      <div className="side-foot">
        <div className="side-user">
          <div className="avatar">สช</div>
          <div className="meta">
            <div className="n">สมชาย จันทร์ดี</div>
            <div className="r">ผู้จัดการโครงการ</div>
          </div>
          <button className="out" title="ออกจากระบบ" onClick={() => onNav("logout")}>
            <Icon name="logout" size={13} />
          </button>
        </div>
      </div>
    </aside>
  );
}

function TopNav({ active, onNav, counts }) {
  const items = [
    { id: "dashboard", label: "ภาพรวม", icon: "dashboard" },
    { id: "projects", label: "โครงการ", icon: "building", badge: counts.projects },
    { id: "contracts", label: "สัญญา", icon: "contract" },
    { id: "houses", label: "บ้าน", icon: "house" },
    { id: "payments", label: "เบิกจ่าย", icon: "payment" },
    { id: "reports", label: "รายงาน", icon: "report" },
  ];
  return (
    <div className="topbar">
      <div className="brand">
        <div className="mark" style={{ width: 28, height: 28, borderRadius: 6, background: "linear-gradient(135deg,#2563EB,#1D4ED8)", display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12, fontFamily: "IBM Plex Sans" }}>JS</div>
        <span className="name">JS Contract</span>
      </div>
      <div className="nav">
        {items.map((it) => (
          <button key={it.id} className={`side-item ${active === it.id ? "active" : ""}`} onClick={() => onNav(it.id)}>
            <span className="ico"><Icon name={it.icon} size={15} /></span>
            <span>{it.label}</span>
            {it.badge != null && <span className="badge">{it.badge}</span>}
          </button>
        ))}
      </div>
      <div className="spacer"></div>
      <div className="side-user" style={{ paddingRight: 0 }}>
        <div className="avatar" style={{ width: 28, height: 28, fontSize: 11 }}>สช</div>
        <div className="meta" style={{ marginRight: 8 }}>
          <div className="n" style={{ fontSize: 12 }}>สมชาย จันทร์ดี</div>
        </div>
        <button className="out" onClick={() => onNav("logout")}><Icon name="logout" size={13} /></button>
      </div>
    </div>
  );
}

function Crumb({ trail, onBack, search, setSearch, right }) {
  return (
    <div className="crumb">
      <div className="path">
        {trail.map((t, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep"><Icon name="chevR" size={12} /></span>}
            <span className={i === trail.length - 1 ? "here" : ""} style={{ cursor: t.onClick ? "pointer" : "default" }} onClick={t.onClick}>{t.label}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="spacer"></div>
      <div className="search">
        <Icon name="search" size={14} />
        <input placeholder="ค้นหาโครงการ, สัญญา, รหัสบ้าน..." value={search || ""} onChange={(e) => setSearch && setSearch(e.target.value)} />
        <kbd>⌘K</kbd>
      </div>
      <button className="ico-btn" title="แจ้งเตือน" style={{ position: "relative" }}>
        <Icon name="bell" size={15} />
        <span style={{ position: "absolute", top: 6, right: 7, width: 7, height: 7, background: "var(--danger)", borderRadius: "50%", border: "1.5px solid var(--surface)" }}></span>
      </button>
      {right}
    </div>
  );
}

Object.assign(window, { Sidebar, TopNav, Crumb });