/* global React, window */
const { useState: useExpState, useEffect: useExpEffect } = React;

// category (stored as Thai text) → chip color. Also the ordered list for the modal select.
const EXP_CATEGORIES = ['เดินทาง', 'อาหาร', 'อุปกรณ์', 'ที่พัก', 'อื่นๆ'];
const EXP_CAT_META = {
  'เดินทาง': { chip: 'c-blue' },
  'อาหาร':   { chip: 'c-amber' },
  'อุปกรณ์':  { chip: 'c-violet' },
  'ที่พัก':    { chip: 'c-green' },
  'อื่นๆ':     { chip: 'c-gray' },
};
const EXP_STATUS = {
  pending:  { label: 'รออนุมัติ', chip: 'c-amber' },
  approved: { label: 'อนุมัติ',    chip: 'c-green' },
  rejected: { label: 'ปฏิเสธ',     chip: 'c-gray' },
};
function expBaht(n) {
  const v = Number(n) || 0;
  return v.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

// Circular face avatar (clickable → profile).
function ExpAvatar({ id, size = 44 }) {
  const [err, setErr] = useExpState(false);
  const src = (err || !id) ? '/img/avatar-person.svg' : `/faces/${id}.jpg`;
  return <img src={src} alt="" onError={() => setErr(true)}
    onClick={() => id && window.openProfile && window.openProfile(id)} title={id ? 'ดูโปรไฟล์' : ''}
    style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flex: 'none',
      cursor: id ? 'pointer' : 'default', border: '1px solid var(--line)' }} />;
}

