/* Admin.jsx — จัดการผู้ใช้ (อนุมัติ/บทบาท) + ตั้งค่าบริษัท (โลโก้) */
const { useState: adUseState, useRef: adUseRef } = React;

function StatusBadge({ status }) {
  if (status === "approved") return <span className="badge badge-green"><span className="b-dot" style={{ background: "#0f9d58" }}></span>อนุมัติแล้ว</span>;
  if (status === "pending") return <span className="badge badge-amber"><span className="b-dot" style={{ background: "#d98a04" }}></span>รออนุมัติ</span>;
  return <span className="badge badge-red"><span className="b-dot" style={{ background: "#dc3545" }}></span>ถูกปฏิเสธ</span>;
}

/* ============ จัดการผู้ใช้ ============ */
function UserManagement() {
  const { users, approveUser, rejectUser, setUserRole, deleteUser, user: me } = useAuth();
  const s = useStore();
  const pending = users.filter(u => u.status === "pending");
  const others = users.filter(u => u.status !== "pending");

  const RoleSelect = ({ u }) => (
    <select className="select" style={{ width: 200, padding: "7px 30px 7px 11px", fontSize: 13.5 }} value={u.role}
      disabled={u.username === "admin"} onChange={e => { setUserRole(u.username, e.target.value); s.pushToast(`เปลี่ยนบทบาท ${u.username} แล้ว`); }}>
      {ROLES.map(r => <option key={r.id} value={r.id}>{r.label}</option>)}
    </select>
  );

  return (
    <div className="page fade-up">
      <div className="page-head"><h2>จัดการผู้ใช้งาน</h2><p>อนุมัติคำขอลงทะเบียน กำหนดบทบาท และควบคุมสิทธิ์การเข้าถึง (เฉพาะผู้ดูแลระบบ)</p></div>

      {/* คำขอรออนุมัติ */}
      <Card pad={false} style={{ marginBottom: 18, overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", background: pending.length ? "var(--amber-soft)" : "var(--surface-2)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 32, height: 32, borderRadius: 9, background: pending.length ? "var(--amber)" : "var(--muted-2)", color: "#fff", display: "grid", placeItems: "center" }}><Icons.bell size={17}/></span>
          <div><div style={{ fontWeight: 600 }}>คำขอรออนุมัติ</div><div style={{ fontSize: 12.5, color: "var(--muted)" }}>{pending.length} รายการ</div></div>
        </div>
        {pending.length === 0
          ? <div style={{ padding: "26px", textAlign: "center", color: "var(--muted)", fontSize: 14 }}>ไม่มีคำขอที่รออนุมัติ</div>
          : pending.map(u => (
            <div key={u.username} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 20px", borderTop: "1px solid var(--line-2)", flexWrap: "wrap" }}>
              <span className="avatar" style={{ width: 40, height: 40 }}>{u.name.charAt(0)}</span>
              <div style={{ flex: 1, minWidth: 160 }}>
                <div style={{ fontWeight: 600 }}>{u.name}</div>
                <div style={{ fontSize: 12.5, color: "var(--muted-2)" }}>@<span className="num">{u.username}</span> · ขอบทบาท {roleLabel(u.role)}</div>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                <button className="btn btn-ghost btn-sm" onClick={() => { rejectUser(u.username); s.pushToast("ปฏิเสธคำขอแล้ว", "warn"); }} style={{ color: "var(--red)" }}><Icons.close size={15}/>ปฏิเสธ</button>
                <button className="btn btn-primary btn-sm" onClick={() => { approveUser(u.username); s.pushToast(`อนุมัติ ${u.username} แล้ว`); }} style={{ background: "var(--green)" }}><Icons.check size={15}/>อนุมัติ</button>
              </div>
            </div>
          ))
        }
      </Card>

      {/* ผู้ใช้ทั้งหมด */}
      <Card pad={false}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--line)" }}><div style={{ fontWeight: 600 }}>ผู้ใช้ในระบบ</div><div style={{ fontSize: 12.5, color: "var(--muted)" }}>{others.length} บัญชี</div></div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>ผู้ใช้</th><th>ชื่อผู้ใช้</th><th>บทบาท</th><th>สถานะ</th><th></th></tr></thead>
            <tbody>
              {others.map(u => (
                <tr key={u.username}>
                  <td><div className="item-id"><span className="avatar" style={{ width: 36, height: 36 }}>{u.name.charAt(0)}</span><div><div className="item-name" style={{ fontSize: 13.5 }}>{u.name}{u.username === me?.username && <span className="badge badge-blue" style={{ marginLeft: 8 }}>คุณ</span>}</div></div></div></td>
                  <td className="num" style={{ color: "var(--muted)" }}>@{u.username}</td>
                  <td><RoleSelect u={u} /></td>
                  <td><StatusBadge status={u.status} /></td>
                  <td className="t-right">
                    {u.username !== "admin" && u.username !== me?.username && (
                      <button className="icon-btn" style={{ width: 36, height: 36, color: "var(--muted-2)" }} title="ลบผู้ใช้"
                        onClick={() => { if (confirm(`ลบผู้ใช้ ${u.username}?`)) { deleteUser(u.username); s.pushToast("ลบผู้ใช้แล้ว", "warn"); } }}><Icons.trash size={16}/></button>
                    )}
                    {u.username === "admin" && <span className="badge badge-blue">สูงสุด</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

/* ============ ตั้งค่าบริษัท ============ */
function CompanySettings() {
  const s = useStore();
  const c = s.company;
  const [form, setForm] = adUseState(c);
  const fileRef = adUseRef(null);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const dirty = JSON.stringify(form) !== JSON.stringify(c);

  const onLogo = (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file || !file.type.startsWith("image/")) return;
    const r = new FileReader();
    r.onload = () => {
      const img = new Image();
      img.onload = () => {
        const max = 320; let w = img.width, h = img.height;
        if (w > h && w > max) { h = h * max / w; w = max; } else if (h > max) { w = w * max / h; h = max; }
        const cv = document.createElement("canvas"); cv.width = w; cv.height = h;
        cv.getContext("2d").drawImage(img, 0, 0, w, h);
        setForm(f => ({ ...f, logo: cv.toDataURL("image/png") }));
      };
      img.src = r.result;
    };
    r.readAsDataURL(file);
    e.target.value = "";
  };

  const save = () => { s.setCompany(form); s.pushToast("บันทึกข้อมูลบริษัทแล้ว"); };

  return (
    <div className="page fade-up" style={{ maxWidth: 920 }}>
      <div className="page-head"><h2>ตั้งค่าบริษัท</h2><p>โลโก้และข้อมูลบริษัทที่จะแสดงบนหัวใบเสนอราคา</p></div>
      <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 18 }} className="dash-row">
        {/* โลโก้ */}
        <Card>
          <SectionHead title="โลโก้บริษัท" />
          <input ref={fileRef} type="file" accept="image/*" onChange={onLogo} style={{ display: "none" }} />
          <div style={{ border: "1.5px dashed var(--line)", borderRadius: 14, padding: 18, display: "grid", placeItems: "center", background: "var(--surface-2)", minHeight: 170 }}>
            {form.logo
              ? <img src={form.logo} alt="logo" style={{ maxWidth: "100%", maxHeight: 140, objectFit: "contain" }} />
              : <div style={{ textAlign: "center", color: "var(--muted-2)" }}><Icons.box size={34}/><div style={{ fontSize: 13, marginTop: 8 }}>ยังไม่มีโลโก้</div></div>}
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
            <button className="btn btn-soft btn-sm" onClick={() => fileRef.current.click()} style={{ flex: 1 }}><Icons.plus size={15}/>อัปโหลดโลโก้</button>
            {form.logo && <button className="btn btn-ghost btn-sm" onClick={() => setForm(f => ({ ...f, logo: null }))} style={{ color: "var(--red)" }}><Icons.trash size={15}/></button>}
          </div>
          <div style={{ fontSize: 12, color: "var(--muted-2)", marginTop: 10 }}>แนะนำไฟล์ PNG พื้นโปร่งใส</div>
        </Card>

        {/* ข้อมูล */}
        <Card>
          <SectionHead title="ข้อมูลบริษัท" />
          <div style={{ display: "grid", gap: 14 }}>
            <div className="field"><label>ชื่อบริษัท</label><input className="input" value={form.name} onChange={set("name")} /></div>
            <div className="field"><label>ที่อยู่</label><textarea className="input" rows="2" value={form.address} onChange={set("address")}></textarea></div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <div className="field"><label>โทรศัพท์</label><input className="input" value={form.phone} onChange={set("phone")} /></div>
              <div className="field"><label>อีเมล</label><input className="input" value={form.email} onChange={set("email")} /></div>
            </div>
            <div className="field"><label>เลขประจำตัวผู้เสียภาษี</label><input className="input num" value={form.taxId} onChange={set("taxId")} /></div>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, marginTop: 18 }}>
            <button className="btn btn-ghost" onClick={() => setForm(c)} disabled={!dirty}>ยกเลิก</button>
            <button className="btn btn-primary" onClick={save} disabled={!dirty}><Icons.check size={17}/>บันทึก</button>
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { UserManagement, CompanySettings });