/* ======================================================
   Admin dashboard — user & access management
====================================================== */

function AdminDashboard({ users, setUsers, toast }) {
  const { ROLE_INFO, TEACHERS, STUDENTS } = window.VRP_DATA;
  const [query, setQuery] = useState("");
  const [roleFilter, setRoleFilter] = useState("ALL");
  const [statusFilter, setStatusFilter] = useState("ALL");
  const [editing, setEditing] = useState(null); // user id | "new"
  const [draft, setDraft] = useState(null);
  const [confirmDel, setConfirmDel] = useState(null);

  const filtered = users.filter(u => {
    if (roleFilter !== "ALL" && u.role !== roleFilter) return false;
    if (statusFilter !== "ALL" && u.status !== statusFilter) return false;
    if (query) {
      const q = query.toLowerCase();
      if (!(u.name.toLowerCase().includes(q) || u.username.toLowerCase().includes(q) || (u.email || "").toLowerCase().includes(q))) return false;
    }
    return true;
  });

  const stats = useMemo(() => {
    const byRole = {};
    Object.keys(ROLE_INFO).forEach(r => byRole[r] = users.filter(u => u.role === r).length);
    return {
      total: users.length,
      active: users.filter(u => u.status === "active").length,
      suspended: users.filter(u => u.status === "suspended").length,
      byRole,
    };
  }, [users]);

  const startNew = () => {
    setDraft({ id: null, username: "", role: "teacher", name: "", email: "", linkLabel: "", status: "active", password: "", lastLogin: "—" });
    setEditing("new");
  };
  const startEdit = (u) => { setDraft({ ...u, password: "" }); setEditing(u.id); };
  const cancel = () => { setDraft(null); setEditing(null); };

  const save = () => {
    if (!draft.username || !draft.name) { toast && toast("กรอกชื่อผู้ใช้และชื่อให้ครบ"); return; }
    const dup = users.find(u => u.username === draft.username && u.id !== editing);
    if (dup) { toast && toast("ชื่อผู้ใช้นี้ถูกใช้แล้ว"); return; }
    if (editing === "new" && !draft.password) { toast && toast("กำหนดรหัสผ่านเริ่มต้น"); return; }
    if (editing === "new") {
      const id = "U-" + Date.now().toString(36);
      const { password, ...rest } = draft;
      setUsers([...users, { ...rest, id }]);
      toast && toast("เพิ่มผู้ใช้เรียบร้อย");
    } else {
      const { password, ...rest } = draft;
      setUsers(users.map(u => u.id === editing ? { ...u, ...rest } : u));
      toast && toast("บันทึกการแก้ไขเรียบร้อย");
    }
    cancel();
  };

  const toggleStatus = (id) => {
    setUsers(users.map(u => u.id === id ? { ...u, status: u.status === "active" ? "suspended" : "active" } : u));
  };
  const resetPw = (u) => { toast && toast("ส่งลิงก์ตั้งรหัสผ่านใหม่ไปยัง " + (u.email || u.username) + " แล้ว"); };
  const remove = (id) => { setUsers(users.filter(u => u.id !== id)); setConfirmDel(null); toast && toast("ลบผู้ใช้เรียบร้อย"); };

  return (
    <div className="fade-in">
      {/* Hero */}
      <div className="hero-card" style={{ marginBottom: 18 }}>
        <div>
          <div className="eyebrow">ผู้ดูแลระบบ · จัดการบัญชีผู้ใช้และสิทธิ์</div>
          <h2>จัดการผู้ใช้งานระบบ</h2>
          <p>เพิ่ม แก้ไข ระงับ หรือลบบัญชีผู้ใช้ · กำหนดบทบาทและสิทธิ์การเข้าถึงสำหรับอาจารย์ ผู้ปกครอง ผู้บริหาร และงานวิชาการ</p>
          <div className="hero-stats">
            <div className="hero-stat"><b><AnimNum value={stats.total}/></b><small>บัญชีทั้งหมด</small></div>
            <div className="hero-stat"><b style={{ color: 'var(--good)' }}><AnimNum value={stats.active}/></b><small>ใช้งานอยู่</small></div>
            <div className="hero-stat"><b style={{ color: 'var(--bad)' }}><AnimNum value={stats.suspended}/></b><small>ถูกระงับ</small></div>
          </div>
        </div>
        <div style={{ display:'grid', placeItems:'center' }}>
          <Donut value={stats.active / Math.max(1, stats.total)} label={stats.active + "/" + stats.total} sub="ใช้งานอยู่" size={150} thickness={14}/>
        </div>
      </div>

      {/* Role distribution chips */}
      <div className="row" style={{ marginBottom: 14 }}>
        {Object.entries(ROLE_INFO).map(([r, info]) => (
          <button key={r} className="card" style={{ padding: '12px 16px', flex: 1, cursor: 'pointer', textAlign: 'left',
                       borderColor: roleFilter === r ? info.color : undefined,
                       boxShadow: roleFilter === r ? `0 0 0 1px ${info.color}` : undefined }}
                  onClick={() => setRoleFilter(roleFilter === r ? "ALL" : r)}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <span className="subj-dot" style={{ background: info.color, width: 10, height: 10 }}/>
              <span style={{ fontSize: 12, fontWeight: 600 }}>{info.label}</span>
            </div>
            <div className="num" style={{ fontSize: 24, fontWeight: 700 }}>{stats.byRole[r] || 0}</div>
            <div className="dim" style={{ fontSize: 10.5, lineHeight: 1.3, marginTop: 2 }}>{info.desc}</div>
          </button>
        ))}
      </div>

      {/* Toolbar */}
      <div className="card" style={{ padding: 14, marginBottom: 14, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <div className="segment">
          <button className={statusFilter === "ALL" ? "active" : ""} onClick={() => setStatusFilter("ALL")}>ทั้งหมด</button>
          <button className={statusFilter === "active" ? "active" : ""} onClick={() => setStatusFilter("active")}>ใช้งาน</button>
          <button className={statusFilter === "suspended" ? "active" : ""} onClick={() => setStatusFilter("suspended")}>ระงับ</button>
        </div>
        <select className="select" value={roleFilter} onChange={e => setRoleFilter(e.target.value)} style={{ minWidth: 160 }}>
          <option value="ALL">— ทุกบทบาท —</option>
          {Object.entries(ROLE_INFO).map(([r, info]) => <option key={r} value={r}>{info.label}</option>)}
        </select>
        <div style={{ position: 'relative', flex: 1, minWidth: 200 }}>
          <Icon.search width={16} height={16} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--fg-3)' }}/>
          <input className="input" style={{ paddingLeft: 36 }} placeholder="ค้นหาชื่อ / username / อีเมล" value={query} onChange={e => setQuery(e.target.value)}/>
        </div>
        <button className="btn primary" onClick={startNew}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
          เพิ่มผู้ใช้
        </button>
      </div>

      {/* Edit/add form */}
      {editing && draft && (
        <div className="card glow" style={{ padding: 22, marginBottom: 14 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 14 }}>
            <div>
              <div className="h-eyebrow">{editing === "new" ? "เพิ่มผู้ใช้" : "แก้ไขผู้ใช้"}</div>
              <h3>{editing === "new" ? "สร้างบัญชีผู้ใช้ใหม่" : draft.name}</h3>
            </div>
            <button className="btn ghost small" onClick={cancel}>✕ ปิด</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            <div className="field">
              <label>ชื่อ-นามสกุล</label>
              <input className="input" value={draft.name} onChange={e => setDraft({ ...draft, name: e.target.value })} placeholder="ชื่อที่แสดง"/>
            </div>
            <div className="field">
              <label>ชื่อผู้ใช้ (Username)</label>
              <input className="input eng" value={draft.username} onChange={e => setDraft({ ...draft, username: e.target.value })} placeholder="username"/>
            </div>
            <div className="field">
              <label>บทบาท</label>
              <select className="select" value={draft.role} onChange={e => setDraft({ ...draft, role: e.target.value })}>
                {Object.entries(ROLE_INFO).map(([r, info]) => <option key={r} value={r}>{info.label}</option>)}
              </select>
            </div>
            <div className="field">
              <label>อีเมล</label>
              <input className="input eng" value={draft.email} onChange={e => setDraft({ ...draft, email: e.target.value })} placeholder="email@vrp.ac.th"/>
            </div>
            <div className="field">
              <label>ผูกกับ {draft.role === "teacher" ? "อาจารย์" : draft.role === "parent" ? "นักศึกษา (บุตร)" : "หน่วยงาน"}</label>
              {draft.role === "teacher" ? (
                <select className="select" value={draft.linkLabel} onChange={e => setDraft({ ...draft, linkLabel: e.target.value })}>
                  <option value="">— เลือกอาจารย์ —</option>
                  {TEACHERS.map(t => <option key={t.id} value={t.id + " · " + t.spec}>{t.name} ({t.spec})</option>)}
                </select>
              ) : draft.role === "parent" ? (
                <select className="select" value={draft.linkLabel} onChange={e => setDraft({ ...draft, linkLabel: e.target.value })}>
                  <option value="">— เลือกนักศึกษา —</option>
                  {STUDENTS.slice(0, 12).map(s => <option key={s.id} value={"บุตร: " + s.code}>{s.fullName} ({s.code})</option>)}
                </select>
              ) : (
                <input className="input" value={draft.linkLabel} onChange={e => setDraft({ ...draft, linkLabel: e.target.value })} placeholder="เช่น ผู้อำนวยการ"/>
              )}
            </div>
            <div className="field">
              <label>{editing === "new" ? "รหัสผ่านเริ่มต้น" : "รีเซ็ตรหัสผ่าน (เว้นว่างถ้าไม่เปลี่ยน)"}</label>
              <input className="input eng" type="text" value={draft.password} onChange={e => setDraft({ ...draft, password: e.target.value })} placeholder="••••••••"/>
            </div>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems: 'center', marginTop: 18, borderTop: '1px solid var(--line)', paddingTop: 14 }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--fg-2)', cursor: 'pointer' }}>
              <input type="checkbox" checked={draft.status === "active"} onChange={e => setDraft({ ...draft, status: e.target.checked ? "active" : "suspended" })} style={{ accentColor: 'oklch(0.72 0.25 340)' }}/>
              เปิดใช้งานบัญชีทันที
            </label>
            <div style={{ display:'flex', gap: 8 }}>
              <button className="btn" onClick={cancel}>ยกเลิก</button>
              <button className="btn primary" onClick={save}><Icon.save width={14} height={14}/> {editing === "new" ? "สร้างบัญชี" : "บันทึก"}</button>
            </div>
          </div>
        </div>
      )}

      {/* Users table */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line)', display:'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div><h3>บัญชีผู้ใช้</h3><div className="muted" style={{ fontSize: 12 }}>{filtered.length} บัญชี</div></div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>ผู้ใช้</th>
              <th>บทบาท</th>
              <th>ผูกกับ</th>
              <th>เข้าระบบล่าสุด</th>
              <th>สถานะ</th>
              <th style={{ width: 150 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(u => {
              const info = ROLE_INFO[u.role] || { label: u.role, color: 'var(--fg-3)' };
              const seed = { admin: 5, academic: 4, executive: 3, teacher: 1, parent: 2 }[u.role] || 1;
              return (
                <tr key={u.id} style={{ opacity: u.status === "suspended" ? 0.6 : 1 }}>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                      <Avatar name={u.name} seed={seed} size={32}/>
                      <div style={{ lineHeight: 1.2 }}>
                        <div style={{ fontSize: 13 }}>{u.name}</div>
                        <div className="dim eng" style={{ fontSize: 11 }}>@{u.username} · {u.email}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className="pill" style={{ background: `color-mix(in oklab, ${info.color} 20%, transparent)`, color: info.color }}>{info.label}</span></td>
                  <td style={{ fontSize: 12, color: 'var(--fg-2)' }}>{u.linkLabel || "—"}</td>
                  <td className="dim eng mono" style={{ fontSize: 11 }}>{u.lastLogin}</td>
                  <td>
                    {u.status === "active"
                      ? <span className="pill good"><span style={{ width: 6, height: 6, borderRadius: 50, background: 'var(--good)' }}/> ใช้งาน</span>
                      : <span className="pill bad">ระงับ</span>}
                  </td>
                  <td>
                    <div style={{ display:'flex', gap: 4, justifyContent: 'flex-end' }}>
                      <button className="btn small ghost" title="แก้ไข" onClick={() => startEdit(u)}><Icon.edit width={13} height={13}/></button>
                      <button className="btn small ghost" title="รีเซ็ตรหัสผ่าน" onClick={() => resetPw(u)}>
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>
                      </button>
                      <button className="btn small ghost" title={u.status === "active" ? "ระงับ" : "เปิดใช้งาน"} onClick={() => toggleStatus(u.id)}>
                        {u.status === "active"
                          ? <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></svg>
                          : <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><polygon points="6 4 20 12 6 20 6 4"/></svg>}
                      </button>
                      {confirmDel === u.id ? (
                        <button className="btn small danger" onClick={() => remove(u.id)}>ยืนยันลบ?</button>
                      ) : (
                        <button className="btn small ghost danger" title="ลบ" onClick={() => setConfirmDel(u.id)} onBlur={() => setConfirmDel(null)}>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M4 7h16"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M5 7v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7"/><path d="M9 7V4h6v3"/></svg>
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && (
              <tr><td colSpan="6" style={{ textAlign: 'center', padding: 40, color: 'var(--fg-3)' }}>ไม่พบบัญชีผู้ใช้ที่ตรงกับเงื่อนไข</td></tr>
            )}
          </tbody>
        </table>
      </div>

      <div className="card" style={{ marginTop: 14, padding: 16, display:'flex', alignItems: 'center', gap: 12, background: 'color-mix(in oklab, var(--red) 8%, transparent)' }}>
        <Icon.alert width={16} height={16} style={{ color: 'var(--bad)' }}/>
        <div style={{ fontSize: 12.5, color: 'var(--fg-1)' }}>
          การจัดการผู้ใช้มีผลต่อสิทธิ์การเข้าถึงระบบทันที · เมื่อเชื่อมฐานข้อมูล Cloudflare D1 การเปลี่ยนแปลงจะถูกบันทึกผ่าน API <span className="eng mono">/api/users</span> และมีการบันทึก audit log
        </div>
      </div>
    </div>
  );
}

window.AdminDashboard = AdminDashboard;