// admin/pages/imports.jsx — Import Center (JSON staging + review; PDF engine is Node canonical)

function ImportsPage({ go, params }) {
  const admin = useAdmin();
  const [, bump] = React.useState(0);
  const refresh = () => bump((n) => n + 1);
  const jobs = OwnerOps.loadImportQueue();
  const [err, setErr] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const selected = params && params.importId ? jobs.find((j) => j.id === params.importId) : null;
  const cap = OwnerCaps.getCap('imports');

  const onFile = async (e) => {
    setErr('');
    setMsg('');
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const name = (file.name || '').toLowerCase();
    if (name.endsWith('.pdf') || file.type === 'application/pdf') {
      setErr('PDF intelligence runs in the Node @rinads/commerce-canonical package (ProductImportIntelligenceEngine). Browser PDF auto-publish is disabled. Export JSON candidates from that pipeline, then upload here for owner review.');
      e.target.value = '';
      return;
    }
    if (name.endsWith('.csv') || file.type === 'text/csv' || file.type === 'application/vnd.ms-excel') {
      try {
        const text = await file.text();
        const staged = await OwnerOps.importProductCsv(text, file.name);
        setMsg(`Staged CSV ${staged.count} products as ${staged.id}. Review before approve.`);
        refresh();
        go('imports', { importId: staged.id });
      } catch (ex) {
        setErr(ex.message || 'CSV import failed');
      }
      e.target.value = '';
      return;
    }
    if (!name.endsWith('.json') && file.type !== 'application/json') {
      setErr('Supported here: JSON catalog/backup or Ambady product CSV (name,sku,price,category,stock).');
      e.target.value = '';
      return;
    }
    try {
      const text = await file.text();
      const json = JSON.parse(text);
      const staged = await OwnerOps.importCatalogJson(json);
      setMsg(`Staged ${staged.count} products as ${staged.id}. Review before approve.`);
      refresh();
      go('imports', { importId: staged.id });
    } catch (ex) {
      setErr(ex.message || 'Import failed');
    }
    e.target.value = '';
  };

  const approve = async () => {
    if (!selected) return;
    if (!window.confirm(`Approve import ${selected.id}?\nCreate/update ${selected.count} products into the live catalog.`)) return;
    try {
      const r = await OwnerOps.approveImport(selected.id);
      setMsg(`Approved: create ${r.created}, update ${r.updated}`);
      refresh();
    } catch (ex) {
      setErr(ex.message);
    }
  };

  const reject = async () => {
    if (!selected) return;
    if (!window.confirm(`Reject import ${selected.id}?`)) return;
    await OwnerOps.rejectImport(selected.id, 'owner_rejected');
    refresh();
  };

  return (
    <div>
      <div className="mode-banner">Import Center · capability: <b>{cap.status}</b> — {cap.via || cap.reason}</div>
      <div className="spread" style={{ marginBottom: 16, flexWrap: 'wrap', gap: 10 }}>
        <div>
          <h2 className="serif" style={{ fontSize: '1.5rem' }}>Import Center</h2>
          <p className="muted" style={{ fontSize: '.84rem' }}>Upload → stage → review → explicit approve. Never auto-publish uncertain data.</p>
        </div>
        <label className="btn btn-primary">
          <AIcon name="download" /> New JSON / CSV import
          <input type="file" accept="application/json,.json,text/csv,.csv" hidden onChange={onFile} />
        </label>
      </div>
      {err && <div className="banner-err">{err}</div>}
      {msg && <div className="banner-ok">{msg}</div>}

      <div className="cc-grid-2">
        <div className="card">
          <div className="panel-head"><h2>Jobs</h2></div>
          {jobs.length === 0 ? (
            <Empty icon="download" title="No import jobs" note="Upload an Ambady catalog JSON backup to stage products for review." />
          ) : (
            <table className="tbl">
              <thead><tr><th>Job</th><th>Kind</th><th>Count</th><th>Status</th></tr></thead>
              <tbody>
                {jobs.map((j) => (
                  <tr key={j.id} style={{ cursor: 'pointer' }} onClick={() => go('imports', { importId: j.id })}>
                    <td><b>{j.id}</b><br /><span className="muted" style={{ fontSize: '.72rem' }}>{j.at}</span></td>
                    <td>{j.kind}</td>
                    <td>{j.count}</td>
                    <td><span className="badge b-new">{j.status}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>

        <div className="card card-pad">
          {!selected ? (
            <Empty icon="eye" title="Select a job" note="Review staged products before approval." />
          ) : (
            <div>
              <div className="section-title">{selected.id}</div>
              <p className="muted">{selected.count} products · {selected.status}</p>
              {selected.result && <p>Result: create {selected.result.created}, update {selected.result.updated}</p>}
              <div className="row" style={{ gap: 8, margin: '12px 0', flexWrap: 'wrap' }}>
                {(selected.status === 'ready_for_review' || selected.status === 'edited') && (
                  <>
                    <button className="btn btn-primary" onClick={approve}>Approve & publish to catalog</button>
                    <button className="btn btn-danger" onClick={reject}>Reject</button>
                  </>
                )}
              </div>
              <div className="import-preview">
                {(selected.products || []).slice(0, 12).map((p) => (
                  <div className="card-row" key={p.id}>
                    {p.image && <img className="tbl-thumb" src={p.image} alt="" />}
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <b>{p.name}</b>
                      <div className="muted" style={{ fontSize: '.74rem' }}>{p.sku || p.id} · ₹{p.price}</div>
                    </div>
                  </div>
                ))}
                {(selected.products || []).length > 12 && (
                  <p className="muted">+{(selected.products || []).length - 12} more</p>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
window.ImportsPage = ImportsPage;