// Export.jsx — AutoCount export
function ExportPage() {
  const [from, setFrom] = React.useState('2026-04-01');
  const [to, setTo] = React.useState('2026-04-30');

  const completed = WORK_ORDERS.filter(w => w.status === 'Job Completed' || w.status === 'Job Started' || w.status === 'On the Way');
  const [selected, setSelected] = React.useState(new Set(completed.map(w => w.id)));

  const toggle = (id) => {
    const s = new Set(selected);
    if (s.has(id)) s.delete(id); else s.add(id);
    setSelected(s);
  };

  const mappings = [
    ['Customer Name',  'Debtor Code / Customer'],
    ['Contact Person', 'Attention'],
    ['Phone Number',   'Phone'],
    ['Job Location',   'Delivery Address'],
    ['Machinery Type', 'Item Code'],
    ['Crane Tonnage',  'UOM'],
    ['Job Date',       'Invoice Date'],
    ['Price',          'Amount'],
    ['Diesel Surcharge','Additional Charge'],
    ['Remarks',        'Description'],
    ['Operator',       'Salesman'],
    ['WO ID',          'Reference No'],
  ];

  return (
    <div className="content">
      <div className="two-col">
        <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
          <div className="card">
            <div className="card__header">
              <div className="card__title">Export Range</div>
              <span className="badge badge--gray badge--no-dot">{selected.size} jobs selected · est. {(selected.size * 5.4).toFixed(1)} KB</span>
            </div>

            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16}}>
              <div className="field">
                <label>From</label>
                <input type="date" value={from} onChange={(e) => setFrom(e.target.value)}/>
              </div>
              <div className="field">
                <label>To</label>
                <input type="date" value={to} onChange={(e) => setTo(e.target.value)}/>
              </div>
            </div>

            <div className="table-wrap" style={{maxHeight: 360, overflow: 'auto'}}>
              <table className="table">
                <thead>
                  <tr>
                    <th style={{width: 40}}>
                      <input type="checkbox"
                        checked={selected.size === completed.length}
                        onChange={() => setSelected(selected.size === completed.length ? new Set() : new Set(completed.map(w => w.id)))}/>
                    </th>
                    <th>WO ID</th><th>Customer</th><th>Date</th><th>Amount</th>
                  </tr>
                </thead>
                <tbody>
                  {completed.map(w => (
                    <tr key={w.id}>
                      <td><input type="checkbox" checked={selected.has(w.id)} onChange={() => toggle(w.id)}/></td>
                      <td style={{fontWeight: 600, color: 'var(--color-navy)', fontFamily: 'var(--font-mono)', fontSize: 12}}>{w.id}</td>
                      <td>{w.customer}</td>
                      <td>{new Date(w.date).toLocaleDateString('en-MY', {day: '2-digit', month: 'short'})}</td>
                      <td style={{fontWeight: 600}}>{w.price}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div style={{display: 'flex', gap: 12, marginTop: 20, flexWrap: 'wrap'}}>
              <button className="btn btn--primary btn--lg" style={{flex: 1, minWidth: 200}}><Download size={18}/> Export CSV for AutoCount</button>
              <button className="btn btn--navy btn--lg" style={{flex: 1, minWidth: 200}}><FileText size={18}/> Export Excel (.xlsx)</button>
            </div>
            <div style={{fontSize: 12, color: 'var(--color-grey-500)', marginTop: 12}}>
              Files write to: <code>autocount/sales-invoice-import-2026-04.csv</code> · Format: AutoCount Sales Invoice Import v2.1
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card__header">
            <div className="card__title">Field Mapping</div>
          </div>
          <div style={{fontSize: 13, color: 'var(--color-grey-500)', marginBottom: 12}}>How Pow Lee work order fields translate into AutoCount fields on import.</div>
          <div style={{border: '1px solid var(--border-default)', borderRadius: 8, overflow: 'hidden'}}>
            <div className="map-row" style={{background: 'var(--color-grey-50)', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-grey-500)'}}>
              <div>Work Order</div>
              <div></div>
              <div>AutoCount</div>
            </div>
            {mappings.map(([s, d]) => (
              <div key={s} className="map-row">
                <div className="map-row__source">{s}</div>
                <div className="map-row__arrow"><ChevRight size={16}/></div>
                <div><span className="map-row__dest">{d}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ExportPage });