// ค่าใช้จ่าย & เบิกเงิน — submit + approve. HR/admin/manager can approve; everyone can submit.
function ExpensePage({ role }) {
  const [list, setList] = useExpState([]);
  const [summary, setSummary] = useExpState({ pending_count: 0, pending_amount: 0, approved_amount_month: 0 });
  const [statusFilter, setStatusFilter] = useExpState('all');
  const [loading, setLoading] = useExpState(true);
  const [submitting, setSubmitting] = useExpState(false);
  const canApprove = role === 'admin' || role === 'hr' || role === 'manager';

  const load = async () => {
    setLoading(true);
    const q = statusFilter === 'all' ? '' : `?status=${statusFilter}`;
    try {
      const r = await fetch('/api/expenses' + q, { credentials: 'include' });
      if (r.ok) setList(await r.json());
    } finally { setLoading(false); }
  };
  const loadSummary = async () => {
    const r = await fetch('/api/expenses/summary', { credentials: 'include' });
    if (r.ok) setSummary(await r.json());
  };
  useExpEffect(() => { load(); }, [statusFilter]);
  useExpEffect(() => { loadSummary(); }, []);

  const refetch = () => { load(); loadSummary(); };

  const approve = async (id) => {
    await fetch(`/api/expenses/${id}/approve`, { method: 'PUT', credentials: 'include' });
    window.appToast && window.appToast('อนุมัติแล้ว', { tone: 'success' }); refetch();
  };
  const reject = async (id) => {
    const reason = await window.appPrompt({ title: 'เหตุผลที่ไม่อนุมัติ', placeholder: 'ระบุเหตุผล (ไม่บังคับ)' });
    if (reason === null) return;
    await fetch(`/api/expenses/${id}/reject`, { method: 'PUT', credentials: 'include',
      headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ reason }) });
    window.appToast && window.appToast('ปฏิเสธแล้ว', { tone: 'info' }); refetch();
  };

  const stats = [
    ['รออนุมัติ', String(summary.pending_count || 0), 'รายการ', 'var(--yellow-ink)'],
    ['ยอดรออนุมัติ', '฿' + expBaht(summary.pending_amount), '', 'var(--coral-ink)'],
    ['อนุมัติเดือนนี้', '฿' + expBaht(summary.approved_amount_month), '', 'var(--mint)'],
  ];

  return (
    <div data-screen-label="Expenses">
      <div style={{ marginBottom: 16 }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, margin: 0 }}>ค่าใช้จ่าย &amp; เบิกเงิน / Expenses</h1>
        <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginTop: 4 }}>ยื่นเบิกค่าใช้จ่าย · อนุมัติ · ยอดรออนุมัติ</div>
      </div>

      {/* stat pills */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, marginBottom: 16 }}>
        {stats.map(([k, v, unit, c]) => (
          <div key={k} className="gv-card" style={{ padding: '16px 20px', boxShadow: 'var(--shadow-sm)', display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
            <div className="tnum" style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, lineHeight: 1, color: c }}>{v}</div>
            {unit ? <div style={{ fontSize: 12.5, color: 'var(--ink-5)' }}>{unit}</div> : null}
            <div style={{ fontSize: 13, color: 'var(--ink-4)', fontWeight: 500, width: '100%' }}>{k}</div>
          </div>
        ))}
      </div>

      {/* expense list */}
      <div className="gv-card">
        <div className="gv-card-h" style={{ flexWrap: 'wrap', gap: 10 }}>
          <b>รายการเบิกค่าใช้จ่าย</b>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <div className="gv-seg">
              {['all', 'pending', 'approved', 'rejected'].map((s) => (
                <button key={s} className={statusFilter === s ? 'on' : ''} onClick={() => setStatusFilter(s)}>{s === 'all' ? 'ทั้งหมด' : EXP_STATUS[s].label}</button>
              ))}
            </div>
            <button className="gv-btn ok sm" onClick={() => setSubmitting(true)}>＋ เบิกค่าใช้จ่าย</button>
          </div>
        </div>
        <div className="gv-card-b" style={{ overflowX: 'auto' }}>
          {loading ? <div className="gv-empty">กำลังโหลด…</div>
            : list.length === 0 ? <div className="gv-empty">— ไม่มีรายการเบิกค่าใช้จ่าย —</div>
            : (
              <table className="gv-tbl" style={{ width: '100%', minWidth: 760 }}>
                <thead>
                  <tr>
                    <th>พนักงาน</th>
                    <th>วันที่</th>
                    <th>หมวด</th>
                    <th>รายการ</th>
                    <th style={{ textAlign: 'right' }}>จำนวนเงิน</th>
                    <th>สถานะ</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {list.map((x) => {
                    const cat = EXP_CAT_META[x.category] || EXP_CAT_META['อื่นๆ'];
                    const st = EXP_STATUS[x.status] || EXP_STATUS.pending;
                    return (
                      <tr key={x.id}>
                        <td>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                            <ExpAvatar id={x.employee_id} size={38} />
                            <div style={{ minWidth: 0 }}>
                              <div style={{ fontSize: 14, fontWeight: 600 }}>{`${x.first_name || ''} ${x.last_name || ''}`.trim() || x.employee_id}</div>
                              <div style={{ fontSize: 11.5, color: 'var(--ink-4)', marginTop: 2 }}>{x.employee_id}{x.department_name ? ` · ${x.department_name}` : ''}</div>
                            </div>
                          </div>
                        </td>
                        <td style={{ fontSize: 13, color: 'var(--ink-4)', whiteSpace: 'nowrap' }}>{x.date}</td>
                        <td><span className={`gv-chip ${cat.chip}`}>{x.category || 'อื่นๆ'}</span></td>
                        <td style={{ fontSize: 13.5 }}>
                          {x.title || '—'}
                          {x.note ? <div style={{ fontSize: 11.5, color: 'var(--ink-4)', marginTop: 2 }}>{x.note}</div> : null}
                          {x.status === 'rejected' && x.reject_reason ? <div style={{ fontSize: 11.5, color: 'var(--coral-ink)', marginTop: 2 }}>เหตุผล: {x.reject_reason}</div> : null}
                        </td>
                        <td className="tnum" style={{ textAlign: 'right', whiteSpace: 'nowrap', fontWeight: 600 }}>฿{expBaht(x.amount)}</td>
                        <td><span className={`gv-chip ${st.chip}`}>{st.label}</span></td>
                        <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                          {canApprove && x.status === 'pending' ? (
                            <div style={{ display: 'inline-flex', gap: 6 }}>
                              <button className="gv-btn no sm" onClick={() => reject(x.id)}>ปฏิเสธ</button>
                              <button className="gv-btn ok sm" onClick={() => approve(x.id)}>อนุมัติ</button>
                            </div>
                          ) : null}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
        </div>
      </div>

      {submitting && <ExpenseModal onClose={() => setSubmitting(false)} onSaved={() => { setSubmitting(false); refetch(); }}/>}
    </div>
  );
}

function ExpenseModal({ onClose, onSaved }) {
  const [empId, setEmpId] = useExpState((window.CURRENT_USER && window.CURRENT_USER.employee_id) || '');
  const [date, setDate] = useExpState(window.TODAY || new Date().toISOString().slice(0, 10));
  const [category, setCategory] = useExpState(EXP_CATEGORIES[0]);
  const [title, setTitle] = useExpState('');
  const [amount, setAmount] = useExpState('');
  const [note, setNote] = useExpState('');
  const [busy, setBusy] = useExpState(false);
  const [err, setErr] = useExpState('');

  const save = async () => {
    if (!empId) { setErr('กรุณาเลือกพนักงาน'); return; }
    if (!title.trim()) { setErr('กรุณาระบุรายการ'); return; }
    const amt = Number(amount);
    if (!(amt > 0)) { setErr('กรุณาระบุจำนวนเงินที่ถูกต้อง'); return; }
    setBusy(true); setErr('');
    try {
      const r = await fetch('/api/expenses', { method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ employee_id: empId, date, category, title: title.trim(), amount: amt, note: note.trim() }) });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(d.error || `error ${r.status}`);
      window.appToast && window.appToast('ยื่นเบิกค่าใช้จ่ายแล้ว', { tone: 'success' });
      onSaved();
    } catch (e) { setErr(e.message); } finally { setBusy(false); }
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(15,23,42,.45)', display: 'grid', placeItems: 'center', padding: 20 }}>
      <div className="gv-card" onClick={(e) => e.stopPropagation()} style={{ width: 'min(500px,100%)', maxHeight: '90vh', overflow: 'auto' }}>
        <div className="gv-card-h"><b>เบิกค่าใช้จ่าย</b></div>
        <div className="gv-card-b" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="gv-field">
            <label>พนักงาน *</label>
            <select className="gv-select" value={empId} onChange={(e) => setEmpId(e.target.value)}>
              <option value="">— เลือกพนักงาน —</option>
              {(window.EMPLOYEES || []).map((e) => <option key={e.id} value={e.id}>{e.first_name} {e.last_name} ({e.id})</option>)}
            </select>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <div className="gv-field" style={{ flex: 1, marginBottom: 0 }}>
              <label>วันที่</label>
              <input className="gv-input" type="date" value={date} onChange={(e) => setDate(e.target.value)}/>
            </div>
            <div className="gv-field" style={{ flex: 1, marginBottom: 0 }}>
              <label>หมวด</label>
              <select className="gv-select" value={category} onChange={(e) => setCategory(e.target.value)}>
                {EXP_CATEGORIES.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
          </div>
          <div className="gv-field">
            <label>รายการ *</label>
            <input className="gv-input" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="เช่น ค่าแท็กซี่ไปประชุม"/>
          </div>
          <div className="gv-field">
            <label>จำนวนเงิน (฿) *</label>
            <input className="gv-input" type="number" min="0" step="0.01" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="0.00"/>
          </div>
          <div className="gv-field">
            <label>หมายเหตุ</label>
            <input className="gv-input" value={note} onChange={(e) => setNote(e.target.value)} placeholder="(ไม่บังคับ)"/>
          </div>
          {err && <div style={{ padding: '10px 14px', borderRadius: 10, background: 'var(--coral-soft)', color: 'var(--coral-ink)', fontSize: 12.5, fontWeight: 600 }}>{err}</div>}
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 4 }}>
            <button className="gv-btn no" onClick={onClose} disabled={busy}>ยกเลิก</button>
            <button className="gv-btn ok" onClick={save} disabled={busy}>{busy ? 'กำลังส่ง…' : 'ยื่นเบิก'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ExpensePage = ExpensePage;