// StaffList — platform employees managed by the System Admin (M1 admin extension).
// Department-scoped permissions follow the master spec §3.3.

const STAFF = [
  { id: "sarah",  initial: "S", name: "Sarah Tan",       email: "sarah.tan@thaihao.co",      dept: "system",     role: "System administrator", mfa: true,  last: "now",     status: "active", joined: "2024-08-12" },
  { id: "daniel", initial: "D", name: "Daniel Park",     email: "d.park@thaihao.co",         dept: "executive",  role: "Chief executive",      mfa: true,  last: "2h ago",  status: "active", joined: "2024-08-12" },
  { id: "alex",   initial: "A", name: "Alex Chen",       email: "alex.chen@thaihao.co",      dept: "sales",      role: "Sales lead, TH-east",  mfa: true,  last: "8m ago",  status: "active", joined: "2025-01-04" },
  { id: "pim",    initial: "P", name: "Pim Suksamran",   email: "pim.s@thaihao.co",          dept: "finance",    role: "Finance · settlements",mfa: true,  last: "33m ago", status: "active", joined: "2024-11-19" },
  { id: "nong",   initial: "N", name: "Nong Khemchai",   email: "nong.k@thaihao.co",         dept: "operations", role: "Ops · fulfillment",    mfa: false, last: "1h ago",  status: "active", joined: "2025-02-02" },
  { id: "linh",   initial: "L", name: "Linh Tran",       email: "linh.tran@thaihao.co",      dept: "compliance", role: "Compliance · KYC",     mfa: true,  last: "12h ago", status: "active", joined: "2025-03-14" },
  { id: "ric",    initial: "R", name: "Ricardo Mendes",  email: "r.mendes@thaihao.co",       dept: "support",    role: "Support · L2 producer",mfa: true,  last: "3d ago",  status: "inactive", joined: "2025-05-21" },
  { id: "yui",    initial: "Y", name: "Yui Tanaka",      email: "yui.tanaka@thaihao.co",     dept: "support",    role: "Support · L1 consumer",mfa: false, last: "1w ago",  status: "suspended", joined: "2025-09-10" },
];

const DEPT = {
  system:     { label: "System",     tone: "primary" },
  executive:  { label: "Executive",  tone: "info" },
  sales:      { label: "Sales",      tone: "info" },
  finance:    { label: "Finance",    tone: "warning" },
  operations: { label: "Operations", tone: "info" },
  compliance: { label: "Compliance", tone: "danger" },
  support:    { label: "Support",    tone: "success" },
};
const STATUS = {
  active:    { label: "Active",    tone: "success" },
  inactive:  { label: "Inactive",  tone: "neutral" },
  suspended: { label: "Suspended", tone: "danger" },
};

function StaffList() {
  const [dept, setDept] = React.useState(null);
  const [search, setSearch] = React.useState("");
  const rows = STAFF.filter(s => !dept || s.dept === dept)
                    .filter(s => !search || (s.name + " " + s.email + " " + s.role).toLowerCase().includes(search.toLowerCase()));

  const depts = Object.keys(DEPT);
  const counts = depts.reduce((a, d) => ({...a, [d]: STAFF.filter(s => s.dept === d).length}), {});

  return (
    <div>
      <div className="page-head">
        <h1>Staff</h1>
        <span className="count">{rows.length} of {STAFF.length} · 6 active · 2 suspended/inactive</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Export</button>
          <button className="btn secondary"><i className="ti ti-key"></i>Manage roles</button>
          <button className="btn primary"><i className="ti ti-user-plus"></i>Invite staff</button>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom: 16}}>
        <div className="kpi">
          <div className="head"><i className="ti ti-users"></i><span className="lbl">Total staff</span></div>
          <div className="val">{STAFF.length}</div>
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+2</span> this quarter</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-shield-check"></i><span className="lbl">MFA enrolled</span></div>
          <div className="val">{STAFF.filter(s => s.mfa).length}<span style={{fontFamily:"var(--font-sans)", fontSize:14, color:"var(--on-surface-variant)", marginLeft:6}}>of {STAFF.length}</span></div>
          <div className="foot"><span style={{color:"var(--color-text-on-warning)"}}>2 staff missing MFA</span></div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-clock-hour-4"></i><span className="lbl">Pending invites</span></div>
          <div className="val">3</div>
          <div className="foot">2 expire within 24h</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-key"></i><span className="lbl">SSO sessions</span></div>
          <div className="val">5</div>
          <div className="foot">Active right now</div>
        </div>
      </div>

      <div className="filter-bar">
        <div className="searchbar">
          <i className="ti ti-search"></i>
          <input placeholder="Search by name, email, role…" value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <span className="label-caps">Department</span>
        <span className={"chip" + (dept === null ? " active":"")} onClick={() => setDept(null)}>All · {STAFF.length}</span>
        {depts.map(d => (
          <span key={d} className={"chip" + (dept === d ? " active":"")} onClick={() => setDept(d)}>{DEPT[d].label} · {counts[d]}</span>
        ))}
      </div>

      <div className="table-card">
        <table>
          <thead>
            <tr>
              <th>Staff</th>
              <th style={{width:140}}>Department</th>
              <th>Role</th>
              <th style={{width:80}}>MFA</th>
              <th style={{width:120}}>Status</th>
              <th style={{width:120}}>Last active</th>
              <th style={{width:36}}></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(s => {
              const st = STATUS[s.status];
              const d = DEPT[s.dept];
              return (
                <tr key={s.id}>
                  <td>
                    <div className="org">
                      <div className="av" style={s.dept==="system"?{background:"var(--thaihao-primary)", color:"#fff"}:{}}>{s.initial}</div>
                      <div>
                        <div className="org-name">{s.name}</div>
                        <div className="org-id">{s.email}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className={"pill " + d.tone}>{d.label}</span></td>
                  <td className="body-sm" style={{color:"var(--on-surface-variant)"}}>{s.role}</td>
                  <td>{s.mfa
                      ? <span className="pill success" style={{padding:"0 8px"}}><i className="ti ti-shield-check" style={{fontSize:12, marginRight:4}}></i>On</span>
                      : <span className="pill warning" style={{padding:"0 8px"}}><i className="ti ti-shield-off" style={{fontSize:12, marginRight:4}}></i>Off</span>}
                  </td>
                  <td><span className={"pill dot " + st.tone}><span className="d"></span>{st.label}</span></td>
                  <td className="body-sm" style={{color:"var(--on-surface-variant)"}}>{s.last}</td>
                  <td><span className="kebab"><i className="ti ti-dots-vertical"></i></span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.StaffList = StaffList;