// Marketing OS — Expense Entry Form & Expense List

function ExpenseForm({ currentUser, onSubmit, onCancel, prefill }) {
  const selectableSiens = window.visibleUsersFor(currentUser).filter(u => u.role === 'staff' || u.role === 'sub_lead');
  const isStaff = currentUser.role === 'staff';
  const today = new Date('2026-05-20').toISOString().slice(0,10);

  const [form, setForm] = React.useState({
    userId:   prefill?.userId   || (isStaff ? currentUser.id : ''),
    date:     prefill?.date     || today,
    item:     prefill?.item     || '',
    category: prefill?.category || '',
    amount: {
      amount:     prefill?.amount   ?? '',
      currency:   prefill?.currency || 'THB',
      customCode: prefill?.customCode || '',
      customRate: prefill?.customRate || '',
    },
  });
  const [errors, setErrors] = React.useState({});
  const [showError, setShowError] = React.useState(false);

  const update = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(e => { const n = {...e}; delete n[k]; return n; });
  };

  function validate() {
    const e = {};
    if (!form.userId)   e.userId = 'กรุณาเลือกเซียน';
    if (!form.date)     e.date = 'กรุณาเลือกวันที่';
    if (!form.item || !form.item.trim()) e.item = 'กรุณากรอกชื่อรายการ';
    if (!form.category) e.category = 'กรุณาเลือกประเภท';
    if (form.amount.amount === '' || isNaN(+form.amount.amount)) e.amount = 'กรุณากรอกจำนวน';
    else if (form.amount.currency === 'OTHER' && (!form.amount.customCode || !form.amount.customRate))
      e.amount = 'ระบุรหัสสกุลเงินและอัตราแลก';
    return e;
  }

  function calcTHB(m) {
    if (m.currency === 'OTHER') return (+m.amount || 0) * (+m.customRate || 0);
    const c = window.CURRENCIES.find(c => c.code === m.currency);
    return (+m.amount || 0) * (c?.rate || 1);
  }

  function handleSubmit(ev) {
    ev?.preventDefault?.();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length > 0) {
      setShowError(true);
      setTimeout(() => {
        const el = document.querySelector('.invalid');
        if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
      }, 50);
      return;
    }
    setShowError(false);
    const thb = calcTHB(form.amount);
    const u = window.getUser(form.userId);
    onSubmit({
      id: prefill?.id || 'X' + Date.now(),
      userId: form.userId,
      userName: u.name,
      teamId: u.teamId,
      subteamId: u.subteamId,
      date: form.date,
      item: form.item.trim(),
      category: form.category,
      amount: +form.amount.amount,
      currency: form.amount.currency,
      customCode: form.amount.customCode,
      customRate: form.amount.customRate ? +form.amount.customRate : null,
      amountTHB: Math.round(thb),
      createdAt: new Date().toISOString(),
    });
  }

  const errorCount = Object.keys(errors).length;
  const invalidCls = (k) => errors[k] ? 'invalid' : '';

  return (
    <form className="card" onSubmit={handleSubmit} noValidate>
      <div className="card-header" style={{justifyContent:'space-between'}}>
        <div className="row" style={{gap: 12}}>
          <div style={{width:34, height:34, borderRadius:8, background:'var(--gold-tint)', display:'grid', placeItems:'center', color:'var(--gold)'}}>
            <Icon name="money" size={16}/>
          </div>
          <div>
            <div className="card-title">บันทึกค่าใช้จ่าย</div>
            <div className="card-sub">บันทึกค่าใช้จ่ายอื่นๆ ที่ไม่ใช่ค่าแอด — เช่น อุปกรณ์ ค่าจ้าง ค่าเดินทาง</div>
          </div>
        </div>
        {errorCount > 0 && <span className="badge" style={{background:'var(--danger-soft)', color:'var(--danger)'}}>
          <Icon name="alert" size={11}/> ขาด {errorCount} ช่อง
        </span>}
      </div>

      {showError && errorCount > 0 && (
        <div style={{padding:'12px 22px', background:'var(--danger-soft)', borderBottom:'1px solid var(--line)', color:'var(--danger)', fontSize:13, display:'flex', alignItems:'center', gap:10}}>
          <Icon name="alert" size={15}/>
          <strong>กรอกข้อมูลไม่ครบ</strong>
          <span style={{opacity:0.8}}>— กรุณาตรวจสอบช่องที่มีกรอบสีแดงด้านล่าง</span>
        </div>
      )}

      <div className="card-pad-lg">
        <div className="form-grid">
          <div className="field field-col-6">
            <label className="label">ชื่อเซียน <span className="req">*</span></label>
            <SeianCombobox
              users={selectableSiens}
              value={form.userId}
              onChange={(v) => update('userId', v)}
              disabled={isStaff}
              invalid={!!errors.userId}
            />
            {errors.userId && <div className="error-text"><Icon name="alert" size={11}/> {errors.userId}</div>}
          </div>

          <div className="field field-col-3">
            <label className="label">วันที่ <span className="req">*</span></label>
            <input type="date" className={`input ${invalidCls('date')}`} value={form.date} onChange={e => update('date', e.target.value)} max="2026-05-20"/>
            {errors.date && <div className="error-text"><Icon name="alert" size={11}/> {errors.date}</div>}
          </div>

          <div className="field field-col-3">
            <label className="label">ประเภท <span className="req">*</span></label>
            <select className={`select ${invalidCls('category')}`} value={form.category} onChange={e => update('category', e.target.value)}>
              <option value="">— เลือกประเภท —</option>
              {window.EXPENSE_CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}
            </select>
            {errors.category && <div className="error-text"><Icon name="alert" size={11}/> {errors.category}</div>}
          </div>

          <div className="field field-col-6">
            <label className="label">รายการ <span className="req">*</span></label>
            <input
              type="text"
              className={`input ${invalidCls('item')}`}
              placeholder="เช่น ค่าจ้างไลฟ์เซอร์ A, ไมค์ Rode, License Adobe"
              value={form.item}
              onChange={e => update('item', e.target.value)}
            />
            {errors.item && <div className="error-text"><Icon name="alert" size={11}/> {errors.item}</div>}
            <div className="hint">รายการเดียวกันจะถูกรวมยอดในตารางสรุปอัตโนมัติ</div>
          </div>

          <div className="field field-col-6">
            <label className="label">จำนวนยอด <span className="req">*</span></label>
            <CurrencyInput value={form.amount} onChange={v => update('amount', v)} invalid={!!errors.amount}/>
            {errors.amount && <div className="error-text"><Icon name="alert" size={11}/> {errors.amount}</div>}
          </div>
        </div>
      </div>

      <div className="card-header" style={{borderTop:'1px solid var(--line)', borderBottom:'none', justifyContent:'space-between', background:'var(--bg-sunken)', borderRadius:'0 0 14px 14px'}}>
        <div className="row" style={{gap:8}}>
          <button type="button" className="btn btn-secondary btn-sm">
            <Icon name="upload" size={12}/> Import ข้อมูล
          </button>
          <span className="hint" style={{alignSelf:'center'}}>รองรับ CSV / Google Sheets / Bot Sync (ในอนาคต)</span>
        </div>
        <div className="row" style={{gap:8}}>
          <button type="button" className="btn btn-secondary btn-sm" onClick={onCancel}>ยกเลิก</button>
          <button type="submit" className="btn btn-primary">
            <Icon name="check" size={14}/> บันทึกค่าใช้จ่าย
          </button>
        </div>
      </div>
    </form>
  );
}


