/* ============ เอกสารกิจการ (ใบอนุญาต / ทะเบียน) ============ */
const CDOC_TYPES = {
  cert: 'หนังสือรับรอง (DBD)',
  commerce: 'ทะเบียนพาณิชย์',
  vat: 'ภ.พ.20 (ทะเบียน VAT)',
  license: 'ใบอนุญาตประกอบกิจการ',
  contractor: 'ทะเบียนผู้รับเหมา/ผู้รับจ้าง',
  idcard: 'บัตรปชช./หนังสือมอบอำนาจ',
  insurance: 'ประกัน/หนังสือค้ำประกัน',
  other: 'อื่นๆ',
};
function cdocThDate(iso) { const d = new Date(iso); if (isNaN(d)) return ''; return d.getDate() + ' ' + D.thMonthsShort[d.getMonth()] + ' ' + String((d.getFullYear() + 543) % 100).padStart(2, '0'); }
function daysUntil(iso) { const d = new Date(iso); if (isNaN(d)) return null; return Math.round((d - new Date()) / 86400000); }

function CompanyDocsPage({ role, toast }) {
  const canEdit = role === 'owner' || role === 'staff';
  const canDelete = role === 'owner';
  const [, setVer] = useState(0);
  const refresh = () => setVer((v) => v + 1);
  const [modal, setModal] = useState(null); // 'new' | record
  const [delRow, setDelRow] = useState(null);

  const list = (D.companyDocs || []).slice().sort((a, b) => (a.expiryISO || 'zzz').localeCompare(b.expiryISO || 'zzz'));
  const expSoon = list.filter((d) => { const n = daysUntil(d.expiryISO); return n != null && n <= 60; }).length;

  const save = async (rec, isNew) => {
    const res = isNew ? await API.addCDoc(rec) : await API.updateCDoc(rec);
    if (res.ok && res.data.ok) {
      const saved = res.data.record || rec; D.companyDocs = D.companyDocs || [];
      const i = D.companyDocs.findIndex((x) => x.id === saved.id);
      if (i >= 0) D.companyDocs[i] = saved; else D.companyDocs.unshift(saved);
      toast(res.data.fileWarning || (isNew ? 'เพิ่มเอกสารแล้ว' : 'บันทึกแล้ว'), res.data.fileWarning ? 'warn' : undefined);
      setModal(null); refresh(); return true;
    }
    toast((res.data && (res.data.msg || res.data.error)) || 'บันทึกไม่สำเร็จ', 'warn'); return false;
  };
  const doDelete = async () => {
    const res = await API.deleteCDoc(delRow.id);
    if (res.ok && res.data.ok) { const i = D.companyDocs.findIndex((x) => x.id === delRow.id); if (i >= 0) D.companyDocs.splice(i, 1); toast('ลบแล้ว'); refresh(); }
    else toast('ลบไม่สำเร็จ', 'warn');
    setDelRow(null);
  };
  const openFile = async (id) => {
    const res = await API.getCDocFile(id);
    if (res.ok && res.data && res.data.data) fetch(res.data.data).then((r) => r.blob()).then((b) => window.open(URL.createObjectURL(b), '_blank')).catch(() => toast('เปิดไฟล์ไม่ได้', 'warn'));
    else toast('ยังไม่มีไฟล์แนบ', 'warn');
  };

  return (
    <>
      <div className="page-head">
        <div><div className="pt">เอกสารกิจการ</div><div className="ps">คลังใบอนุญาต · ทะเบียนพาณิชย์ · หนังสือรับรอง · ภ.พ.20 ฯลฯ — แนบไฟล์ + เตือนวันหมดอายุ</div></div>
        <div className="spacer"></div>
        {canEdit && <button className="btn btn-primary" onClick={() => setModal('new')}><Icon name="plus" className="ic" />เพิ่มเอกสาร</button>}
      </div>

      <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', marginBottom: 16 }}>
        <Stat label="เอกสารทั้งหมด" icon="docs" value={list.length} unit=" รายการ" />
        <Stat label="ใกล้/เลยหมดอายุ" icon="alert" iconBg={expSoon ? 'var(--warn-bg)' : 'var(--surface-2)'} iconColor={expSoon ? 'var(--warn)' : 'var(--ink-3)'} value={expSoon} unit=" รายการ" sub="ภายใน 60 วัน" />
      </div>

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>ชื่อเอกสาร</th><th className="hide-sm">ประเภท</th><th className="hide-sm">เลขที่</th><th>วันหมดอายุ</th><th className="c">ไฟล์</th>{canEdit && <th className="c sticky-act">จัดการ</th>}</tr></thead>
            <tbody>
              {list.map((d) => {
                const n = daysUntil(d.expiryISO);
                const expColor = n == null ? 'var(--ink-3)' : n < 0 ? 'var(--danger)' : n <= 60 ? 'var(--warn)' : 'var(--ink-2)';
                return (
                  <tr key={d.id}>
                    <td style={{ fontWeight: 500, minWidth: 150 }}>{d.name}{d.note ? <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{d.note}</div> : null}</td>
                    <td className="hide-sm"><span className="chip" style={{ background: 'var(--surface-2)', borderColor: 'transparent' }}>{CDOC_TYPES[d.docType] || d.docType}</span></td>
                    <td className="mono hide-sm" style={{ fontSize: 12.5 }}>{d.docNo || '—'}</td>
                    <td style={{ color: expColor, fontWeight: n != null && n <= 60 ? 700 : 400 }}>{d.expiryISO ? cdocThDate(d.expiryISO) : '—'}{n != null && n < 0 ? ' (หมดอายุ)' : n != null && n <= 60 ? ' (' + n + ' วัน)' : ''}</td>
                    <td className="c">{d.file ? <button className="x-btn" title="เปิดไฟล์" onClick={() => openFile(d.id)}><Icon name="eye" size={16} /></button> : <span style={{ color: 'var(--ink-3)' }}>—</span>}</td>
                    {canEdit && (
                      <td className="c sticky-act">
                        <div style={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
                          <button className="x-btn" title="แก้ไข" onClick={() => setModal(d)}><Icon name="edit" size={16} /></button>
                          {canDelete && <button className="x-btn" title="ลบ" style={{ color: 'var(--danger)' }} onClick={() => setDelRow(d)}><Icon name="trash" size={16} /></button>}
                        </div>
                      </td>
                    )}
                  </tr>
                );
              })}
              {list.length === 0 && <tr><td colSpan={canEdit ? 6 : 5} style={{ textAlign: 'center', color: 'var(--ink-3)', padding: '26px 12px' }}>ยังไม่มีเอกสารกิจการ — กด “เพิ่มเอกสาร” เพื่อเริ่ม</td></tr>}
            </tbody>
          </table>
        </div>
      </div>

      {modal && <CompanyDocModal record={modal === 'new' ? null : modal} onClose={() => setModal(null)} onSave={save} />}
      {delRow && (
        <Modal title="ยืนยันการลบ" icon="trash" onClose={() => setDelRow(null)}
          footer={<><button className="btn btn-ghost" onClick={() => setDelRow(null)}>ยกเลิก</button><button className="btn btn-danger" onClick={doDelete}><Icon name="trash" className="ic" />ลบ</button></>}>
          <div style={{ fontSize: 14, lineHeight: 1.7 }}>ลบ <b>{delRow.name}</b> ออกจากคลังเอกสารกิจการ?</div>
        </Modal>
      )}
    </>
  );
}

function CompanyDocModal({ record, onClose, onSave }) {
  const r = record || {};
  const [f, setF] = useState({ name: r.name || '', docType: r.docType || 'license', docNo: r.docNo || '', issuedISO: r.issuedISO || '', expiryISO: r.expiryISO || '', note: r.note || '' });
  const [fileData, setFileData] = useState(null);
  const [fileName, setFileName] = useState(r.file ? 'มีไฟล์แนบอยู่แล้ว (อัปโหลดใหม่เพื่อแทนที่)' : '');
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const onFile = (e) => {
    const file = e.target.files && e.target.files[0]; if (!file) return;
    if (file.size > 20 * 1024 * 1024) { setErr('ไฟล์ใหญ่เกิน 20MB'); return; }
    setErr(''); const rd = new FileReader(); rd.onload = () => { setFileData(rd.result); setFileName(file.name + ' (' + Math.round(file.size / 1024) + ' KB)'); }; rd.readAsDataURL(file);
  };
  const save = async () => {
    if (!f.name.trim()) { setErr('กรุณากรอกชื่อเอกสาร'); return; }
    setSaving(true);
    const ok = await onSave({ id: r.id, name: f.name.trim(), docType: f.docType, docNo: f.docNo.trim(), issuedISO: f.issuedISO, expiryISO: f.expiryISO, note: f.note.trim(), fileData }, !record);
    setSaving(false); if (!ok) setErr('บันทึกไม่สำเร็จ');
  };
  return (
    <Modal title={record ? 'แก้ไขเอกสารกิจการ' : 'เพิ่มเอกสารกิจการ'} icon="docs" onClose={onClose} wide
      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: '2fr 1fr', gap: 12 }}>
          <Field label="ชื่อเอกสาร"><input className="input" value={f.name} onChange={(e) => set('name', e.target.value)} placeholder="เช่น หนังสือรับรองห้างหุ้นส่วน" /></Field>
          <Field label="ประเภท"><select className="select" value={f.docType} onChange={(e) => set('docType', e.target.value)}>{Object.entries(CDOC_TYPES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}</select></Field>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          <Field label="เลขที่เอกสาร"><input className="input mono" value={f.docNo} onChange={(e) => set('docNo', e.target.value)} placeholder="—" /></Field>
          <Field label="วันที่ออก"><ThaiDatePicker value={f.issuedISO} onChange={(v) => set('issuedISO', v)} /></Field>
          <Field label="วันหมดอายุ"><ThaiDatePicker value={f.expiryISO} onChange={(v) => set('expiryISO', v)} /></Field>
        </div>
        <Field label="ไฟล์เอกสาร (PDF/รูป)">
          <input type="file" accept="application/pdf,image/*" onChange={onFile} className="input" style={{ paddingTop: 7 }} />
          {fileName && <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 4 }}>{fileName}</div>}
        </Field>
        <Field label="หมายเหตุ"><input className="input" value={f.note} onChange={(e) => set('note', e.target.value)} placeholder="เช่น หน่วยงานที่ออก / เงื่อนไข" /></Field>
      </div>
    </Modal>
  );
}

window.CompanyDocsPage = CompanyDocsPage;