// ============================================================
// admin.jsx — User Management (admin only) + Login screen
// ============================================================

function LoginScreen({ state, setState }) {
  const [username, setUsername] = useState("admin");
  const [password, setPassword] = useState("admin123");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    setTimeout(() => {
      const u = state.users.find(x => x.username === username && x.status === "active");
      if (u && password.length >= 4) {
        setState(s => ({ ...s, currentUserId: u.id }));
        DB.updateLastLogin(u.id);
      } else {
        setError("ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
      }
      setLoading(false);
    }, 700);
  };

  return (
    <div className="login-shell">
      <div className="login-side">
        <div className="pattern">
          <svg viewBox="0 0 200 200">
            <defs>
              <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="white" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="200" height="200" fill="url(#grid)"/>
          </svg>
        </div>
        <div style={{ position: "relative" }}>
          <div className="row" style={{ gap: 10, alignItems: "center" }}>
            <img src="verena-logo.png" alt="Verena" style={{ height: 32, width: "auto", filter: "brightness(0) invert(1)" }}/>
            <div>
              <div style={{ fontWeight: 600, fontSize: 16 }}>Verena Inventory Manager</div>
              <div className="text-xs" style={{ color: "rgba(255,255,255,0.55)" }}>F&B Edition · v2.4</div>
            </div>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <h1 style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, textWrap: "balance", lineHeight: 1.15 }}>
            จัดการคลังสินค้า<br/>อย่างเป็นระบบ
          </h1>
          <p style={{ marginTop: 14, color: "rgba(255,255,255,0.65)", fontSize: 14.5, maxWidth: 420, lineHeight: 1.6 }}>
            ระบบบริหารสต๊อกสินค้าและคลังสินค้าสำหรับธุรกิจอาหารและเครื่องดื่ม รับเข้า · จ่ายออก · แผนผังคลัง · รายงาน ครบในที่เดียว
          </p>
          <div className="row" style={{ gap: 28, marginTop: 32, fontSize: 13, color: "rgba(255,255,255,0.7)" }}>
            <div>
              <div style={{ fontSize: 22, fontWeight: 600, color: "white" }}>15</div>
              <div className="text-xs">SKUs</div>
            </div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 600, color: "white" }}>4</div>
              <div className="text-xs">Warehouses</div>
            </div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 600, color: "white" }}>64</div>
              <div className="text-xs">Locations</div>
            </div>
          </div>
        </div>
        <div style={{ position: "relative", fontSize: 12, color: "rgba(255,255,255,0.4)" }}>
          © 2026 Verena Inventory Manager · Demo
        </div>
      </div>

      <div className="login-form-side">
        <div className="login-card">
          <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.015em", margin: 0 }}>เข้าสู่ระบบ</h2>
          <p className="muted text-sm" style={{ marginTop: 6, marginBottom: 24 }}>ใช้บัญชี <span className="mono">admin</span> / <span className="mono">admin123</span> เพื่อทดสอบในฐานะ Admin</p>

          <form onSubmit={submit} className="col" style={{ gap: 14 }}>
            <div className="field">
              <label className="label">ชื่อผู้ใช้ (Username)</label>
              <input className="input" value={username} onChange={e => setUsername(e.target.value)} autoFocus/>
            </div>
            <div className="field">
              <label className="label">รหัสผ่าน</label>
              <input className="input" type="password" value={password} onChange={e => setPassword(e.target.value)}/>
            </div>
            {error && (
              <div style={{ padding: 10, background: "var(--danger-soft)", color: "var(--danger)", borderRadius: 6, fontSize: 12.5 }}>
                <Icon name="alert" size={13}/> {error}
              </div>
            )}
            <button type="submit" className="btn btn-accent btn-lg" disabled={loading} style={{ marginTop: 4 }}>
              {loading ? <><Icon name="loader" size={14} className="spin"/> กำลังเข้าสู่ระบบ...</> : <><Icon name="arrow-right" size={14}/> เข้าสู่ระบบ</>}
            </button>
          </form>

          <hr className="divider" style={{ margin: "22px 0" }}/>

          <div className="text-xs muted" style={{ marginBottom: 8 }}>หรือ Quick Login (Demo)</div>
          <div className="col" style={{ gap: 6 }}>
            {state.users.filter(u => u.status === "active").map(u => (
              <button key={u.id} className="nav-item" onClick={() => { setState(s => ({ ...s, currentUserId: u.id })); DB.updateLastLogin(u.id); }}>
                <span className="avatar" style={{ background: u.color + "22", color: u.color, width: 26, height: 26, fontSize: 11 }}>{u.initials}</span>
                <div style={{ flex: 1, textAlign: "left" }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{u.name}</div>
                  <div className="text-xs muted">@{u.username}</div>
                </div>
                <RoleBadge role={u.role}/>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ UsersScreen — admin CRUD ============
function UsersScreen({ state, setState, currentUser }) {
  const toast = useToast();
  const [editUser, setEditUser] = useState(null); // {id?, name, username, email, role, status}
  const [confirmDelete, setConfirmDelete] = useState(null);

  const isAdmin = currentUser?.role === "admin";

  const colorPalette = ["#2563eb", "#16a34a", "#d97706", "#7c3aed", "#0891b2", "#db2777", "#65a30d"];

  const openCreate = () => {
    setEditUser({
      _new: true,
      name: "",
      username: "",
      email: "",
      role: "user",
      status: "active",
      color: colorPalette[Math.floor(Math.random() * colorPalette.length)],
    });
  };
  const openEdit = (u) => setEditUser({ ...u });
  const close = () => setEditUser(null);

  const save = () => {
    if (!editUser.name.trim() || !editUser.username.trim()) {
      toast("กรุณากรอกชื่อและ username", "danger");
      return;
    }
    setState(s => {
      let users = [...s.users];
      if (editUser._new) {
        const initials = editUser.name.trim().split(/\s+/).slice(0, 2).map(x => x[0]).join("").toUpperCase() || editUser.username.slice(0, 2).toUpperCase();
        const newUser = {
          id: `U-${String(users.length + 1).padStart(3, "0")}`,
          username: editUser.username,
          name: editUser.name,
          email: editUser.email || `${editUser.username}@inv.co.th`,
          role: editUser.role,
          status: editUser.status,
          lastLogin: "—",
          initials,
          color: editUser.color,
        };
        users.push(newUser);
        DB.upsertUser(newUser);
        toast(`เพิ่มผู้ใช้ ${newUser.name} แล้ว`, "success");
      } else {
        const updated = { ...users.find(u => u.id === editUser.id), ...editUser };
        users = users.map(u => u.id === editUser.id ? updated : u);
        DB.upsertUser(updated);
        toast(`บันทึกการแก้ไข ${editUser.name} แล้ว`, "success");
      }
      return { ...s, users };
    });
    close();
  };

  const doDelete = (id) => {
    setState(s => ({ ...s, users: s.users.filter(u => u.id !== id) }));
    DB.deleteUser(id);
    toast("ลบผู้ใช้แล้ว", "success");
  };

  const stats = {
    total: state.users.length,
    admins: state.users.filter(u => u.role === "admin").length,
    active: state.users.filter(u => u.status === "active").length,
  };

  return (
    <>
      <div className="page-header">
        <div>
          <div className="page-title">จัดการผู้ใช้งาน</div>
          <div className="page-sub">{isAdmin ? "เพิ่ม แก้ไข หรือลบผู้ใช้งานในระบบ" : "ดูรายชื่อผู้ใช้งาน (ต้องเป็น admin เพื่อแก้ไข)"}</div>
        </div>
        <div className="row">
          {isAdmin && <button className="btn btn-accent" onClick={openCreate}><Icon name="plus" size={13}/> เพิ่มผู้ใช้</button>}
        </div>
      </div>

      <div className="stats-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        <StatCard label="ผู้ใช้ทั้งหมด" value={stats.total} icon="users" delta="" deltaDir=""/>
        <StatCard label="Admin" value={stats.admins} icon="settings" delta="" deltaDir=""/>
        <StatCard label="ใช้งานอยู่" value={stats.active} icon="check" delta={`${stats.total - stats.active} ปิดใช้งาน`} deltaDir=""/>
      </div>

      <div className="card card-pad-0">
        <div className="card-header"><h3>รายชื่อผู้ใช้</h3></div>
        <div className="table-wrap">
          <table className="table">
            <thead><tr>
              <th>ผู้ใช้</th><th>Username</th><th>Email</th><th>บทบาท</th><th>สถานะ</th><th>เข้าระบบล่าสุด</th><th style={{ width: 80 }}></th>
            </tr></thead>
            <tbody>
              {state.users.map(u => (
                <tr key={u.id}>
                  <td>
                    <div className="row" style={{ gap: 10 }}>
                      <span className="avatar" style={{ background: u.color + "22", color: u.color }}>{u.initials}</span>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 500 }}>{u.name}</div>
                        <div className="mono text-xs muted">{u.id}</div>
                      </div>
                    </div>
                  </td>
                  <td className="mono text-xs">@{u.username}</td>
                  <td className="text-xs muted">{u.email}</td>
                  <td><RoleBadge role={u.role}/></td>
                  <td>
                    {u.status === "active"
                      ? <span className="badge badge-success"><span className="badge-dot"/>Active</span>
                      : <span className="badge"><span className="badge-dot" style={{ background: "var(--fg-4)" }}/>Inactive</span>}
                  </td>
                  <td className="text-xs muted">{u.lastLogin}</td>
                  <td>
                    {isAdmin && (
                      <div className="row" style={{ gap: 2 }}>
                        <button className="btn btn-ghost btn-icon" onClick={() => openEdit(u)} title="แก้ไข">
                          <Icon name="edit" size={14}/>
                        </button>
                        <button className="btn btn-ghost btn-icon" onClick={() => setConfirmDelete(u)}
                          disabled={u.id === currentUser.id} title={u.id === currentUser.id ? "ไม่สามารถลบบัญชีตัวเอง" : "ลบ"}>
                          <Icon name="trash" size={14}/>
                        </button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <Modal open={!!editUser} onClose={close}
        title={editUser?._new ? "เพิ่มผู้ใช้ใหม่" : "แก้ไขผู้ใช้"}
        footer={<>
          <button className="btn btn-secondary" onClick={close}>ยกเลิก</button>
          <button className="btn btn-accent" onClick={save}><Icon name="check" size={14}/> บันทึก</button>
        </>}>
        {editUser && (
          <div className="col" style={{ gap: 14 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div className="field">
                <label className="label">ชื่อ-นามสกุล</label>
                <input className="input" value={editUser.name} onChange={e => setEditUser(u => ({ ...u, name: e.target.value }))}/>
              </div>
              <div className="field">
                <label className="label">Username</label>
                <input className="input mono" value={editUser.username} onChange={e => setEditUser(u => ({ ...u, username: e.target.value }))}/>
              </div>
            </div>
            <div className="field">
              <label className="label">Email</label>
              <input className="input" value={editUser.email} onChange={e => setEditUser(u => ({ ...u, email: e.target.value }))}/>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div className="field">
                <label className="label">บทบาท</label>
                <select className="select" value={editUser.role} onChange={e => setEditUser(u => ({ ...u, role: e.target.value }))}>
                  <option value="admin">Admin (จัดการระบบ + ผู้ใช้)</option>
                  <option value="user">User (ใช้งานทั่วไป)</option>
                </select>
              </div>
              <div className="field">
                <label className="label">สถานะ</label>
                <select className="select" value={editUser.status} onChange={e => setEditUser(u => ({ ...u, status: e.target.value }))}>
                  <option value="active">Active</option>
                  <option value="inactive">Inactive</option>
                </select>
              </div>
            </div>
            <div className="field">
              <label className="label">สีประจำตัว</label>
              <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
                {["#2563eb", "#16a34a", "#d97706", "#7c3aed", "#0891b2", "#db2777", "#65a30d", "#737373"].map(c => (
                  <button key={c} type="button"
                    onClick={() => setEditUser(u => ({ ...u, color: c }))}
                    style={{
                      width: 30, height: 30, borderRadius: 8,
                      background: c, border: editUser.color === c ? "3px solid var(--fg)" : "1px solid var(--border)",
                      cursor: "pointer",
                    }}/>
                ))}
              </div>
            </div>
            <div className="hint">หมายเหตุ: ระบบสาธิตนี้ไม่มีการตั้งรหัสผ่านจริง — ใช้บัญชีเพื่อสลับมุมมองสิทธิ์เท่านั้น</div>
          </div>
        )}
      </Modal>

      <ConfirmDialog
        open={!!confirmDelete}
        title="ยืนยันการลบผู้ใช้"
        message={`ต้องการลบ "${confirmDelete?.name}" หรือไม่? การลบจะมีผลทันทีและไม่สามารถย้อนกลับได้`}
        danger
        onConfirm={() => doDelete(confirmDelete.id)}
        onClose={() => setConfirmDelete(null)}
      />
    </>
  );
}

Object.assign(window, { LoginScreen, UsersScreen });