/* auth.jsx — ระบบล็อกอิน / ลงทะเบียน (เชื่อม API จริงบน Cloudflare D1)
   • บัญชีผู้ใช้เก็บถาวรในฐานข้อมูล D1
   • เซสชันใช้ token (เก็บใน localStorage) ตรวจสอบกับเซิร์ฟเวอร์ทุกครั้งที่เปิด
   • ลงทะเบียนใหม่ต้องรอแอดมินอนุมัติก่อนจึงเข้าใช้งานได้
*/
const { createContext: aCreateCtx, useContext: aUseCtx, useState: aUseState, useEffect: aUseEffect, useCallback: aUseCb } = React;

const ROLES = [
  { id: "store", label: "เจ้าหน้าที่คลัง / สโตร์" },
  { id: "admin", label: "ผู้ดูแลระบบ (Admin)" },
  { id: "buyer", label: "ฝ่ายจัดซื้อ / บัญชี" },
  { id: "exec",  label: "ผู้บริหาร / เจ้าของร้าน" },
];
const roleLabel = (id) => (ROLES.find(r => r.id === id) || {}).label || "ผู้ใช้งาน";

const AuthCtx = aCreateCtx(null);
const useAuth = () => aUseCtx(AuthCtx);

function AuthProvider({ children }) {
  const [user, setUser] = aUseState(null);      // เซสชันปัจจุบัน
  const [ready, setReady] = aUseState(false);   // ตรวจ token เริ่มต้นเสร็จหรือยัง
  const [users, setUsers] = aUseState([]);      // รายชื่อผู้ใช้ (สำหรับแอดมิน)

  /* ตรวจ token ที่เก็บไว้ตอนเปิดแอป */
  aUseEffect(() => {
    let alive = true;
    (async () => {
      if (API.token) {
        const r = await API.get("auth/me");
        if (alive && r.ok && r.data.user) setUser(r.data.user);
        else API.setToken(null);
      }
      if (alive) setReady(true);
    })();
    return () => { alive = false; };
  }, []);

  const refreshUsers = aUseCb(async () => {
    const r = await API.get("users");
    if (r.ok) setUsers(r.data.users || []);
  }, []);

  aUseEffect(() => {
    if (user && user.role === "admin") refreshUsers();
    else setUsers([]);
  }, [user, refreshUsers]);

  const login = async (username, password) => {
    const r = await API.post("auth/login", { username, password });
    if (r.ok && r.data.ok) { API.setToken(r.data.token); setUser(r.data.user); return { ok: true }; }
    return { ok: false, msg: (r.data && r.data.msg) || "เข้าสู่ระบบไม่สำเร็จ" };
  };
  const register = async (f) => {
    const r = await API.post("auth/register", { name: f.name, username: f.username, password: f.password, role: f.role });
    if (r.ok && r.data.ok) return { ok: true };
    return { ok: false, msg: (r.data && r.data.msg) || "ลงทะเบียนไม่สำเร็จ" };
  };
  const logout = async () => { try { await API.post("auth/logout"); } catch (e) {} API.setToken(null); setUser(null); };

  /* ---- จัดการผู้ใช้ (เฉพาะแอดมิน) — เซิร์ฟเวอร์ส่งรายชื่อล่าสุดกลับมา ---- */
  const applyUsers = (r) => { if (r.ok && r.data.users) setUsers(r.data.users); };
  const approveUser = async (u) => applyUsers(await API.post("users/approve", { username: u }));
  const rejectUser  = async (u) => applyUsers(await API.post("users/reject", { username: u }));
  const setUserRole = async (u, role) => applyUsers(await API.post("users/role", { username: u, role }));
  const deleteUser  = async (u) => applyUsers(await API.del("users/" + encodeURIComponent(u)));
  const pendingCount = users.filter(u => u.status === "pending").length;

  return (
    <AuthCtx.Provider value={{ user, ready, users, login, register, logout, approveUser, rejectUser, setUserRole, deleteUser, pendingCount, refreshUsers }}>
      {children}
    </AuthCtx.Provider>
  );
}

/* ---------- หน้าจอ Auth ---------- */
function AuthScreen() {
  const { login, register } = useAuth();
  const [mode, setMode] = aUseState("login");
  return (
    <div className="auth-wrap">
      <div className="auth-brand">
        <div className="auth-brand-inner">
          <div className="auth-logo"><Icons.layers size={26}/></div>
          <h1>ระบบคลังวัสดุก่อสร้าง</h1>
          <p>จัดการรับเข้า–จ่ายออก ติดตามสต๊อกและโลเคชั่นแบบเรียลไทม์ พร้อมรายงานครบถ้วน</p>
          <ul className="auth-feats">
            {[["receive","รับเข้า–จ่ายออก พร้อมตัดสต๊อกอัตโนมัติ"],["grid","ผังโลเคชั่นแท็กสินค้าคงเหลือเอง"],["report","รายงานคงเหลือและการเคลื่อนไหว"]].map(([ic,t])=>{
              const I = Icons[ic];
              return <li key={t}><span className="auth-feat-ic"><I size={16}/></span>{t}</li>;
            })}
          </ul>
          <div className="auth-pattern"></div>
        </div>
      </div>
      <div className="auth-panel">
        <div className="auth-card">
          {mode === "login"
            ? <LoginForm onLogin={login} toRegister={() => setMode("register")} />
            : <RegisterForm onRegister={register} toLogin={() => setMode("login")} />}
        </div>
        <div className="auth-foot">© 2569 ระบบคลังวัสดุก่อสร้าง</div>
      </div>
    </div>
  );
}

