// ============ USERS MANAGEMENT (owner only) ============
const { Icon: IcU, StatCard: SCU, Modal: ModalU } = window.UI;
const APIu = window.API;

const PERM_RESOURCES = [
  { key: 'income',  label: 'ລາຍຮັບ / ວຽກສ້ອມ' },
  { key: 'expense', label: 'ລາຍຈ່າຍ' },
  { key: 'salary',  label: 'ເງິນເດືອນ + ພະນັກງານ' },
  { key: 'reports', label: 'ລາຍງານ / ວິເຄາະ' },
  { key: 'stock',   label: 'ສະຕັອກອາໄຫຼ່' },
];
const PERM_LEVELS = [
  { value: 'none', label: 'ບໍ່ໃຫ້', color: 'rgba(244,63,94,0.15)' },
  { value: 'view', label: 'ເບິ່ງ',  color: 'rgba(6,182,212,0.18)' },
  { value: 'edit', label: 'ແກ້ໄຂ', color: 'rgba(16,185,129,0.20)' },
];

function permSummary(role, perms) {
  if (role === 'owner') return 'ສິດເຕັມຮູບແບບ';
  const parts = PERM_RESOURCES
    .map(r => ({ ...r, level: perms?.[r.key] || 'none' }))
    .filter(r => r.level !== 'none');
  if (parts.length === 0) return 'ບໍ່ມີສິດເຂົ້າເຖິງ';
  return parts.map(r => `${r.label}: ${PERM_LEVELS.find(l => l.value === r.level)?.label || ''}`).join(' · ');
}

