(function registerFreeSeoEvidenceImportView(global) {
  const React = global.React;
  if (!React) return;

  function unwrap(response) { return response && response.data !== undefined ? response.data : response; }
  function listItems(response) {
    const data = unwrap(response);
    if (!data) return [];
    if (Array.isArray(data)) return data;
    if (Array.isArray(data.items)) return data.items;
    return [];
  }

  function EvidenceImportView() {
    const api = global.JS_API && global.JS_API.freeSeo && global.JS_API.freeSeo.evidenceImports;
    const [imports, setImports] = React.useState([]);
    const [activeImport, setActiveImport] = React.useState(null);
    const [loading, setLoading] = React.useState(false);
    const [error, setError] = React.useState('');
    const [message, setMessage] = React.useState('');

    React.useEffect(() => { refreshImports(); }, []);

    async function refreshImports() {
      if (!api) return;
      try {
        const response = await api.listImports({ limit: 10 });
        const items = listItems(response);
        setImports(items);
        if (!activeImport && items[0]) openImport(items[0]);
      } catch (err) { setError(err.message); }
    }

    async function createImport(payload) {
      setLoading(true); setError(''); setMessage('');
      try {
        const response = await api.createImport(payload);
        const record = unwrap(response);
        setActiveImport(record);
        setMessage('Evidence import created and normalized.');
        await refreshImports();
      } catch (err) { setError(err.message); }
      finally { setLoading(false); }
    }

    async function openImport(item) {
      if (!api || !item) return;
      setLoading(true); setError('');
      try {
        const response = await api.getImport(item.id || item.evidenceImportId);
        setActiveImport(unwrap(response));
      } catch (err) { setError(err.message); }
      finally { setLoading(false); }
    }

    async function applyImport() {
      if (!api || !activeImport) return;
      setLoading(true); setError(''); setMessage('');
      try {
        const response = await api.applyImport(activeImport.id, { mode: 'all', createDashboardEvidence: true, createRecommendations: true, createArtifact: true });
        const data = unwrap(response);
        setActiveImport(data.import || activeImport);
        setMessage('Evidence applied to local dashboard summary/artifact flow.');
        await refreshImports();
      } catch (err) { setError(err.message); }
      finally { setLoading(false); }
    }

    if (!api) return <div className="free-seo-card"><h2>Evidence Imports</h2><p>Evidence import client is not loaded.</p></div>;

    return <div className="free-seo-lab-page evidence-import-page">
      <header className="free-seo-page-header"><div><p className="eyebrow">Free SEO Lab · Patch 05</p><h2>Manual Evidence Import Wizard</h2><p>Normalize GSC, Bing, GA4, manual CSV/TSV/JSON, and screenshot observations without OAuth or paid provider keys.</p></div>{activeImport && <div className="free-seo-actions"><button type="button" className="secondary" onClick={() => api.exportImport(activeImport.id, 'csv')}>Export CSV</button><button type="button" className="secondary" onClick={() => api.exportImport(activeImport.id, 'html')}>Export HTML</button><button type="button" onClick={() => api.exportImport(activeImport.id, 'zip')}>Export ZIP</button></div>}</header>
      {error && <div className="free-seo-error">{error}</div>}
      {message && <div className="free-seo-success">{message}</div>}
      <div className="free-seo-grid-2 wide-left"><global.FreeSeoEvidenceUploadWizard onSubmit={createImport} loading={loading} /><aside className="free-seo-card compact"><h3>Recent imports</h3>{imports.length ? imports.map((item) => <button key={item.id} type="button" className="free-seo-run-pill" onClick={() => openImport(item)}><strong>{item.provider} · {item.normalizedRowCount || 0} rows</strong><span>{item.status} · {item.createdAt ? new Date(item.createdAt).toLocaleString() : ''}</span></button>) : <p>No imports yet.</p>}</aside></div>
      {activeImport && <global.FreeSeoEvidenceValidationSummary record={activeImport} />}
      {activeImport && <global.FreeSeoEvidenceApplyPreview record={activeImport} onApply={applyImport} loading={loading} />}
      {activeImport && <div className="free-seo-grid-2"><section className="free-seo-card"><h3>Top queries</h3><div className="free-seo-option-list">{((activeImport.summary || {}).topQueries || []).slice(0, 10).map((item) => <article key={item.key}><strong>{item.key}</strong><small>{item.impressions || 0} impressions · {item.clicks || 0} clicks</small></article>)}</div></section><section className="free-seo-card"><h3>Top pages</h3><div className="free-seo-option-list">{((activeImport.summary || {}).topPages || []).slice(0, 10).map((item) => <article key={item.key}><strong>{item.key}</strong><small>{item.sessions || 0} sessions · {item.impressions || 0} impressions</small></article>)}</div></section></div>}
      {activeImport && <global.FreeSeoEvidenceRowsPreview rows={activeImport.normalizedRows || []} />}
    </div>;
  }

  global.FreeSeoEvidenceImportView = EvidenceImportView;
})(window);
