/* ============================================================
   HR CUTE OFFICE — window.HrOffice
   ============================================================ */
(function () {
  const { useState } = React;
  const { useT, useLang, Icon, Panel, Badge, Avatar, Stat, DataTable, PageHead } = window.UI;

  function RoomTabs({ rooms, active, onChange }) {
    const { lang } = useLang();
    return <div className="seg">{rooms.map((r) => <button key={r.key} className={active === r.key ? "on" : ""} onClick={() => onChange(r.key)}>{r.en}{lang === "th" ? <span style={{ color: "var(--tx-ghost)", marginLeft: 6, fontSize: 11 }}>{r.th}</span> : null}</button>)}</div>;
  }
  const stMap = { online: "ok", busy: "warn", offline: "neutral" };

  function StaffRoom() {
    const t = useT(); const D = window.DATA;
    return (
      <div className="fade-in">
        <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", marginBottom: 16 }}>
          <Stat label={t("Total staff", "พนักงานทั้งหมด")} value={D.staff.length} deltaDir="flat" delta={t("4 teams", "4 ทีม")} accent="var(--ig)" />
          <Stat label={t("Online now", "ออนไลน์ตอนนี้")} value={D.staff.filter((s) => s.status === "online").length} delta={t("active", "ทำงาน")} accent="var(--ok)" />
          <Stat label={t("On shift", "เข้ากะวันนี้")} value="2" deltaDir="flat" delta="Live team" accent="var(--tiktok)" />
          <Stat label={t("Pending leave", "ลารออนุมัติ")} value="1" deltaDir="flat" delta={t("review", "ตรวจสอบ")} accent="var(--warn)" />
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
          {D.staff.map((s) => (
            <Panel key={s.id} className="">
              <div className="panel-pad" style={{ textAlign: "center" }}>
                <div style={{ position: "relative", width: 72, height: 72, margin: "0 auto 12px" }}>
                  <Avatar ini={s.nick[0]} size={72} ac1={s.ac1} ac2={s.ac2} />
                  <span className="sdot" style={{ position: "absolute", bottom: 3, right: 3, width: 14, height: 14, border: "2.5px solid var(--panel)", background: `var(--${stMap[s.status] === "ok" ? "ok" : stMap[s.status] === "warn" ? "warn" : "tx-ghost"})` }} />
                </div>
                <div style={{ fontSize: 15, fontWeight: 700 }}>{s.nick}</div>
                <div style={{ fontSize: 11, color: "var(--tx-faint)", marginBottom: 10 }}>{s.role}<br />{s.roleTh}</div>
                <Badge kind={stMap[s.status]} dot>{s.team}</Badge>
              </div>
            </Panel>
          ))}
        </div>
        <div className="empty-hint" style={{ marginTop: 4 }}>{t("Avatars are placeholder slots — drop your cute character art later.", "ช่องตัวละครเป็นพื้นที่ว่าง — ใส่ภาพการ์ตูนพนักงานทีหลังได้")}</div>
      </div>
    );
  }

  function ShiftsRoom() {
    const t = useT(); const D = window.DATA;
    const cols = [
      { key: "date", label: t("DATE", "วันที่"), render: (r) => <span className="mono strong">{r.date}</span> },
      { key: "staff", label: t("STAFF", "พนักงาน"), render: (r) => <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Avatar ini={r.staff[0]} size={22} ac1="oklch(0.74 0.16 200)" ac2="oklch(0.7 0.2 350)" />{r.staff}</span> },
      { key: "ch", label: t("CHANNEL", "ช่อง"), render: (r) => <Badge kind="info">{r.ch}</Badge> },
      { key: "start", label: t("START", "เข้า"), render: (r) => <span className="mono">{r.start}</span> },
      { key: "end", label: t("END", "ออก"), render: (r) => <span className="mono">{r.end}</span> },
      { key: "hours", label: t("HOURS", "ชั่วโมง"), sortable: true, render: (r) => <span className="num strong">{r.hours}h</span> },
    ];
    return (
      <div className="fade-in">
        <Panel title={t("Shift schedule", "ตารางกะ")} th={t("import from Google Form / Sheet", "นำเข้าจาก Google Form")} right={<><button className="chip"><Icon name="import" size={14} />{t("Import", "นำเข้า")}</button><button className="btn primary"><Icon name="plus" size={15} />{t("Add shift", "เพิ่มกะ")}</button></>}>
          <DataTable columns={cols} rows={D.shifts} />
        </Panel>
      </div>
    );
  }

  function Performance() {
    const t = useT(); const D = window.DATA;
    const perf = [
      { nick: "ฟ้า", role: "Admin Lead", orders: 48, sales: 168000, score: 96, ac1: "oklch(0.7 0.18 330)", ac2: "oklch(0.7 0.16 280)" },
      { nick: "ตูน", role: "Live Host", orders: 42, sales: 142000, score: 92, ac1: "oklch(0.74 0.16 200)", ac2: "oklch(0.68 0.2 350)" },
      { nick: "มิ้น", role: "Admin", orders: 41, sales: 121000, score: 88, ac1: "oklch(0.78 0.15 160)", ac2: "oklch(0.78 0.14 200)" },
      { nick: "แนน", role: "Live Host", orders: 36, sales: 118000, score: 85, ac1: "oklch(0.7 0.2 350)", ac2: "oklch(0.72 0.16 30)" },
    ];
    const baht = (n) => "฿" + Math.round(n).toLocaleString();
    return (
      <div className="fade-in">
        <Panel title={t("Staff performance", "ผลงานพนักงาน")} th={t("this month", "เดือนนี้")}>
          <div style={{ padding: "8px 10px" }}>
            {perf.map((p, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 10px", borderBottom: i < perf.length - 1 ? "1px solid var(--hairline-soft)" : "none" }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--tx-faint)", width: 22 }}>#{i + 1}</span>
                <Avatar ini={p.nick[0]} size={40} ac1={p.ac1} ac2={p.ac2} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 13.5 }}>{p.nick}</div>
                  <div style={{ fontSize: 11, color: "var(--tx-faint)" }}>{p.role}</div>
                </div>
                <div style={{ textAlign: "right", width: 80 }}><div className="mono strong">{p.orders}</div><div style={{ fontSize: 10, color: "var(--tx-faint)" }}>{t("orders", "ออเดอร์")}</div></div>
                <div style={{ textAlign: "right", width: 110 }}><div className="mono strong">{baht(p.sales)}</div><div style={{ fontSize: 10, color: "var(--tx-faint)" }}>{t("attributed sales", "ยอดขาย")}</div></div>
                <div style={{ width: 150, display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ flex: 1, height: 7, background: "var(--panel-3)", borderRadius: 99 }}><div style={{ width: p.score + "%", height: "100%", borderRadius: 99, background: "linear-gradient(90deg, var(--ig), var(--accent-bright))", boxShadow: "0 0 8px var(--ig)" }} /></div>
                  <span className="mono" style={{ fontSize: 12, fontWeight: 700, width: 28 }}>{p.score}</span>
                </div>
              </div>
            ))}
          </div>
        </Panel>
      </div>
    );
  }

  function HrOffice({ onNav }) {
    const t = useT();
    const Hero = window.OfficeHero;
    const [room, setRoom] = useState("staff");
    const rooms = [
      { key: "staff", en: "Staff", th: "พนักงาน" },
      { key: "shifts", en: "Shifts", th: "กะทำงาน" },
      { key: "performance", en: "Performance", th: "ผลงาน" },
    ];
    return (
      <div className="main">
        <Hero office="hr" />
        <PageHead
          crumbs={<><a onClick={() => onNav("city")}>{t("System Map", "แผนที่ระบบ")}</a><Icon name="chev" size={12} /><span style={{ color: "var(--ig)" }}>HR Cute Office</span></>}
          title="HR Cute Office" th="ฝ่ายบุคคล"
          right={<RoomTabs rooms={rooms} active={room} onChange={setRoom} />} />
        {room === "staff" && <StaffRoom />}
        {room === "shifts" && <ShiftsRoom />}
        {room === "performance" && <Performance />}
      </div>
    );
  }
  window.HrOffice = HrOffice;
})();