function Users() {
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editUser, setEditUser] = React.useState(null);
  const [addOpen, setAddOpen] = React.useState(false);
  const [removing, setRemoving] = React.useState(null);
  const [error, setError] = React.useState('');

  const reload = () => {
    setLoading(true);
    APIu.users.list()
      .then(setUsers)
      .catch(e => setError(e.detail || e.message))
      .finally(() => setLoading(false));
  };
  React.useEffect(reload, []);

  const handleSave = async (data) => {
    try {
      if (data.id) {
        const u = await APIu.users.update(data.id, data);
        setUsers(users.map(x => x.id === u.id ? u : x));
      } else {
        const u = await APIu.users.create(data);
        setUsers([...users, u]);
      }
      setEditUser(null);
      setAddOpen(false);
    } catch (e) {
      throw e;
    }
  };

  const handleDelete = async (id) => {
    if (!window.confirm('ຢືນຢັນລົບຜູ້ໃຊ້ນີ້?')) return;
    setRemoving(id);
    try {
      await APIu.users.remove(id);
      setTimeout(() => {
        setUsers(prev => prev.filter(u => u.id !== id));
        setRemoving(null);
      }, 240);
    } catch (e) {
      alert(e.detail || e.message);
      setRemoving(null);
    }
  };

  const ownerCount = users.filter(u => u.role === 'owner').length;
  const staffCount = users.length - ownerCount;

  return (
    <div className="page">
      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <SCU label="ຜູ້ໃຊ້ທັງໝົດ" value={users.length} color="purple" icon={<IcU.Salary/>}
          trend={{ dir: 'up', value: 'Active', label: 'ໃນລະບົບ' }}/>
        <SCU label="ເຈົ້າຂອງ" value={ownerCount} color="amber" icon={<IcU.Lock/>}
          trend={{ dir: 'up', value: 'Full access', label: 'ສິດເຕັມ' }}/>
        <SCU label="ພະນັກງານ" value={staffCount} color="cyan" icon={<IcU.Salary/>}
          trend={{ dir: 'up', value: 'Limited', label: 'ສິດຕາມການກຳນົດ' }}/>
      </div>

      <div className="card">
        <div className="card-h">
          <div>
            <h3>ບັນຊີຜູ້ໃຊ້ + ສິດການເຂົ້າເຖິງ</h3>
            <div className="sub">ກຳນົດສິດແຕ່ລະຄົນວ່າສາມາດເບິ່ງ ຫຼື ແກ້ໄຂສ່ວນໃດໄດ້ແດ່</div>
          </div>
          <button className="btn btn-primary" onClick={() => setAddOpen(true)}><IcU.Plus/> ເພີ່ມຜູ້ໃຊ້</button>
        </div>

        {error && <div style={{ padding: 14, background: 'rgba(244,63,94,0.08)', border: '1px solid rgba(244,63,94,0.25)', borderRadius: 10, color: '#fb7185', fontSize: 13, marginBottom: 12 }}>⚠️ {error}</div>}

        {loading ? (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-3)' }}>ກຳລັງໂຫຼດ...</div>
        ) : (
        <table>
          <thead>
            <tr>
              <th>ຊື່ຜູ້ໃຊ້</th>
              <th>ຊື່</th>
              <th>ບົດບາດ</th>
              <th>ສິດການເຂົ້າເຖິງ</th>
              <th style={{ textAlign: 'right', width: 200 }}>ການຈັດການ</th>
            </tr>
          </thead>
          <tbody>
            {users.map(u => (
              <tr key={u.id} className={removing === u.id ? 'removing' : ''}>
                <td className="mono" style={{ fontWeight: 500 }}>{u.username}</td>
                <td>{u.name}</td>
                <td>
                  {u.role === 'owner'
                    ? <span className="chip amber"><span className="dot"></span>ເຈົ້າຂອງ</span>
                    : <span className="chip cyan"><span className="dot"></span>ພະນັກງານ</span>}
                </td>
                <td style={{ fontSize: 11.5, color: 'var(--ink-2)', maxWidth: 380 }}>
                  {permSummary(u.role, u.permissions)}
                </td>
                <td style={{ textAlign: 'right' }}>
                  <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                    <button className="btn" style={{ fontSize: 12 }} onClick={() => setEditUser(u)}>ແກ້ໄຂ</button>
                    <button className="icon-btn danger" title="ລົບຜູ້ໃຊ້" onClick={() => handleDelete(u.id)}>
                      <IcU.Trash/>
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        )}
      </div>

      {(addOpen || editUser) && (
        <UserModal
          user={editUser}
          onClose={() => { setAddOpen(false); setEditUser(null); }}
          onSave={handleSave}
        />
      )}
    </div>
  );
}

function UserModal({ user, onClose, onSave }) {
  const isEdit = !!user;
  const [username, setUsername] = React.useState(user?.username || '');
  const [name, setName]         = React.useState(user?.name || '');
  const [password, setPassword] = React.useState('');
  const [role, setRole]         = React.useState(user?.role || 'staff');
  const [perms, setPerms]       = React.useState(user?.permissions || {});
  const [error, setError]       = React.useState('');
  const [saving, setSaving]     = React.useState(false);

  const setLevel = (resource, level) => {
    setPerms(prev => ({ ...prev, [resource]: level }));
  };

  const handleSave = async () => {
    setError('');
    if (!isEdit && (!username.trim() || !password)) {
      setError('ປ້ອນຊື່ຜູ້ໃຊ້ ແລະ ລະຫັດຜ່ານ');
      return;
    }
    if (!name.trim()) { setError('ປ້ອນຊື່ບຸກຄົນ'); return; }
    if (password && password.length < 6) { setError('ລະຫັດຜ່ານຍາວຢ່າງໜ້ອຍ 6 ຕົວ'); return; }

    setSaving(true);
    try {
      const payload = isEdit
        ? { id: user.id, name: name.trim(), role, permissions: perms, ...(password ? { password } : {}) }
        : { username: username.trim(), password, name: name.trim(), role, permissions: perms };
      await onSave(payload);
    } catch (e) {
      setError(e.detail || e.message || 'ບັນທຶກບໍ່ສຳເລັດ');
      setSaving(false);
    }
  };

  return (
    <ModalU
      title={isEdit ? `ແກ້ໄຂຜູ້ໃຊ້ — ${user.username}` : 'ເພີ່ມຜູ້ໃຊ້ໃໝ່'}
      subtitle={isEdit ? 'ປ່ຽນຊື່ / ບົດບາດ / ສິດ / ລະຫັດຜ່ານ (ປ່ອຍຫວ່າງຖ້າບໍ່ປ່ຽນ)' : 'ສ້າງບັນຊີໃໝ່ ແລະ ກຳນົດສິດ'}
      onClose={onClose}
      footer={<>
        {error && <span style={{ color: '#fb7185', fontSize: 12, marginRight: 'auto' }}>{error}</span>}
        <button className="btn" onClick={onClose}>ຍົກເລີກ</button>
        <button className="btn btn-primary" onClick={handleSave} disabled={saving}>
          <IcU.Check/> {saving ? 'ກຳລັງບັນທຶກ...' : (isEdit ? 'ບັນທຶກການແກ້ໄຂ' : 'ສ້າງຜູ້ໃຊ້')}
        </button>
      </>}>
      <div className="form-grid">
        <div className="field">
          <label>ຊື່ຜູ້ໃຊ້ (username)</label>
          <input className="input mono" value={username} onChange={e => setUsername(e.target.value)} disabled={isEdit}/>
        </div>
        <div className="field">
          <label>{isEdit ? 'ປ່ຽນລະຫັດຜ່ານ (ບໍ່ບັງຄັບ)' : 'ລະຫັດຜ່ານ'}</label>
          <input className="input" type="password" placeholder={isEdit ? 'ປ່ອຍຫວ່າງຖ້າບໍ່ປ່ຽນ' : 'ຢ່າງໜ້ອຍ 6 ຕົວ'} value={password} onChange={e => setPassword(e.target.value)}/>
        </div>
        <div className="field full">
          <label>ຊື່ບຸກຄົນ</label>
          <input className="input" placeholder="ເຊັ່ນ ສົມຊາຍ ໃຈດີ" value={name} onChange={e => setName(e.target.value)}/>
        </div>
        <div className="field full">
          <label>ບົດບາດ</label>
          <select className="select" value={role} onChange={e => setRole(e.target.value)}>
            <option value="staff">ພະນັກງານ (ສິດຕາມການກຳນົດ)</option>
            <option value="owner">ເຈົ້າຂອງ (ສິດເຕັມ + ຈັດການຜູ້ໃຊ້)</option>
          </select>
        </div>
      </div>

      {role !== 'owner' && (
        <div style={{ marginTop: 16, padding: 14, borderRadius: 12, background: 'rgba(124,58,237,0.06)', border: '1px solid rgba(124,58,237,0.18)' }}>
          <div style={{ fontSize: 11.5, color: 'var(--ink-2)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 10 }}>
            ສິດການເຂົ້າເຖິງ ແຕ່ລະໝວດ
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {PERM_RESOURCES.map(r => (
              <div key={r.key} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ flex: 1, fontSize: 13 }}>{r.label}</div>
                <div style={{ display: 'flex', gap: 4 }}>
                  {PERM_LEVELS.map(lvl => {
                    const active = (perms[r.key] || 'none') === lvl.value;
                    return (
                      <button
                        key={lvl.value}
                        type="button"
                        onClick={() => setLevel(r.key, lvl.value)}
                        className="btn"
                        style={{
                          fontSize: 11.5, padding: '5px 10px',
                          background: active ? lvl.color : 'rgba(255,255,255,0.025)',
                          borderColor: active ? 'rgba(255,255,255,0.18)' : 'var(--line)',
                          fontWeight: active ? 600 : 400,
                        }}
                      >{lvl.label}</button>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </ModalU>
  );
}

window.PAGES_D = { Users };