// TTG Petty Cash — Forms & Detail screens
const {
  React, useState, useEffect, useMemo, useRef, useCallback,
  fmtMoney, fmtDate, fmtDateTime, todayISO, addDays, sumItems, sumActual,
  DEPARTMENTS, USERS, ROLE_META, STATUS_META, statusBadge, Icon,
  LineItemsRequest, LineItemsClearing, Receipts, ApprovalTimeline, Empty,
} = window;

// ============== NEW REQUEST FORM ==============
function NewRequestForm({ user, onSubmit, onCancel, prefill }) {
  const [form, setForm] = useState(prefill || {
    purpose: '',
    dept: user.dept,
    startDate: addDays(todayISO(), 3),
    dueDate: addDays(todayISO(), 14),
    paymentMethod: 'transfer',
    bankAccount: '',
    items: [{ desc: '', amount: '' }],
  });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});

  const total = useMemo(() => sumItems(form.items), [form.items]);

  const validate = (f) => {
    const e = {};
    if (!f.purpose.trim()) e.purpose = 'กรุณาระบุเหตุผลในการขอเบิก';
    else if (f.purpose.length < 20) e.purpose = 'ระบุรายละเอียดอย่างน้อย 20 ตัวอักษร';
    if (!f.startDate) e.startDate = 'กรุณาเลือกวันที่เริ่มใช้เงิน';
    if (!f.dueDate) e.dueDate = 'กรุณาเลือกวันครบกำหนดคืน';
    if (f.startDate && f.dueDate && new Date(f.dueDate) < new Date(f.startDate)) e.dueDate = 'วันครบกำหนดต้องหลังวันเริ่มใช้เงิน';
    const validItems = f.items.filter(i => i.desc && Number(i.amount) > 0);
    if (validItems.length === 0) e.items = 'กรุณาเพิ่มรายการที่ขอเบิกอย่างน้อย 1 รายการ';
    if (f.paymentMethod === 'transfer' && !f.bankAccount.trim()) e.bankAccount = 'กรุณาระบุเลขที่บัญชี';
    return e;
  };

  useEffect(() => {
    if (Object.keys(touched).length > 0) setErrors(validate(form));
  }, [form]);

  const submit = (asDraft = false) => {
    const e = asDraft ? {} : validate(form);
    setErrors(e);
    setTouched({ purpose: 1, items: 1, startDate: 1, dueDate: 1, bankAccount: 1 });
    if (Object.keys(e).length === 0) {
      onSubmit({ ...form, status: asDraft ? 'draft' : 'pending_mgr' });
    }
  };

  const dept = DEPARTMENTS.find(d => d.code === form.dept);

  return (
    <div>
      <div className="content__head">
        <button className="btn btn--ghost btn--sm" onClick={onCancel} style={{marginRight: 8}}>
          <Icon name="arrowLeft" size={14}/> กลับ
        </button>
        <div>
          <h1>สร้างคำขอเบิกเงินทดรองจ่าย</h1>
          <p>กรอกข้อมูลให้ครบถ้วนเพื่อส่งคำขอเข้าสู่ขั้นตอนอนุมัติ</p>
        </div>
      </div>

      <div className="split split--wide">
        <div className="col">
          <div className="card">
            <div className="card__head">
              <div style={{width: 32, height: 32, borderRadius: 8, background: 'var(--info-soft)', color: 'var(--navy)', display: 'grid', placeItems: 'center'}}>
                <Icon name="user" size={16}/>
              </div>
              <h3>ข้อมูลผู้ขอเบิก</h3>
            </div>
            <div className="card__body">
              <div className="form-grid">
                <div className="field">
                  <label className="field__label">ชื่อผู้ขอเบิกเงินทดรองจ่าย</label>
                  <input className="input" value={user.name} readOnly/>
                </div>
                <div className="field">
                  <label className="field__label">ตำแหน่ง</label>
                  <input className="input" value={user.position} readOnly/>
                </div>
                <div className="field">
                  <label className="field__label">ฝ่าย/แผนกที่ขอเบิก <span className="req">*</span></label>
                  <select className="select" value={form.dept} onChange={e => setForm({...form, dept: e.target.value})}>
                    {DEPARTMENTS.map(d => <option key={d.code} value={d.code}>{d.name}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label className="field__label">รหัสฝ่าย/แผนก</label>
                  <input className="input" value={form.dept} readOnly/>
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <div style={{width: 32, height: 32, borderRadius: 8, background: 'var(--orange-soft)', color: 'var(--orange)', display: 'grid', placeItems: 'center'}}>
                <Icon name="fileText" size={16}/>
              </div>
              <h3>รายละเอียดการเบิก</h3>
            </div>
            <div className="card__body">
              <div className="form-grid">
                <div className="field field--full">
                  <label className="field__label">เหตุผลในการขอเบิกเงินทดรองจ่าย <span className="req">*</span></label>
                  <textarea
                    className={`textarea ${errors.purpose && touched.purpose ? 'error' : ''}`}
                    placeholder="อธิบายวัตถุประสงค์ของการขอเบิก เช่น การจัดกิจกรรม การเดินทาง ฯลฯ"
                    value={form.purpose}
                    onChange={e => setForm({...form, purpose: e.target.value})}
                    onBlur={() => setTouched({...touched, purpose: 1})}
                    rows={3}
                  />
                  {errors.purpose && touched.purpose ? (
                    <div className="field__error"><Icon name="alert" size={12}/> {errors.purpose}</div>
                  ) : (
                    <div className="field__hint">{form.purpose.length}/500 ตัวอักษร</div>
                  )}
                </div>
                <div className="field">
                  <label className="field__label">วันที่เริ่มใช้เงินทดรอง <span className="req">*</span></label>
                  <input
                    type="date"
                    className={`input ${errors.startDate && touched.startDate ? 'error' : ''}`}
                    value={form.startDate}
                    onChange={e => setForm({...form, startDate: e.target.value})}
                    onBlur={() => setTouched({...touched, startDate: 1})}
                  />
                  {errors.startDate && touched.startDate && <div className="field__error"><Icon name="alert" size={12}/> {errors.startDate}</div>}
                </div>
                <div className="field">
                  <label className="field__label">วันครบกำหนดคืนเงินทดรอง <span className="req">*</span></label>
                  <input
                    type="date"
                    className={`input ${errors.dueDate && touched.dueDate ? 'error' : ''}`}
                    value={form.dueDate}
                    onChange={e => setForm({...form, dueDate: e.target.value})}
                    onBlur={() => setTouched({...touched, dueDate: 1})}
                  />
                  {errors.dueDate && touched.dueDate ? (
                    <div className="field__error"><Icon name="alert" size={12}/> {errors.dueDate}</div>
                  ) : (
                    <div className="field__hint">ต้องเคลียร์ภายใน 14 วันหลังเสร็จกิจกรรม</div>
                  )}
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <div style={{width: 32, height: 32, borderRadius: 8, background: 'var(--gold-soft)', color: '#806A2B', display: 'grid', placeItems: 'center'}}>
                <Icon name="list" size={16}/>
              </div>
              <h3>รายการเบิกเงินทดรองจ่าย</h3>
              <div className="card__head__actions">
                <span style={{fontSize: 12, color: 'var(--text-muted)'}}>{form.items.length} รายการ</span>
              </div>
            </div>
            <div className="card__body">
              <LineItemsRequest items={form.items} onChange={items => setForm({...form, items})}/>
              {errors.items && touched.items && <div className="field__error" style={{marginTop: 10}}><Icon name="alert" size={12}/> {errors.items}</div>}
            </div>
            <div className="card__foot">
              <div className="totals" style={{flex: 1, background: 'transparent', padding: 0}}>
                <div className="totals__row major">
                  <span>จำนวนเงินรวมที่ขอเบิกเงินทดรองจ่าย</span>
                  <span className="v">฿ {fmtMoney(total)}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <div style={{width: 32, height: 32, borderRadius: 8, background: 'var(--info-soft)', color: 'var(--navy)', display: 'grid', placeItems: 'center'}}>
                <Icon name="wallet" size={16}/>
              </div>
              <h3>วิธีการรับเงิน</h3>
            </div>
            <div className="card__body">
              <div className="form-grid">
                <div className="field">
                  <label className="field__label">ช่องทางรับเงิน</label>
                  <div style={{display: 'flex', gap: 8}}>
                    {[
                      { v: 'transfer', l: 'โอนเข้าบัญชี', i: 'send' },
                      { v: 'cash', l: 'รับเงินสด', i: 'wallet' },
                    ].map(o => (
                      <label key={o.v} style={{
                        flex: 1, padding: '10px 12px', borderRadius: 8,
                        border: `1.5px solid ${form.paymentMethod === o.v ? 'var(--navy)' : 'var(--border)'}`,
                        background: form.paymentMethod === o.v ? 'var(--info-soft)' : 'white',
                        cursor: 'pointer', display: 'flex', gap: 10, alignItems: 'center'
                      }}>
                        <input type="radio" name="pm" value={o.v} checked={form.paymentMethod === o.v} onChange={e => setForm({...form, paymentMethod: e.target.value})} style={{accentColor: 'var(--navy)'}}/>
                        <Icon name={o.i} size={15}/>
                        <span style={{fontSize: 13, fontWeight: 500}}>{o.l}</span>
                      </label>
                    ))}
                  </div>
                </div>
                {form.paymentMethod === 'transfer' && (
                  <div className="field">
                    <label className="field__label">เลขที่บัญชี (ของผู้ขอเบิก) <span className="req">*</span></label>
                    <input
                      className={`input ${errors.bankAccount && touched.bankAccount ? 'error' : ''}`}
                      placeholder="เช่น ธ.กสิกรไทย 123-4-56789-0"
                      value={form.bankAccount}
                      onChange={e => setForm({...form, bankAccount: e.target.value})}
                      onBlur={() => setTouched({...touched, bankAccount: 1})}
                    />
                    {errors.bankAccount && touched.bankAccount && <div className="field__error"><Icon name="alert" size={12}/> {errors.bankAccount}</div>}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Side: Summary & Approval flow */}
        <div className="col" style={{position: 'sticky', top: 0}}>
          <div className="card">
            <div className="card__head"><h3>สรุปคำขอ</h3></div>
            <div className="card__body" style={{padding: 0}}>
              <div className="totals" style={{borderRadius: 0, background: 'transparent', padding: '4px 18px 14px'}}>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>ผู้ขอเบิก</span>
                  <span className="v" style={{fontWeight: 500}}>{user.name}</span>
                </div>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>ฝ่าย</span>
                  <span className="v" style={{fontWeight: 500, fontSize: 12.5, textAlign: 'right'}}>{dept?.name}</span>
                </div>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>จำนวนรายการ</span>
                  <span className="v">{form.items.filter(i=>i.desc&&Number(i.amount)>0).length}</span>
                </div>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>วันใช้เงิน</span>
                  <span className="v" style={{fontWeight: 500}}>{fmtDate(form.startDate)}</span>
                </div>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>ครบกำหนดเคลียร์</span>
                  <span className="v" style={{fontWeight: 500}}>{fmtDate(form.dueDate)}</span>
                </div>
                <div className="totals__row major">
                  <span>ยอดเบิก</span>
                  <span className="v">฿ {fmtMoney(total)}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__head"><h3>ขั้นตอนอนุมัติ</h3></div>
            <div className="card__body">
              <div style={{display: 'flex', flexDirection: 'column', gap: 14, fontSize: 12.5}}>
                {[
                  { r: 'ผู้จัดการฝ่าย', n: 'อนุมัติเบื้องต้น', i: 1 },
                  { r: 'ผู้อำนวยการ', n: 'อนุมัติขั้นสุดท้าย', i: 2 },
                  { r: 'การเงิน', n: 'ตรวจสอบและจ่ายเงิน', i: 3 },
                ].map((s, i) => (
                  <div key={i} style={{display: 'flex', gap: 10, alignItems: 'flex-start'}}>
                    <div style={{width: 24, height: 24, borderRadius: '50%', background: 'var(--silver-30)', color: 'var(--text-muted)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0}}>{s.i}</div>
                    <div>
                      <div style={{fontWeight: 600}}>{s.r}</div>
                      <div style={{color: 'var(--text-muted)', fontSize: 11.5}}>{s.n}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="col" style={{gap: 8}}>
            <button className="btn btn--primary btn--lg" style={{justifyContent: 'center', width: '100%'}} onClick={() => submit(false)}>
              <Icon name="send" size={15}/> ส่งคำขอเข้าสู่ขั้นตอนอนุมัติ
            </button>
            <button className="btn btn--ghost" style={{justifyContent: 'center', width: '100%'}} onClick={() => submit(true)}>
              <Icon name="save" size={15}/> บันทึกฉบับร่าง
            </button>
            <button className="btn btn--subtle" style={{justifyContent: 'center', width: '100%'}} onClick={onCancel}>
              ยกเลิก
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============== NEW CLEARING FORM ==============
function NewClearingForm({ user, record, onSubmit, onCancel }) {
  const [items, setItems] = useState(record.items.map(i => ({ desc: i.desc, amount: i.amount, actual: '' })));
  const [files, setFiles] = useState([]);
  const [notes, setNotes] = useState('');

  const requested = record.paidAmount || sumItems(record.items);
  const actual = sumActual(items);
  const balance = requested - actual; // positive = ส่งคืน; negative = เบิกเพิ่ม
  const id = 'PCC-' + record.id.slice(4);

  const validItems = items.filter(i => Number(i.actual) > 0).length;
  const valid = validItems > 0 && files.length > 0;

  return (
    <div>
      <div className="content__head">
        <button className="btn btn--ghost btn--sm" onClick={onCancel} style={{marginRight: 8}}>
          <Icon name="arrowLeft" size={14}/> กลับ
        </button>
        <div>
          <h1>เคลียร์เงินทดรองจ่าย</h1>
          <p>สำหรับคำขอเบิก <b style={{color: 'var(--navy-2)'}}>{record.id}</b></p>
        </div>
      </div>

      <div className="split split--wide">
        <div className="col">
          <div className="card">
            <div className="card__head">
              <div style={{width: 32, height: 32, borderRadius: 8, background: 'var(--info-soft)', color: 'var(--navy)', display: 'grid', placeItems: 'center'}}>
                <Icon name="fileText" size={16}/>
              </div>
              <h3>ข้อมูลใบเคลียร์</h3>
            </div>
            <div className="card__body">
              <div className="form-grid">
                <div className="field">
                  <label className="field__label">เลขที่ใบเคลียร์เงินทดรองจ่าย</label>
                  <input className="input" value={id} readOnly/>
                </div>
                <div className="field">
                  <label className="field__label">วันที่มาเคลียร์เงินทดรองจ่าย</label>
                  <input type="date" className="input" defaultValue={todayISO()}/>
                </div>
                <div className="field">
                  <label className="field__label">ใบเบิกเงินทดรองจ่ายเลขที่</label>
                  <input className="input" value={record.id} readOnly/>
                </div>
                <div className="field">
                  <label className="field__label">จำนวนเงินทดรองจ่ายที่ขอเบิกไป (บาท)</label>
                  <div className="input-wrap">
                    <span className="input-wrap__prefix">฿</span>
                    <input className="input input--money input--withprefix" value={fmtMoney(requested)} readOnly/>
                  </div>
                </div>
                <div className="field">
                  <label className="field__label">ผู้ขอเบิกเงินทดรองจ่าย</label>
                  <input className="input" value={record.requester.name} readOnly/>
                </div>
                <div className="field">
                  <label className="field__label">ฝ่าย/แผนกที่ขอเบิก</label>
                  <input className="input" value={DEPARTMENTS.find(d=>d.code===record.dept)?.name + ' (' + record.dept + ')'} readOnly/>
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <div style={{width: 32, height: 32, borderRadius: 8, background: 'var(--gold-soft)', color: '#806A2B', display: 'grid', placeItems: 'center'}}>
                <Icon name="list" size={16}/>
              </div>
              <h3>รายการเคลียร์เงินทดรองจ่าย</h3>
              <div className="card__head__actions">
                <span style={{fontSize: 12, color: 'var(--text-muted)'}}>{validItems}/{items.length} ระบุแล้ว</span>
              </div>
            </div>
            <div className="card__body">
              <div className="help-text" style={{marginBottom: 14}}>
                <Icon name="info" size={16}/>
                <div>
                  ระบุค่าใช้จ่ายที่เกิดขึ้นจริงในแต่ละรายการ ระบบจะคำนวณยอดส่งคืนหรือเบิกเพิ่มให้อัตโนมัติ
                </div>
              </div>
              <LineItemsClearing items={items} onChange={setItems}/>
            </div>
            <div className="card__foot" style={{display: 'block', background: 'white'}}>
              <div className="totals">
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>เงินทดรองจ่ายที่ขอเบิกไป</span>
                  <span className="v">฿ {fmtMoney(requested)}</span>
                </div>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>จำนวนค่าใช้จ่ายที่เกิดขึ้นจริง</span>
                  <span className="v">฿ {fmtMoney(actual)}</span>
                </div>
                <div className={`totals__row major ${balance >= 0 ? 'balance--return' : 'balance--addon'}`}>
                  <span>{balance >= 0 ? 'เงินคงเหลือต้องส่งคืน' : 'ต้องเบิกเพิ่มเติม'}</span>
                  <span className="v">฿ {fmtMoney(Math.abs(balance))}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <div style={{width: 32, height: 32, borderRadius: 8, background: 'var(--orange-soft)', color: 'var(--orange)', display: 'grid', placeItems: 'center'}}>
                <Icon name="paperclip" size={16}/>
              </div>
              <h3>แนบใบเสร็จและเอกสารหลักฐาน <span className="req" style={{color: 'var(--orange)'}}>*</span></h3>
            </div>
            <div className="card__body">
              <Receipts files={files} onChange={setFiles}/>
              {files.length === 0 && (
                <div className="field__hint" style={{marginTop: 8}}>ต้องแนบใบเสร็จอย่างน้อย 1 ฉบับ</div>
              )}
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <h3>หมายเหตุเพิ่มเติม</h3>
            </div>
            <div className="card__body">
              <textarea
                className="textarea"
                placeholder="ข้อมูลเพิ่มเติม เช่น เหตุผลที่ค่าใช้จ่ายแตกต่างจากที่ประมาณการไว้"
                value={notes}
                onChange={e => setNotes(e.target.value)}
                rows={3}
              />
            </div>
          </div>
        </div>

        {/* Side */}
        <div className="col">
          <div className="card">
            <div className="card__head"><h3>สรุปการเคลียร์</h3></div>
            <div className="card__body">
              <div className="totals" style={{background: 'transparent', padding: 0}}>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>เลขที่อ้างอิง</span>
                  <span className="v" style={{fontFamily: 'monospace'}}>{record.id}</span>
                </div>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>เบิกไป</span>
                  <span className="v">฿{fmtMoney(requested)}</span>
                </div>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>ใช้จริง</span>
                  <span className="v">฿{fmtMoney(actual)}</span>
                </div>
                <div className="totals__row">
                  <span style={{color: 'var(--text-muted)'}}>ใบเสร็จที่แนบ</span>
                  <span className="v">{files.length} ฉบับ</span>
                </div>
                <div className={`totals__row major ${balance >= 0 ? 'balance--return' : 'balance--addon'}`}>
                  <span>{balance >= 0 ? 'ส่งคืน' : 'เบิกเพิ่ม'}</span>
                  <span className="v">฿{fmtMoney(Math.abs(balance))}</span>
                </div>
              </div>
            </div>
          </div>

          <div className={`help-text ${balance >= 0 ? 'success' : 'warn'}`}>
            <Icon name={balance >= 0 ? 'checkCircle' : 'alert'} size={16}/>
            <div>
              {balance >= 0
                ? <>ส่งคืนเงินสด <b>฿{fmtMoney(Math.abs(balance))}</b> ที่แคชเชียร์ในวันที่ส่งเคลียร์</>
                : <>การเงินจะโอนเงินเพิ่ม <b>฿{fmtMoney(Math.abs(balance))}</b> หลังตรวจสอบใบเสร็จ</>
              }
            </div>
          </div>

          <button className="btn btn--primary btn--lg" style={{justifyContent: 'center', width: '100%'}} disabled={!valid} onClick={() => onSubmit({ items, files, notes, balance, actual })}>
            <Icon name="send" size={15}/> ส่งใบเคลียร์
          </button>
          <button className="btn btn--ghost" style={{justifyContent: 'center', width: '100%'}}>
            <Icon name="save" size={15}/> บันทึกฉบับร่าง
          </button>
          <button className="btn btn--subtle" style={{justifyContent: 'center', width: '100%'}} onClick={onCancel}>
            ยกเลิก
          </button>
        </div>
      </div>
    </div>
  );
}

// ============== DETAIL DRAWER ==============
function DetailDrawer({ record, user, onClose, onAction, onClear }) {
  const [tab, setTab] = useState('overview');
  const [showApprove, setShowApprove] = useState(null); // 'approve' | 'reject'
  const [note, setNote] = useState('');

  if (!record) return null;
  const dept = DEPARTMENTS.find(d => d.code === record.dept);
  const total = sumItems(record.items);

  // Determine what actions current user can take
  const canApproveAsMgr = user.role === 'manager' && record.status === 'pending_mgr';
  const canApproveAsDir = user.role === 'director' && record.status === 'pending_dir';
  const canApproveAsFin = user.role === 'finance' && record.status === 'pending_fin';
  const canPay = user.role === 'finance' && record.status === 'approved';
  const canClear = record.requester.id === user.id && (record.status === 'paid' || record.status === 'clearing');
  const canCloseClearing = user.role === 'finance' && record.status === 'clearing';

  const canAct = canApproveAsMgr || canApproveAsDir || canApproveAsFin || canPay || canClear || canCloseClearing;

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose}/>
      <div className="drawer">
        <div className="drawer__head">
          <button className="icon-btn" onClick={onClose}><Icon name="close" size={18}/></button>
          <div style={{flex: 1, minWidth: 0}}>
            <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
              <h2>{record.id}</h2>
              {statusBadge(record.status)}
            </div>
            <div style={{fontSize: 12, color: 'var(--text-muted)'}}>{dept?.name} · ส่งคำขอเมื่อ {fmtDateTime(record.submittedAt)}</div>
          </div>
          <button className="icon-btn" title="พิมพ์ฟอร์ม" onClick={() => {
            try { localStorage.setItem('ttg.print.record', JSON.stringify(record)); } catch(e) {}
            window.open('print.html', '_blank');
          }}><Icon name="printer" size={16}/></button>
          <button className="icon-btn" title="ดาวน์โหลด"><Icon name="download" size={16}/></button>
        </div>

        <div className="drawer__body">
          <div className="tabs">
            <button className={`tab ${tab==='overview'?'active':''}`} onClick={()=>setTab('overview')}>
              <Icon name="fileText" size={14}/> ข้อมูลคำขอ
            </button>
            <button className={`tab ${tab==='items'?'active':''}`} onClick={()=>setTab('items')}>
              <Icon name="list" size={14}/> รายการ <span className="tab__count">{record.items.length}</span>
            </button>
            <button className={`tab ${tab==='timeline'?'active':''}`} onClick={()=>setTab('timeline')}>
              <Icon name="history" size={14}/> ขั้นตอนอนุมัติ
            </button>
            {record.status !== 'rejected' && record.paidAmount && (
              <button className={`tab ${tab==='clearing'?'active':''}`} onClick={()=>setTab('clearing')}>
                <Icon name="fileCheck" size={14}/> การเคลียร์เงิน
              </button>
            )}
          </div>

          {tab === 'overview' && (
            <div className="col">
              <div className="card">
                <div className="card__body">
                  <div className="kv"><span className="kv__k">เหตุผลการเบิก</span><span className="kv__v">{record.purpose}</span></div>
                  <div className="kv"><span className="kv__k">ผู้ขอเบิก</span><span className="kv__v" style={{display: 'flex', alignItems: 'center', gap: 8}}>
                    <div className="avatar sm">{record.requester.initials}</div>
                    {record.requester.name} <span style={{color: 'var(--text-muted)', fontWeight: 400}}>· {record.requester.position}</span>
                  </span></div>
                  <div className="kv"><span className="kv__k">ฝ่าย/แผนก</span><span className="kv__v">{dept?.name} <span style={{color: 'var(--text-muted)', fontWeight: 400, fontFamily: 'monospace'}}>({record.dept})</span></span></div>
                  <div className="kv"><span className="kv__k">วันเริ่มใช้เงิน</span><span className="kv__v">{fmtDate(record.startDate)}</span></div>
                  <div className="kv"><span className="kv__k">วันครบกำหนดเคลียร์</span><span className="kv__v">{fmtDate(record.dueDate)}</span></div>
                  <div className="kv"><span className="kv__k">ส่งคำขอเมื่อ</span><span className="kv__v">{fmtDateTime(record.submittedAt)}</span></div>
                  {record.paidAt && <div className="kv"><span className="kv__k">วันที่จ่ายเงิน</span><span className="kv__v">{fmtDateTime(record.paidAt)} · <b>฿{fmtMoney(record.paidAmount)}</b></span></div>}
                </div>
              </div>

              <div className="card">
                <div className="card__head"><h3>สรุปยอดเงิน</h3></div>
                <div className="card__body">
                  <div className="totals" style={{background: 'transparent', padding: 0}}>
                    <div className="totals__row">
                      <span style={{color: 'var(--text-muted)'}}>จำนวนรายการ</span>
                      <span className="v">{record.items.length}</span>
                    </div>
                    <div className="totals__row">
                      <span style={{color: 'var(--text-muted)'}}>ยอดที่ขอเบิก</span>
                      <span className="v">฿{fmtMoney(total)}</span>
                    </div>
                    {record.paidAmount && (
                      <div className="totals__row">
                        <span style={{color: 'var(--text-muted)'}}>ยอดที่จ่ายจริง</span>
                        <span className="v">฿{fmtMoney(record.paidAmount)}</span>
                      </div>
                    )}
                    {record.actualTotal != null && (
                      <>
                        <div className="totals__row">
                          <span style={{color: 'var(--text-muted)'}}>ค่าใช้จ่ายเกิดขึ้นจริง</span>
                          <span className="v">฿{fmtMoney(record.actualTotal)}</span>
                        </div>
                        <div className={`totals__row major ${record.paidAmount - record.actualTotal >= 0 ? 'balance--return' : 'balance--addon'}`}>
                          <span>{record.paidAmount - record.actualTotal >= 0 ? 'ส่งคืนแล้ว' : 'จ่ายเพิ่ม'}</span>
                          <span className="v">฿{fmtMoney(Math.abs(record.paidAmount - record.actualTotal))}</span>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}

          {tab === 'items' && (
            <div className="card">
              <div className="table-wrap">
                <table className="table">
                  <thead><tr>
                    <th style={{width: 60}}>#</th>
                    <th>รายการ</th>
                    <th style={{textAlign: 'right'}}>จำนวนเงิน (บาท)</th>
                  </tr></thead>
                  <tbody>
                    {record.items.map((it, i) => (
                      <tr key={i} style={{cursor: 'default'}}>
                        <td style={{color: 'var(--text-muted)'}}>{i+1}</td>
                        <td>{it.desc}</td>
                        <td className="table__money">{fmtMoney(it.amount)}</td>
                      </tr>
                    ))}
                    <tr style={{cursor: 'default', background: 'var(--silver-10)'}}>
                      <td colSpan={2} style={{fontWeight: 700}}>รวมทั้งสิ้น</td>
                      <td className="table__money" style={{fontSize: 15, color: 'var(--navy)'}}>฿{fmtMoney(total)}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {tab === 'timeline' && (
            <div className="card">
              <div className="card__body">
                <ApprovalTimeline record={record}/>
              </div>
            </div>
          )}

          {tab === 'clearing' && (
            <div className="col">
              {record.status === 'cleared' ? (
                <>
                  <div className="card">
                    <div className="card__head">
                      <h3>สรุปการเคลียร์</h3>
                      <div className="card__head__actions">
                        <span className="badge badge--closed"><span className="dot"/>เคลียร์สำเร็จ</span>
                      </div>
                    </div>
                    <div className="card__body">
                      <div className="kv"><span className="kv__k">เลขที่ใบเคลียร์</span><span className="kv__v" style={{fontFamily: 'monospace'}}>PCC-{record.id.slice(4)}</span></div>
                      <div className="kv"><span className="kv__k">วันที่เคลียร์</span><span className="kv__v">{fmtDate(record.clearedAt)}</span></div>
                      <div className="kv"><span className="kv__k">ค่าใช้จ่ายจริง</span><span className="kv__v">฿{fmtMoney(record.actualTotal)}</span></div>
                      <div className="kv"><span className="kv__k">ส่งคืน</span><span className="kv__v" style={{color: 'var(--ok)'}}>฿{fmtMoney(record.paidAmount - record.actualTotal)}</span></div>
                    </div>
                  </div>
                  <div className="card">
                    <div className="card__head"><h3>ใบเสร็จที่แนบ</h3></div>
                    <div className="card__body">
                      <div className="receipts">
                        {['venue-3floors.pdf', 'lunch-fishpond.jpg', 'snacks-tops.jpg'].map((n, i) => (
                          <div className="receipt" key={i}>
                            <div className="receipt__thumb"><Icon name={n.endsWith('.pdf')?'fileText':'image'} size={16}/></div>
                            <div className="receipt__meta"><b>{n}</b><span>{(Math.random()*1.5+0.3).toFixed(1)} MB</span></div>
                            <button className="receipt__del"><Icon name="download" size={14}/></button>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </>
              ) : (
                <Empty
                  icon="fileCheck"
                  title="ยังไม่ได้ส่งใบเคลียร์"
                  desc={record.status === 'paid' || record.status === 'clearing' ? 'กรอกใบเคลียร์เพื่อรายงานค่าใช้จ่ายที่เกิดขึ้นจริง' : 'รอการจ่ายเงินก่อนจึงจะเคลียร์ได้'}
                  action={canClear ? <button className="btn btn--primary btn--sm" onClick={() => onClear(record)}><Icon name="plus" size={14}/> สร้างใบเคลียร์</button> : null}
                />
              )}
            </div>
          )}
        </div>

        {canAct && (
          <div className="drawer__foot">
            {canClear && (
              <>
                <button className="btn btn--ghost"><Icon name="copy" size={14}/> ทำสำเนา</button>
                <div style={{flex: 1}}/>
                <button className="btn btn--primary" onClick={() => onClear(record)}>
                  <Icon name="fileCheck" size={14}/> เคลียร์เงินทดรองจ่าย
                </button>
              </>
            )}
            {canPay && (
              <>
                <div style={{flex: 1}}/>
                <button className="btn btn--primary" onClick={() => onAction(record, 'pay')}>
                  <Icon name="send" size={14}/> ดำเนินการจ่ายเงิน
                </button>
              </>
            )}
            {canCloseClearing && (
              <>
                <button className="btn btn--danger" onClick={() => setShowApprove('reject')}>
                  <Icon name="x" size={14}/> ส่งกลับให้แก้ไข
                </button>
                <div style={{flex: 1}}/>
                <button className="btn btn--success" onClick={() => onAction(record, 'close-clearing')}>
                  <Icon name="check" size={14}/> ปิดงวด/อนุมัติเคลียร์
                </button>
              </>
            )}
            {(canApproveAsMgr || canApproveAsDir || canApproveAsFin) && (
              <>
                <button className="btn btn--danger" onClick={() => setShowApprove('reject')}>
                  <Icon name="x" size={14}/> ปฏิเสธ
                </button>
                <div style={{flex: 1}}/>
                <button className="btn btn--ghost" onClick={() => setShowApprove('approve')}>
                  <Icon name="edit" size={14}/> อนุมัติพร้อมหมายเหตุ
                </button>
                <button className="btn btn--success" onClick={() => onAction(record, 'approve')}>
                  <Icon name="check" size={14}/> อนุมัติ
                </button>
              </>
            )}
          </div>
        )}

        {showApprove && (
          <ApproveModal
            mode={showApprove}
            record={record}
            note={note}
            setNote={setNote}
            onClose={() => { setShowApprove(null); setNote(''); }}
            onConfirm={() => { onAction(record, showApprove, note); setShowApprove(null); setNote(''); }}
          />
        )}
      </div>
    </>
  );
}

function ApproveModal({ mode, record, note, setNote, onClose, onConfirm }) {
  const isReject = mode === 'reject';
  return (
    <>
      <div className="drawer-backdrop" style={{background: 'rgba(15,14,40,0.6)', zIndex: 300}} onClick={onClose}/>
      <div style={{
        position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 480, maxWidth: '92vw', background: 'white', borderRadius: 14,
        boxShadow: 'var(--sh-3)', zIndex: 301, overflow: 'hidden',
        animation: 'pop 200ms ease',
      }}>
        <div style={{padding: '20px 22px', borderBottom: '1px solid var(--border)'}}>
          <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
            <div style={{width: 36, height: 36, borderRadius: 8, background: isReject ? 'var(--err-soft)' : 'var(--ok-soft)', color: isReject ? 'var(--err)' : 'var(--ok)', display: 'grid', placeItems: 'center'}}>
              <Icon name={isReject ? 'x' : 'check'} size={18}/>
            </div>
            <div>
              <h2 style={{margin: 0, fontSize: 16}}>{isReject ? 'ปฏิเสธคำขอ' : 'อนุมัติพร้อมหมายเหตุ'}</h2>
              <div style={{fontSize: 12, color: 'var(--text-muted)'}}>{record.id}</div>
            </div>
          </div>
        </div>
        <div style={{padding: 22}}>
          <div className="field">
            <label className="field__label">หมายเหตุ {isReject && <span className="req">*</span>}</label>
            <textarea
              className="textarea"
              placeholder={isReject ? 'ระบุเหตุผลในการปฏิเสธ' : 'ความคิดเห็นถึงผู้ขอเบิก (ถ้ามี)'}
              value={note}
              onChange={e => setNote(e.target.value)}
              rows={4}
              autoFocus
            />
          </div>
        </div>
        <div style={{padding: '14px 22px', borderTop: '1px solid var(--border)', display: 'flex', gap: 8, justifyContent: 'flex-end', background: 'var(--silver-10)'}}>
          <button className="btn btn--ghost" onClick={onClose}>ยกเลิก</button>
          <button
            className={isReject ? 'btn btn--danger' : 'btn btn--success'}
            disabled={isReject && !note.trim()}
            onClick={onConfirm}
          >
            <Icon name={isReject ? 'x' : 'check'} size={14}/>
            {isReject ? 'ยืนยันการปฏิเสธ' : 'ยืนยันการอนุมัติ'}
          </button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { NewRequestForm, NewClearingForm, DetailDrawer, ApproveModal });