function Field({ label, children, error }) {
  return (
    <div className="field" style={{ marginBottom: 14 }}>
      <label>{label}</label>
      {children}
      {error && <span style={{ fontSize: 12, color: "var(--red)", fontWeight: 600 }}>{error}</span>}
    </div>
  );
}

function LoginForm({ onLogin, toRegister }) {
  const [u, setU] = aUseState("");
  const [p, setP] = aUseState("");
  const [err, setErr] = aUseState("");
  const [busy, setBusy] = aUseState(false);

  const submit = async (e) => {
    e.preventDefault();
    setBusy(true); setErr("");
    const r = await onLogin(u, p);
    if (!r.ok) { setErr(r.msg); setBusy(false); }
  };
  return (
    <form onSubmit={submit} className="fade-up">
      <div className="auth-h">เข้าสู่ระบบ</div>
      <div className="auth-sub">กรุณาเข้าสู่ระบบทุกครั้งก่อนใช้งาน</div>
      <Field label="ชื่อผู้ใช้">
        <input className="input" value={u} onChange={e => setU(e.target.value)} placeholder="username" autoFocus />
      </Field>
      <Field label="รหัสผ่าน" error={err}>
        <input className="input" type="password" value={p} onChange={e => setP(e.target.value)} placeholder="••••••" />
      </Field>
      <button className="btn btn-primary" type="submit" disabled={!u || !p || busy} style={{ width: "100%", marginTop: 4, height: 46 }}>
        {busy ? "กำลังเข้าสู่ระบบ…" : <React.Fragment><Icons.check size={18}/>เข้าสู่ระบบ</React.Fragment>}
      </button>
      <div className="auth-switch">ยังไม่มีบัญชี? <button type="button" onClick={toRegister}>ลงทะเบียนผู้ใช้ใหม่</button></div>
    </form>
  );
}

function RegisterForm({ onRegister, toLogin }) {
  const [f, setF] = aUseState({ name: "", username: "", password: "", confirm: "", role: "store" });
  const [err, setErr] = aUseState({});
  const [done, setDone] = aUseState(false);
  const [busy, setBusy] = aUseState(false);
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (f.name.trim().length < 2) er.name = "กรุณากรอกชื่อ-นามสกุล";
    if (f.username.trim().length < 3) er.username = "ชื่อผู้ใช้อย่างน้อย 3 ตัวอักษร";
    if (f.password.length < 4) er.password = "รหัสผ่านอย่างน้อย 4 ตัวอักษร";
    if (f.confirm !== f.password) er.confirm = "รหัสผ่านไม่ตรงกัน";
    setErr(er);
    if (Object.keys(er).length) return;
    setBusy(true);
    const r = await onRegister(f);
    setBusy(false);
    if (!r.ok) { setErr({ username: r.msg }); return; }
    setDone(true);
  };

  if (done) {
    return (
      <div className="fade-up" style={{ textAlign: "center", padding: "12px 0" }}>
        <div style={{ width: 64, height: 64, borderRadius: 18, background: "var(--amber-soft)", color: "var(--amber)", display: "grid", placeItems: "center", margin: "0 auto 16px" }}><Icons.user size={30}/></div>
        <div className="auth-h" style={{ marginBottom: 6 }}>ส่งคำขอลงทะเบียนแล้ว</div>
        <div className="auth-sub" style={{ marginBottom: 22 }}>บัญชี <b>{f.username}</b> อยู่ระหว่าง<b>รอผู้ดูแลระบบอนุมัติ</b> เมื่อได้รับการอนุมัติแล้วจึงจะเข้าสู่ระบบได้</div>
        <button className="btn btn-primary" style={{ width: "100%", height: 46 }} onClick={toLogin}><Icons.check size={18}/>กลับหน้าเข้าสู่ระบบ</button>
      </div>
    );
  }
  return (
    <form onSubmit={submit} className="fade-up">
      <div className="auth-h">ลงทะเบียนผู้ใช้ใหม่</div>
      <div className="auth-sub">สร้างบัญชีเพื่อเข้าใช้งานระบบคลัง</div>
      <Field label="ชื่อ–นามสกุล" error={err.name}>
        <input className="input" value={f.name} onChange={set("name")} placeholder="เช่น สมชาย ก่อสร้าง" autoFocus />
      </Field>
      <Field label="ชื่อผู้ใช้ (Username)" error={err.username}>
        <input className="input" value={f.username} onChange={set("username")} placeholder="username สำหรับล็อกอิน" />
      </Field>
      <Field label="บทบาทที่ขอใช้งาน">
        <select className="select" value={f.role} onChange={set("role")}>
          {ROLES.filter(r => r.id !== "admin").map(r => <option key={r.id} value={r.id}>{r.label}</option>)}
        </select>
      </Field>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <Field label="รหัสผ่าน" error={err.password}>
          <input className="input" type="password" value={f.password} onChange={set("password")} placeholder="••••••" />
        </Field>
        <Field label="ยืนยันรหัสผ่าน" error={err.confirm}>
          <input className="input" type="password" value={f.confirm} onChange={set("confirm")} placeholder="••••••" />
        </Field>
      </div>
      <button className="btn btn-primary" type="submit" disabled={busy} style={{ width: "100%", marginTop: 4, height: 46 }}>
        {busy ? "กำลังส่งคำขอ…" : <React.Fragment><Icons.plus size={18}/>ลงทะเบียน</React.Fragment>}
      </button>
      <div className="auth-switch">มีบัญชีอยู่แล้ว? <button type="button" onClick={toLogin}>เข้าสู่ระบบ</button></div>
    </form>
  );
}

Object.assign(window, { AuthProvider, useAuth, AuthScreen, roleLabel, ROLES });