// Employee App — four departments, cycled via topbar chip.

const DEPTS = [
  {
    code: "sales",   label: "Sales",        color: "var(--color-text-on-info)",
    user: { initial: "A", name: "Alex Chen",        role: "Sales · TH-east" },
  },
  {
    code: "care",    label: "Customer Care",color: "var(--color-text-on-success)",
    user: { initial: "L", name: "Lin Phurita",      role: "Care lead · Producer book" },
  },
  {
    code: "finance", label: "Finance",      color: "var(--thaihao-primary)",
    user: { initial: "P", name: "Pim Suksamran",    role: "Finance · Approval tier L1" },
  },
  {
    code: "ops",     label: "Operations",   color: "var(--color-text-on-warning)",
    user: { initial: "N", name: "Nong Khemchai",    role: "Ops · Cross-tenant" },
  },
];

function EmployeeApp() {
  const [deptIdx, setDeptIdx] = React.useState(0);
  const dept = DEPTS[deptIdx];
  const [sections, setSections] = React.useState({ sales: "home", care: "home", finance: "home", ops: "home" });
  const section = sections[dept.code];
  const setSection = (s) => setSections(prev => ({ ...prev, [dept.code]: s }));
  const cycleDept = () => setDeptIdx(i => (i + 1) % DEPTS.length);

  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("thaihao-emp-theme") || "light"; } catch { return "light"; }
  });
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("thaihao-emp-theme", theme); } catch {}
  }, [theme]);

  const crumbs = ["Employee", dept.label, section === "home" ? "Home" : section[0].toUpperCase() + section.slice(1)];

  return (
    <div className="workspace">
      <DeptSidebar dept={dept} section={section} setSection={setSection} />
      <div className="main">
        <DeptTopbar crumbs={crumbs} dept={dept} onCycleDept={cycleDept} theme={theme} onToggleTheme={() => setTheme(t => t==="dark"?"light":"dark")} />
        <div className="content" key={dept.code + "-" + section}>
          {section === "home" && dept.code === "sales"   && <SalesHome />}
          {section === "home" && dept.code === "care"    && <CareHome />}
          {section === "home" && dept.code === "finance" && <FinanceHome />}
          {section === "home" && dept.code === "ops"     && <OpsHome />}
          {section !== "home" && <Placeholder section={section} dept={dept} />}
        </div>
      </div>
    </div>
  );
}

function Placeholder({ section, dept }) {
  return (
    <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:10, padding:"64px 0", color:"var(--on-surface-variant)"}}>
      <i className="ti ti-layout-dashboard" style={{fontSize:48}}></i>
      <h2 style={{fontFamily:"var(--font-display)", fontSize:18, color:"var(--on-surface)", margin:0}}>{dept.label} · {section}</h2>
      <p style={{maxWidth:480, textAlign:"center", margin:0, fontSize:13}}>Detail view for this department. Same chrome, scoped to {dept.label.toLowerCase()} permissions.</p>
      <span style={{fontSize:11, fontFamily:"var(--font-mono)"}}>UI kit · prototype</span>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<EmployeeApp />);