/* ============ Users & roles ============ */
function userStatusBadge(s) {
  if (s === 'approved' || s === 'active') return <span className="badge ok"><span className="dot"></span>ใช้งาน</span>;
  if (s === 'rejected') return <span className="badge danger"><span className="dot"></span>ถูกปฏิเสธ</span>;
  return <span className="badge warn"><span className="dot"></span>รออนุมัติ</span>;
}
function UsersPage({ role, toast }) {
  const isOwner = role === 'owner';
  const [, setVer] = useState(0);
  const refresh = (list) => { if (Array.isArray(list)) D.users = list; setVer((v) => v + 1); };
  const [add, setAdd] = useState(false);
  const [edit, setEdit] = useState(null);
  const [delUser, setDelUser] = useState(null);
  const users = D.users || [];

  if (!isOwner) return <Empty icon="lock" title="เฉพาะเจ้าของกิจการเท่านั้น" sub="คุณไม่มีสิทธิ์จัดการผู้ใช้งาน" />;

  const act = async (fn, okMsg, errMsg) => {
    const res = await fn();
    if (res.ok && (res.data.ok || res.data.users)) { refresh(res.data.users); if (okMsg) toast(okMsg); return true; }
    toast((res.data && (res.data.msg || res.data.error)) || errMsg || 'ทำรายการไม่สำเร็จ', 'warn');
    return false;
  };

  const doDelete = async () => {
    await act(() => API.deleteUser(delUser.username), 'ลบผู้ใช้ ' + delUser.name + ' แล้ว');
    setDelUser(null);
  };

  return (
    <>
      <div className="page-head">
        <div><div className="pt">ผู้ใช้และสิทธิ์</div><div className="ps">จัดการผู้ใช้งานในระบบ และกำหนดสิทธิ์การเข้าถึง</div></div>
        <div className="spacer"></div>
        <button className="btn btn-primary" onClick={() => setAdd(true)}><Icon name="plus" className="ic" />เพิ่มผู้ใช้</button>
      </div>

      <div className="callout info" style={{ marginBottom: 16 }}>
        <Icon name="info" className="ic" />
        <div>ผู้ใช้ใหม่ที่สมัครเองจะอยู่สถานะ <b>รออนุมัติ</b> จนกว่าผู้ดูแลระบบจะกด <b>อนุมัติ</b> หรือ <b>ตั้งรหัสผ่าน</b>ให้ · ตั้งรหัสผ่านได้ที่ปุ่มแก้ไข (ดินสอ)</div>
      </div>

      {/* role cards */}
      <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', marginBottom: 16 }}>
        {Object.entries(D.roleInfo).map(([k, r]) => (
          <div key={k} className="card card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}><span className={'badge ' + r.badge}>{r.label}</span><span style={{ marginLeft: 'auto', fontSize: 13, fontWeight: 700 }}>{users.filter((u) => u.role === k).length} คน</span></div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>{r.desc}</div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-head"><h3>รายชื่อผู้ใช้</h3><span className="badge muted" style={{ marginLeft: 'auto' }}>{users.length} บัญชี</span></div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>ผู้ใช้</th><th>อีเมล</th><th>สิทธิ์</th><th>สถานะ</th><th>เข้าใช้ล่าสุด</th><th className="c">จัดการ</th></tr></thead>
            <tbody>
              {users.map((u) => (
                <tr key={u.username || u.id}>
                  <td><div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><div className="avatar" style={{ width: 32, height: 32, fontSize: 12 }}>{u.name[0]}</div><div><div style={{ fontWeight: 600 }}>{u.name}{u.mainAdmin ? <span className="badge muted" style={{ marginLeft: 6, fontSize: 10 }}>แอดมินหลัก</span> : null}</div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>@{u.username} · {u.phone}</div></div></div></td>
                  <td className="mono" style={{ fontSize: 12.5 }}>{u.email}</td>
                  <td><span className={'badge ' + D.roleInfo[u.role].badge}>{D.roleInfo[u.role].label}</span></td>
                  <td>{userStatusBadge(u.status)}</td>
                  <td style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>{u.last}</td>
                  <td className="c"><div style={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
                    {u.status === 'pending' && <button className="btn btn-sm btn-soft" onClick={() => act(() => API.approveUser(u.username), 'อนุมัติ ' + u.name + ' แล้ว')} title="อนุมัติ">อนุมัติ</button>}
                    {u.status === 'pending' && <button className="x-btn" style={{ color: 'var(--danger)' }} onClick={() => act(() => API.rejectUser(u.username), 'ปฏิเสธ ' + u.name + ' แล้ว')} title="ปฏิเสธ"><Icon name="x" size={16} /></button>}
                    <button className="x-btn" onClick={() => setEdit(u)} title="แก้ไข / ตั้งรหัสผ่าน"><Icon name="edit" size={16} /></button>
                    {!u.mainAdmin && <button className="x-btn" style={{ color: 'var(--danger)' }} onClick={() => setDelUser(u)} title="ลบ"><Icon name="trash" size={16} /></button>}
                  </div></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {(add || edit) && <UserModal user={edit} act={act} toast={toast} onClose={() => { setAdd(false); setEdit(null); }} />}
      {delUser && (
        <Modal title="ยืนยันการลบผู้ใช้" icon="trash" onClose={() => setDelUser(null)}
          footer={<><button className="btn btn-ghost" onClick={() => setDelUser(null)}>ยกเลิก</button><button className="btn btn-danger" onClick={doDelete}><Icon name="trash" className="ic" />ลบผู้ใช้</button></>}>
          <div style={{ fontSize: 14, lineHeight: 1.7 }}>ต้องการลบผู้ใช้ <b>{delUser.name}</b> (@{delUser.username}) ออกจากระบบใช่หรือไม่? ผู้ใช้นี้จะเข้าใช้งานไม่ได้อีก</div>
        </Modal>
      )}
    </>
  );
}
function UserModal({ user, act, toast, onClose }) {
  const isEdit = !!user;
  const [f, setF] = useState(user
    ? { username: user.username, name: user.name, email: user.email || '', phone: user.phone === '—' ? '' : (user.phone || ''), role: user.role }
    : { username: '', name: '', email: '', phone: '', role: 'staff' });
  const [pw, setPw] = useState('');
  const [err, setErr] = useState('');
  const [saving, setSaving] = useState(false);
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));

  const save = async () => {
    setErr('');
    if (f.name.trim().length < 2) { setErr('กรุณากรอกชื่อ-นามสกุล'); return; }
    if (pw && pw.length < 6) { setErr('รหัสผ่านอย่างน้อย 6 ตัวอักษร'); return; }
    setSaving(true);
    let ok = true;
    if (isEdit) {
      ok = await act(() => API.updateUser(f.username, { name: f.name.trim(), email: f.email.trim(), phone: f.phone.trim() || '—' }), null);
      if (ok && f.role !== user.role && !user.mainAdmin) ok = await act(() => API.setUserRole(f.username, f.role), null);
      if (ok && pw) ok = await act(() => API.setUserPassword(f.username, pw), null);
      if (ok) toast('บันทึกผู้ใช้แล้ว');
    } else {
      if (f.username.trim().length < 3) { setErr('ชื่อผู้ใช้อย่างน้อย 3 ตัวอักษร'); setSaving(false); return; }
      ok = await act(() => API.createUser({ username: f.username.trim().toLowerCase(), name: f.name.trim(), email: f.email.trim(), phone: f.phone.trim() || '—', role: f.role, password: pw || undefined }),
        pw ? 'เพิ่มผู้ใช้และตั้งรหัสผ่านแล้ว — เข้าใช้งานได้ทันที' : 'เพิ่มผู้ใช้แล้ว (รอตั้งรหัสผ่าน/อนุมัติ)');
    }
    setSaving(false);
    if (ok) onClose();
  };

  return (
    <Modal title={isEdit ? 'แก้ไขผู้ใช้' : 'เพิ่มผู้ใช้ใหม่'} icon="users" onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>ยกเลิก</button><button className="btn btn-primary" onClick={save} disabled={saving}><Icon name="check" className="ic" />{saving ? 'กำลังบันทึก…' : 'บันทึก'}</button></>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
        {err && <div className="callout warn" style={{ padding: '9px 12px' }}><Icon name="alert" className="ic" />{err}</div>}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Field label="ชื่อผู้ใช้ (ล็อกอิน)"><input className="input mono" value={f.username} onChange={(e) => set('username', e.target.value)} placeholder="เช่น somchai" disabled={isEdit} /></Field>
          <Field label="ชื่อ-นามสกุล"><input className="input" value={f.name} onChange={(e) => set('name', e.target.value)} placeholder="ชื่อพนักงาน" /></Field>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
          <Field label="อีเมล"><input className="input" value={f.email} onChange={(e) => set('email', e.target.value)} placeholder="name@email.com" /></Field>
          <Field label="เบอร์โทร"><input className="input" value={f.phone} onChange={(e) => set('phone', e.target.value)} placeholder="08x-xxx-xxxx" /></Field>
        </div>
        <Field label={isEdit ? 'ตั้งรหัสผ่านใหม่ (เว้นว่างถ้าไม่เปลี่ยน)' : 'รหัสผ่าน (ใส่เลยเพื่อให้เข้าใช้ได้ทันที หรือเว้นว่างให้รออนุมัติ)'}>
          <input className="input" type="text" value={pw} onChange={(e) => setPw(e.target.value)} placeholder="อย่างน้อย 6 ตัวอักษร" />
        </Field>
        <Field label="สิทธิ์การใช้งาน">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {Object.entries(D.roleInfo).filter(([k]) => k !== 'owner' || (user && user.role === 'owner')).map(([k, r]) => (
              <label key={k} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '10px 12px', borderRadius: 10, border: '1px solid ' + (f.role === k ? 'var(--primary)' : 'var(--line)'), background: f.role === k ? 'var(--primary-tint)' : 'var(--surface)', cursor: (user && user.mainAdmin) ? 'not-allowed' : 'pointer', opacity: (user && user.mainAdmin && k !== 'owner') ? 0.5 : 1 }}>
                <input type="radio" checked={f.role === k} disabled={user && user.mainAdmin} onChange={() => set('role', k)} style={{ accentColor: 'var(--primary)', marginTop: 3 }} />
                <div><div style={{ fontWeight: 600, fontSize: 13.5 }}>{r.label}</div><div style={{ fontSize: 12, color: 'var(--ink-2)' }}>{r.desc}</div></div>
              </label>
            ))}
          </div>
        </Field>
      </div>
    </Modal>
  );
}

/* ============ Settings ============ */
function SettingsPage({ role, entity, toast }) {
  const canEdit = role === 'owner';
  const [tab, setTab] = useState('company');
  const [vatRate, setVatRate] = useState(7);
  const c = D.company;

  return (
    <>
      <div className="page-head">
        <div><div className="pt">ตั้งค่ากิจการ</div><div className="ps">ข้อมูลกิจการ ภาษี และการตั้งค่าระบบ {!canEdit && '· (ดูอย่างเดียว)'}</div></div>
      </div>

      <div className="seg" style={{ marginBottom: 18 }}>
        {[['company', 'ข้อมูลกิจการ'], ['tax', 'ภาษี'], ['system', 'ระบบ']].map(([id, l]) => <button key={id} className={tab === id ? 'on' : ''} onClick={() => setTab(id)}>{l}</button>)}
      </div>

      {tab === 'company' && (
        <div className="card" style={{ maxWidth: 720 }}>
          <div className="card-head"><div className="stat-ic" style={{ background: 'var(--primary-tint)', color: 'var(--primary)', width: 30, height: 30 }}><Icon name="building" size={16} /></div><h3>ข้อมูลนิติบุคคล</h3></div>
          <div className="card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12 }}>
              <Field label="ชื่อกิจการ"><input className="input" defaultValue={c.name} disabled={!canEdit} /></Field>
              <Field label="ประเภท"><select className="select" disabled={!canEdit}><option>ห้างหุ้นส่วนจำกัด</option><option>บริษัทจำกัด</option><option>บุคคลธรรมดา</option></select></Field>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Field label="เลขประจำตัวผู้เสียภาษี"><input className="input mono" defaultValue={c.taxId} disabled={!canEdit} /></Field>
              <Field label="สาขา"><input className="input" defaultValue={c.branch} disabled={!canEdit} /></Field>
            </div>
            <Field label="ที่อยู่"><textarea className="input" rows="2" defaultValue={c.address} disabled={!canEdit}></textarea></Field>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 12 }}>
              <Field label="โทรศัพท์"><input className="input" defaultValue={c.phone} disabled={!canEdit} /></Field>
              <Field label="อีเมล"><input className="input" defaultValue={c.email} disabled={!canEdit} /></Field>
            </div>
            {canEdit && <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 4 }}><button className="btn btn-primary" onClick={() => toast('บันทึกข้อมูลกิจการแล้ว')}><Icon name="save" className="ic" />บันทึก</button></div>}
          </div>
        </div>
      )}

      {tab === 'tax' && (
        <div className="card" style={{ maxWidth: 720 }}>
          <div className="card-head"><div className="stat-ic" style={{ background: 'var(--primary-tint)', color: 'var(--primary)', width: 30, height: 30 }}><Icon name="vat" size={16} /></div><h3>การตั้งค่าภาษี</h3></div>
          <div className="card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div className="field">
              <label>อัตรา VAT (%)</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <input type="range" min="0" max="10" step="1" value={vatRate} onChange={(e) => setVatRate(+e.target.value)} disabled={!canEdit} style={{ flex: 1, accentColor: 'var(--primary)' }} />
                <span className="num" style={{ fontWeight: 700, fontSize: 22, width: 64, textAlign: 'right' }}>{vatRate}%</span>
              </div>
              <div className="hint">ค่าเริ่มต้นตามกฎหมายไทยคือ 7% — ปรับได้หากมีการเปลี่ยนแปลงอัตรา</div>
            </div>
            <div className="divider"></div>
            <label style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><div><div style={{ fontWeight: 600, fontSize: 13.5 }}>จดทะเบียนภาษีมูลค่าเพิ่ม (VAT)</div><div style={{ fontSize: 12, color: 'var(--ink-3)' }}>กิจการอยู่ในระบบ VAT — ต้องยื่น ภ.พ.30 รายเดือน</div></div><Toggle on={true} onClick={() => {}} label="" /></label>
            <div className="field"><label>รอบบัญชีเริ่มต้น</label><select className="select" disabled={!canEdit} style={{ maxWidth: 240 }}><option>มกราคม (ปีปฏิทิน)</option><option>เมษายน</option><option>ตุลาคม</option></select></div>
            {canEdit && <div style={{ display: 'flex', justifyContent: 'flex-end' }}><button className="btn btn-primary" onClick={() => toast('บันทึกการตั้งค่าภาษีแล้ว')}><Icon name="save" className="ic" />บันทึก</button></div>}
          </div>
        </div>
      )}

      {tab === 'system' && (
        <div className="card" style={{ maxWidth: 720 }}>
          <div className="card-head"><div className="stat-ic" style={{ background: 'var(--primary-tint)', color: 'var(--primary)', width: 30, height: 30 }}><Icon name="settings" size={16} /></div><h3>ระบบและความปลอดภัย</h3></div>
          <div className="card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              ['Soft Delete — ป้องกันลบถาวร', 'เอกสารที่ลบจะย้ายไปถังขยะ กู้คืนได้ภายใน 90 วัน', true],
              ['Audit Log — บันทึกทุกการแก้ไข', 'เก็บประวัติการกระทำของผู้ใช้ทุกคน', true],
              ['สำรองข้อมูลอัตโนมัติรายวัน', 'สำรองฐานข้อมูลและไฟล์ทุกวันเวลา 02:00 น.', true],
              ['ยืนยันตัวตน 2 ชั้น (2FA)', 'เพิ่มความปลอดภัยด้วย OTP ทางมือถือ', false],
            ].map(([t, s, on], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 0', borderBottom: i < 3 ? '1px solid var(--line-2)' : 'none' }}>
                <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13.5 }}>{t}</div><div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{s}</div></div>
                <Toggle on={on} onClick={() => canEdit && toast('อัปเดตการตั้งค่าแล้ว')} label="" />
              </div>
            ))}
            <div style={{ display: 'flex', gap: 10, marginTop: 14, flexWrap: 'wrap' }}>
              <button className="btn btn-ghost" onClick={() => toast('กำลังสำรองข้อมูล…')}><Icon name="save" className="ic" />สำรองข้อมูลทันที</button>
              <button className="btn btn-ghost" onClick={() => toast('ส่งออก Audit Log แล้ว')}><Icon name="download" className="ic" />ส่งออก Log</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