function ExpensesView({ currentUser, expenses, onCreate, onImport }) {
  const [filter, setFilter] = React.useState({ q: '', range: '30', category: '', user: '' });
  const visUsers = window.visibleUsersFor(currentUser);

  const filtered = useMemo(() => {
    let l = expenses;
    const r = window.dateRangeFor ? window.dateRangeFor(filter.range) : null;
    if (r) l = l.filter(e => e.date >= r[0] && e.date <= r[1]);
    if (filter.category) l = l.filter(e => e.category === filter.category);
    if (filter.user)     l = l.filter(e => e.userId === filter.user);
    if (filter.q) {
      const q = filter.q.toLowerCase();
      l = l.filter(e => (e.item || '').toLowerCase().includes(q) || (e.userName||'').toLowerCase().includes(q));
    }
    return l;
  }, [expenses, filter]);

  const total = filtered.reduce((s,e) => s + e.amountTHB, 0);

  return (
    <div>
      <div className="page-head">
        <div className="page-title-block">
          <div className="page-title">ค่าใช้จ่าย</div>
          <div className="page-desc">{filtered.length} รายการ · รวม {window.fmtTHB(total)}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm" onClick={onImport}>
            <Icon name="upload" size={12}/> Import จาก Sheet / Bot
          </button>
          <button className="btn btn-primary btn-sm" onClick={onCreate}>
            <Icon name="plus" size={12}/> เพิ่มค่าใช้จ่าย
          </button>
        </div>
      </div>

      <div className="filter-bar">
        <div className="search-box">
          <span className="icon"><Icon name="search" size={14}/></span>
          <input className="input" placeholder="ค้นหารายการ, เซียน..." value={filter.q} onChange={e => setFilter(f => ({...f, q:e.target.value}))}/>
        </div>
        <select className="select" value={filter.range} onChange={e => setFilter(f => ({...f, range: e.target.value}))}>
          <optgroup label="รายวัน">
            <option value="today">วันนี้</option>
            <option value="yesterday">เมื่อวาน</option>
            <option value="7">7 วัน</option>
            <option value="14">14 วัน</option>
            <option value="30">30 วัน</option>
          </optgroup>
          <optgroup label="รายเดือน">
            <option value="this_month">เดือนนี้</option>
            <option value="last_month">เดือนก่อน</option>
            <option value="90">3 เดือน</option>
            <option value="180">6 เดือน</option>
            <option value="365">12 เดือน</option>
          </optgroup>
          <option value="all">ทั้งหมด</option>
        </select>
        <select className="select" value={filter.category} onChange={e => setFilter(f => ({...f, category: e.target.value}))}>
          <option value="">ทุกประเภท</option>
          {window.EXPENSE_CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}
        </select>
        {currentUser.role !== 'staff' && (
          <select className="select" value={filter.user} onChange={e => setFilter(f => ({...f, user: e.target.value}))}>
            <option value="">ทุกเซียน</option>
            {visUsers.filter(u => u.role === 'staff' || u.role === 'sub_lead').map(u => (
              <option key={u.id} value={u.id}>{u.name.replace(/^คุณ/,'')}</option>
            ))}
          </select>
        )}
        <div style={{flex:1}}/>
        <button className="btn btn-secondary btn-sm"><Icon name="download" size={12}/> Export</button>
      </div>

      <div className="table-wrap">
        <table className="table">
          <thead>
            <tr>
              <th>วันที่</th>
              <th>เซียน</th>
              <th>ประเภท</th>
              <th>รายการ</th>
              <th className="right">จำนวน</th>
              <th className="right">ยอด (THB)</th>
              <th style={{width:60}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(e => {
              const cat = window.EXPENSE_CATEGORIES.find(c => c.id === e.category);
              return (
                <tr key={e.id}>
                  <td>{e.date}</td>
                  <td>
                    <div className="row" style={{gap:8}}>
                      <div className="avatar" style={{width:24, height:24, fontSize:9}}>{window.initials(e.userName)}</div>
                      <span>{e.userName.replace(/^คุณ/,'')}</span>
                    </div>
                  </td>
                  <td><span className="badge outline">{cat?.label || e.category}</span></td>
                  <td style={{color:'var(--ink)', fontWeight:500}}>{e.item}</td>
                  <td className="num right">
                    {window.fmtNum(e.amount)} <span style={{color:'var(--ink-3)'}}>{e.currency === 'OTHER' ? e.customCode : e.currency}</span>
                  </td>
                  <td className="num right" style={{fontWeight:500, color:'var(--ink)'}}>{window.fmtTHB(e.amountTHB)}</td>
                  <td>
                    <button className="btn btn-ghost btn-sm"><Icon name="edit" size={12}/></button>
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && (
              <tr><td colSpan="7" style={{padding:40, textAlign:'center', color:'var(--ink-3)'}}>ยังไม่มีรายการค่าใช้จ่ายในช่วงนี้</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}


function ImportExpenseModal({ onClose, onImport }) {
  const [src, setSrc] = React.useState('sheet');
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth: 540}}>
        <div className="modal-head row between">
          <div className="modal-title">Import ค่าใช้จ่าย</div>
          <button className="btn btn-ghost btn-sm" onClick={onClose}><Icon name="x" size={14}/></button>
        </div>
        <div className="modal-body">
          <div className="col" style={{gap: 14}}>
            <div className="hint">เลือกแหล่งข้อมูล — ระบบจะดึงรายการเข้าสู่ตารางค่าใช้จ่ายแบบเรียลไทม์</div>

            <div className="col" style={{gap: 8}}>
              <label className="row" style={{gap: 10, padding: 12, border: `1px solid ${src === 'sheet' ? 'var(--ink)' : 'var(--line-2)'}`, borderRadius: 10, cursor:'pointer'}}>
                <input type="radio" name="src" checked={src === 'sheet'} onChange={() => setSrc('sheet')}/>
                <div>
                  <div style={{fontWeight: 500, color:'var(--ink)'}}>Google Sheets (Bot Sync)</div>
                  <div style={{fontSize:12, color:'var(--ink-3)'}}>ดึงจากชีตที่บอทเก็บข้อมูลไว้ · อัปเดตทุก 1 ชม.</div>
                </div>
              </label>
              <label className="row" style={{gap: 10, padding: 12, border: `1px solid ${src === 'csv' ? 'var(--ink)' : 'var(--line-2)'}`, borderRadius: 10, cursor:'pointer'}}>
                <input type="radio" name="src" checked={src === 'csv'} onChange={() => setSrc('csv')}/>
                <div>
                  <div style={{fontWeight: 500, color:'var(--ink)'}}>อัปโหลด CSV / Excel</div>
                  <div style={{fontSize:12, color:'var(--ink-3)'}}>ไฟล์ต้องมีคอลัมน์: วันที่, เซียน, รายการ, ประเภท, จำนวน, สกุลเงิน</div>
                </div>
              </label>
              <label className="row" style={{gap: 10, padding: 12, border: `1px solid ${src === 'db' ? 'var(--ink)' : 'var(--line-2)'}`, borderRadius: 10, cursor:'pointer'}}>
                <input type="radio" name="src" checked={src === 'db'} onChange={() => setSrc('db')}/>
                <div>
                  <div style={{fontWeight: 500, color:'var(--ink)'}}>Database โดยตรง</div>
                  <div style={{fontSize:12, color:'var(--ink-3)'}}>เชื่อม PostgreSQL / MySQL ภายในองค์กร (สำหรับอนาคต)</div>
                </div>
              </label>
            </div>

            {src === 'sheet' && (
              <input className="input" placeholder="วาง Google Sheets URL ที่นี่..."/>
            )}
            {src === 'csv' && (
              <div style={{
                border:'1.5px dashed var(--line-2)', borderRadius:10, padding: 24, textAlign:'center',
                background: 'var(--bg-sunken)', color: 'var(--ink-3)'
              }}>
                <Icon name="upload" size={22} style={{color:'var(--ink-4)'}}/>
                <div style={{marginTop:8, fontSize:13}}>ลากไฟล์ CSV/XLSX มาวาง หรือคลิกเพื่อเลือกไฟล์</div>
              </div>
            )}
            {src === 'db' && (
              <div className="hint" style={{padding:12, background:'var(--bg-sunken)', borderRadius:8}}>
                ฟีเจอร์นี้จะเปิดใช้งานเมื่อตั้งค่า Database connection ในหน้า "ตั้งค่าระบบ"
              </div>
            )}
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn btn-secondary btn-sm" onClick={onClose}>ยกเลิก</button>
          <button className="btn btn-primary btn-sm" onClick={() => { onImport?.(src); onClose(); }}>
            <Icon name="download" size={12}/> เริ่ม Import
          </button>
        </div>
      </div>
    </div>
  );
}

window.ExpenseForm = ExpenseForm;
window.ExpensesView = ExpensesView;
window.ImportExpenseModal = ImportExpenseModal;