/* ============ Audit log ============ */
function AuditPage() {
  const typeInfo = {
    create: { ic: 'plus', color: 'var(--ok)', bg: 'var(--ok-bg)' },
    edit: { ic: 'edit', color: 'var(--info)', bg: 'var(--info-bg)' },
    delete: { ic: 'trash', color: 'var(--danger)', bg: 'var(--danger-bg)' },
    download: { ic: 'download', color: 'var(--warn)', bg: 'var(--warn-bg)' },
  };
  return (
    <>
      <div className="page-head">
        <div><div className="pt">ประวัติการใช้งาน (Audit Log)</div><div className="ps">บันทึกทุกการเพิ่ม แก้ไข ลบ และดาวน์โหลด — ตรวจสอบย้อนหลังได้</div></div>
        <div className="spacer"></div>
        <button className="btn btn-ghost"><Icon name="download" className="ic" />ส่งออก Log</button>
      </div>

      <div className="card">
        <div style={{ padding: '6px 0' }}>
          {D.audit.map((a, i) => {
            const t = typeInfo[a.type];
            return (
              <div key={a.id} style={{ display: 'flex', gap: 13, padding: '14px 20px', borderBottom: i < D.audit.length - 1 ? '1px solid var(--line-2)' : 'none', alignItems: 'flex-start' }}>
                <div className="stat-ic" style={{ background: t.bg, color: t.color, width: 36, height: 36, flexShrink: 0 }}><Icon name={t.ic} size={17} /></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14 }}><b>{a.user}</b> <span style={{ color: 'var(--ink-2)' }}>{a.action}</span></div>
                  <div className="mono" style={{ fontSize: 12.5, color: 'var(--ink-2)', marginTop: 2 }}>{a.target}</div>
                </div>
                <div style={{ textAlign: 'right', flexShrink: 0 }}>
                  <span className={'badge ' + D.roleInfo[a.role].badge} style={{ fontSize: 10.5 }}>{D.roleInfo[a.role].label}</span>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 4, whiteSpace: 'nowrap' }}>{a.time}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="callout info" style={{ marginTop: 16 }}><Icon name="lock" className="ic" /><div>Audit Log ไม่สามารถแก้ไขหรือลบได้ และเก็บไว้อย่างน้อย 5 ปีตามข้อกำหนดทางบัญชี</div></div>
    </>
  );
}

window.UsersPage = UsersPage;
window.SettingsPage = SettingsPage;
window.AuditPage = AuditPage;