/* ============================================================
   IMTRACK — Import wizard (8 source types)
   ============================================================ */
(function () {
  const { useState, useEffect } = React;

  const IMPORT_TYPES = {
    afop_planned: {
      name: 'AFOP Planned Value',
      target: 'AFOP Lines',
      desc: 'Import planned AFOP allocation amounts by AFOP line number.',
      cols: ['AFOP Line No', 'Description', 'AFOP Amount', 'Currency', 'Contract No'],
      fields: ['AFOP Line Number', 'Line Description', 'Planned AFOP Amount', 'Currency', 'Company Contract No'],
    },
    po_planned: {
      name: 'PO Planned Value',
      target: 'PO Lines',
      desc: 'Import planned PO amounts and years for each AFOP line.',
      cols: ['PO No', 'AFOP Line', 'Year', 'PO Amount', 'Currency', 'Status'],
      fields: ['ERP PO Number', 'AFOP Line Number', 'Contract Year', 'PO Amount', 'Currency', 'PO Status'],
    },
    erp_afop: {
      name: 'ERP AFOP Details',
      target: 'AFOP Lines',
      desc: 'ERP-sourced AFOP line details. System-owned fields are reviewed before update.',
      cols: ['AFOP No', 'Line', 'Description', 'AFOP Amount', 'IO', 'WP&B Line', 'Status'],
      fields: ['ERP AFOP Contract No', 'Line Number', 'Line Description', 'AFOP Amount', 'IO Number', 'WP&B Line Code', 'AFOP Status'],
    },
    erp_afop_list: {
      name: 'ERP AFOP List',
      target: 'Contracts',
      desc: 'ERP-sourced AFOP header list. Creates or updates contract records.',
      cols: ['AFOP No', 'Company Contract No', 'Vendor', 'Start Date', 'End Date', 'Total Value', 'Currency'],
      fields: ['ERP AFOP Number', 'Company Contract No', 'Vendor / Contractor', 'Contract Start Date', 'Contract End Date', 'Total Contract Value', 'Currency'],
    },
    erp_po: {
      name: 'ERP PO List',
      target: 'PO Lines',
      desc: 'ERP purchase order list. Updates PO status and committed amounts.',
      cols: ['ERP PO No', 'AFOP No', 'AFOP Line', 'Year', 'PO Amount', 'Currency', 'Status', 'IO'],
      fields: ['ERP PO Number', 'ERP AFOP Contract No', 'AFOP Line Number', 'Year', 'PO Amount', 'Currency', 'PO Status', 'IO Number'],
    },
    erp_ac: {
      name: 'ERP SE/AC Monitoring',
      target: 'AC Log',
      desc: 'ERP AC monitoring extract. Updates ERP amount and status on matched ACs.',
      cols: ['ERP AC No', 'Company Contract No', 'AC No', 'Cash Call Period', 'ERP Amount', 'Status', 'ERP Achieve', 'ERP Post', 'ERP Clear'],
      fields: ['ERP AC Number', 'Company Contract No', 'AC Number', 'Cash Call Period', 'ERP AC Amount', 'AC Status', 'ERP Achieve Date', 'ERP Post Date', 'ERP Clear Date'],
    },
    ac: {
      name: 'AC Report (historical)',
      target: 'AC Log',
      desc: 'Historical AC tracking file. Creates new AC records from CSV.',
      cols: ['Contract No', 'Contractor', 'AC No', 'Status', 'Cash Call', 'AC Value', 'ERP Amount', 'Services From', 'Services To'],
      fields: ['Company Contract No', 'Contractor Name', 'AC Number', 'Status', 'Cash Call Period', 'AC Value Submitted', 'ERP AC Amount', 'Services Period Start', 'Services Period End'],
    },
    pp: {
      name: 'Procurement Plan export',
      target: 'Procurement Plan',
      desc: 'Procurement plan register export from ePCMS. Creates or updates pre-award pipeline records.',
      cols: ['Plan No', 'Title', 'Method', 'Code', 'Est Value', 'Currency', 'Start', 'End', 'PIC', 'Tender Status', 'PR No', 'PR Status', 'Contract Link'],
      fields: ['Procurement Plan Number', 'Tender/Contract Title', 'Procurement Method', 'Code', 'Estimated Value', 'Currency', 'Est Contract Start', 'Est Contract End', 'User PIC', 'Tender Status', 'PR Number', 'PR Status', 'Linked Contract No'],
    },
  };

  /* Performance note (v0.2+): Import validation handles mock data instantly.
     At production scale (1,000+ rows), target <10s end-to-end (parse → validate → confirm).
     v0.2+ batch processing: chunk imports into 500-row batches with progress indicator.
     Duplicate detection keys are indexed; identity-key checks are O(1) per row. */
  function ImportModule() {
    const ctx = window.useStore();
    const { store, navigate } = ctx;
    const toast = window.useToast();
    const params = (JSON.parse(localStorage.getItem('imtrack_nav') || '{}').params) || {};
    const back = params.back || 'aclog';
    const activeSources = ((store.lookups || {}).importSourceType || [])
      .filter((s) => s.active && IMPORT_TYPES[s.id])
      .sort((a, b) => (a.sortOrder || 99) - (b.sortOrder || 99));
    const firstActiveType = (activeSources[0] || {}).id || 'ac';
    const requestedTypeActive = activeSources.some((s) => s.id === params.type);
    const [type, setType] = useState(requestedTypeActive ? params.type : firstActiveType);
    const [step, setStep] = useState(1);
    const cfg = IMPORT_TYPES[type] || IMPORT_TYPES[firstActiveType] || IMPORT_TYPES.ac;
    const sourceMeta = activeSources.find((s) => s.id === type) || {};
    const systemConfig = store.systemConfig || {};
    const allowedTypes = sourceMeta.accepts || systemConfig.importAllowedFileTypes || ['csv', 'xlsx'];
    const [mapping, setMapping] = useState(() => cfg.cols.map((_, i) => i));

    useEffect(() => {
      if (!activeSources.some((s) => s.id === type)) setType(firstActiveType);
    }, [type, firstActiveType]);
    useEffect(() => { setMapping((IMPORT_TYPES[type] || IMPORT_TYPES[firstActiveType] || IMPORT_TYPES.ac).cols.map((_, i) => i)); }, [type, firstActiveType]);

    const STEPS = ['Select source', 'Map columns', 'Validate', 'Result'];
    const validation = { create: type === 'ac' ? 12 : type === 'pp' ? 4 : 6, update: type === 'erp_ac' ? 5 : 2, warnings: 2, errors: 0 };
    const [validationTab, setValidationTab] = useState('create');
    const VALIDATION_TABS = [
      ['create', 'To Create', 'var(--color-green-600)', validation.create],
      ['update', 'To Update', 'var(--color-blue-600)', validation.update],
      ['warnings', 'Warnings', 'var(--color-warning-600)', validation.warnings],
      ['errors', 'Errors', 'var(--color-slate-600)', validation.errors],
    ];
    const backLabel = back === 'aclog' ? 'AC Log' : back === 'procurement' ? 'Procurement Plan' : back === 'budget' ? 'Budget' : back === 'contracts' ? 'Contracts' : back;

    const groups = ['ERP-sourced', 'Planning', 'Historical'];
    const typesByGroup = groups
      .map((label) => ({ label: label === 'ERP-sourced' ? 'ERP-sourced (system-owned fields)' : label, keys: activeSources.filter((s) => s.group === label).map((s) => s.id) }))
      .filter((grp) => grp.keys.length);

    return (
      <div className="page">
        <div className="row" style={{ marginBottom: 14, gap: 8 }}>
          <span className="link" onClick={() => navigate(back)} style={{ fontSize: 'var(--text-sm)' }}>{backLabel}</span>
          <Icon name="chevron-right" size={14} color="#94a3b8" />
          <span className="dim" style={{ fontSize: 'var(--text-sm)' }}>Import</span>
        </div>
        <PageHeader title="Import Data" subtitle={'Mapping → validation → confirmation · target: ' + cfg.target} />

        <div className="card card-pad" style={{ maxWidth: 900 }}>
          <div className="stepper">
            {STEPS.map((s, i) => (
              <React.Fragment key={s}>
                <div className={'step' + (step === i + 1 ? ' active' : step > i + 1 ? ' done' : '')}>
                  <span className="sdot">{step > i + 1 ? <Icon name="check" size={14} /> : i + 1}</span>
                  <span className="slabel">{s}</span>
                </div>
                {i < STEPS.length - 1 && <div className="step-line" />}
              </React.Fragment>
            ))}
          </div>

          {step === 1 && (
            <div>
              <div className="form-grid" style={{ marginBottom: 16 }}>
                <Field label="Import Source Type" req span>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {typesByGroup.map((grp) => (
                      <div key={grp.label}>
                        <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--text-muted)', marginBottom: 6 }}>{grp.label}</div>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                          {grp.keys.map((k) => (
                            <button key={k} className={'btn btn-sm ' + (type === k ? 'btn-primary' : 'btn-secondary')} onClick={() => setType(k)}>
                              {IMPORT_TYPES[k].name}
                            </button>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </Field>
              </div>
              {cfg && (
                <div className="card card-pad mb16" style={{ background: 'var(--color-slate-50)' }}>
                  <div className="section-title" style={{ marginBottom: 4 }}>{cfg.name}</div>
                  <div className="field-hint">{cfg.desc}</div>
                  <div className="field-hint mt8">Accepted import workbook types: {allowedTypes.map((t) => t.toUpperCase()).join(', ')}. Direct document file storage stays out of v1.</div>
                  {sourceMeta.duplicateKeys && <div className="field-hint mt8">Duplicate warning keys: {sourceMeta.duplicateKeys.join(' + ')}.</div>}
                  <div className="row mt8" style={{ flexWrap: 'wrap', gap: 6 }}>
                    {cfg.cols.map((col) => <span key={col} className="badge badge-neutral">{col}</span>)}
                  </div>
                </div>
              )}
              <div className="dropzone mt16" onClick={() => { toast('Sample file loaded (mock)', 'info'); setStep(2); }}>
                <Icon name="file-up" size={32} />
                <div className="mt8" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Drop import workbook here or click to browse</div>
                <div className="field-hint mt8">Mock import — a sample {cfg.target} workbook is used for this demonstration.</div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <div className="demo-banner mb16"><Icon name="info" size={14} />Saved mapping from last import applied. Review and confirm each column before validation.</div>
              <table className="tbl tbl-compact" style={{ border: '1px solid var(--border-default)', borderRadius: 6 }}>
                <thead><tr><th>Source CSV column</th><th>→</th><th>IMTRACK field</th></tr></thead>
                <tbody>{cfg.cols.map((col, i) => (
                  <tr key={col}>
                    <td className="mono">{col}</td>
                    <td style={{ textAlign: 'center' }}><Icon name="arrow-right" size={14} color="#94a3b8" /></td>
                    <td>
                      <select className="select" style={{ width: 280 }} value={mapping[i]} onChange={(e) => { const m = [...mapping]; m[i] = e.target.value === '-1' ? -1 : Number(e.target.value); setMapping(m); }}>
                        <option value="-1">— Ignore this column —</option>
                        {cfg.fields.map((f, fi) => <option key={fi} value={fi}>{f}</option>)}
                      </select>
                    </td>
                  </tr>
                ))}</tbody>
              </table>
              <div className="row mt16" style={{ justifyContent: 'flex-end', gap: 8 }}>
                <button className="btn btn-secondary" onClick={() => setStep(1)}>Back</button>
                <button className="btn btn-primary" onClick={() => setStep(3)}>Validate</button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <div className="row mb16" style={{ gap: 8, flexWrap: 'wrap' }}>
                {VALIDATION_TABS.map(([key, label, color, count]) => (
                  <button
                    key={key}
                    className="btn btn-sm"
                    onClick={() => setValidationTab(key)}
                    style={{
                      background: validationTab === key ? color : 'var(--color-slate-50)',
                      color: validationTab === key ? '#fff' : 'var(--text-secondary)',
                      borderColor: validationTab === key ? color : 'var(--border-default)',
                      fontWeight: validationTab === key ? 600 : 400,
                    }}
                  >
                    {label} ({count})
                  </button>
                ))}
              </div>
              <div className="card" style={{ overflow: 'hidden' }}>
                <div className="card-head"><span className="card-title">{VALIDATION_TABS.find(([k]) => k === validationTab)?.[2] !== 'var(--color-slate-600)' ? VALIDATION_TABS.find(([k]) => k === validationTab)?.[1] : 'Validation ' + VALIDATION_TABS.find(([k]) => k === validationTab)?.[1]}</span></div>
                {validationTab === 'create' && (
                  <table className="tbl tbl-compact">
                    <thead><tr><th>Row</th><th>Target</th><th>Key Fields</th><th>Status</th></tr></thead>
                    <tbody>
                      <tr><td className="mono">3</td><td>AC Record</td><td className="mono">SVC/2026/0001 · AC 004 · 2026-04</td><td><span className="badge badge-green">New</span></td></tr>
                      <tr><td className="mono">7</td><td>AC Record</td><td className="mono">SVC/2026/0001 · AC 005 · 2026-05</td><td><span className="badge badge-green">New</span></td></tr>
                      <tr><td className="mono">12</td><td>AC Record</td><td className="mono">SVC/2026/0003 · AC 003 · 2026-03</td><td><span className="badge badge-green">New</span></td></tr>
                      <tr><td className="mono" colSpan="4" style={{ textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-xs)' }}>+ {validation.create - 3} more…</td></tr>
                    </tbody>
                  </table>
                )}
                {validationTab === 'update' && (
                  <table className="tbl tbl-compact">
                    <thead><tr><th>Row</th><th>Target</th><th>Key Fields</th><th>Status</th></tr></thead>
                    <tbody>
                      <tr><td className="mono">5</td><td>AC Record</td><td className="mono">SVC/2026/0002 · AC 002</td><td><span className="badge badge-blue">Update</span></td></tr>
                      <tr><td className="mono">9</td><td>AC Record</td><td className="mono">SVC/2026/0004 · AC 001</td><td><span className="badge badge-blue">Update</span></td></tr>
                    </tbody>
                  </table>
                )}
                {validationTab === 'warnings' && (
                  <table className="tbl tbl-compact">
                    <thead><tr><th>Row</th><th>Field</th><th>Existing Value</th><th>Imported Value</th><th>Resolution</th></tr></thead>
                    <tbody>
                      <tr>
                        <td className="mono">14</td><td>ERP AC Amount</td>
                        <td className="mono">USD 95,000</td>
                        <td className="mono" style={{ color: 'var(--color-critical-600)', fontWeight: 600 }}>USD 96,200</td>
                        <td>
                          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>Source priority:</span>
                            <span className="badge badge-flag">Import</span>
                            <Icon name="chevron-right" size={12} color="#94a3b8" />
                            <span className="badge badge-neutral">Manual</span>
                            <select className="select" style={{ height: 28, fontSize: 12, marginLeft: 8 }}>
                              <option>Accept imported (higher priority)</option>
                              <option>Keep existing (manual override)</option>
                              <option>Create Cockpit review item</option>
                            </select>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td className="mono">22</td><td>Cash Call Period</td>
                        <td className="mono">—</td>
                        <td className="mono" style={{ color: 'var(--color-blue-600)' }}>2026-05</td>
                        <td><span className="badge badge-warning">Auto-suggested from services period</span></td>
                      </tr>
                    </tbody>
                  </table>
                )}
                {validationTab === 'errors' && (
                  <div style={{ padding: 24, textAlign: 'center' }}>
                    <Icon name="check-circle" size={32} color="#16a34a" />
                    <p style={{ margin: '8px 0 0', fontSize: 'var(--text-sm)', color: 'var(--text-secondary)' }}>No errors — all rows pass validation</p>
                  </div>
                )}
              </div>
              <div className="row mt16" style={{ justifyContent: 'flex-end', gap: 8 }}>
                <button className="btn btn-secondary" onClick={() => setStep(2)}>Back</button>
                <button className="btn btn-primary" onClick={() => setStep(4)}>Confirm Import</button>
              </div>
            </div>
          )}

          {step === 4 && (
            <div style={{ padding: '24px 0' }}>
              <div style={{ textAlign: 'center' }}>
                <Icon name="check-circle" size={48} color="#16a34a" />
                <h3 style={{ margin: '12px 0 4px' }}>Import confirmation logged</h3>
                <p className="muted">{validation.create} create actions approved · {validation.update} update actions approved · {validation.warnings} warnings resolved.</p>
                <div className="field-hint mb16">Mock import — no records were written to the demo dataset.</div>
              </div>
              <div className="card card-pad mt16" style={{ maxWidth: 500, margin: '0 auto', background: 'var(--color-slate-50)' }}>
                <div className="section-title" style={{ marginBottom: 8 }}>Import Batch Details</div>
                <table className="tbl tbl-compact" style={{ fontSize: 12 }}>
                  <tbody>
                    <tr><td style={{ color: 'var(--text-muted)' }}>Batch ID</td><td className="mono">imp_batch_{Date.now()}</td></tr>
                    <tr><td style={{ color: 'var(--text-muted)' }}>Source type</td><td>{cfg.name}</td></tr>
                    <tr><td style={{ color: 'var(--text-muted)' }}>Status</td><td><span className="badge badge-green">Confirmed</span></td></tr>
                    <tr><td style={{ color: 'var(--text-muted)' }}>Approved creates</td><td>{validation.create}</td></tr>
                    <tr><td style={{ color: 'var(--text-muted)' }}>Approved updates</td><td>{validation.update}</td></tr>
                    <tr><td style={{ color: 'var(--text-muted)' }}>Skipped</td><td>0</td></tr>
                    <tr><td style={{ color: 'var(--text-muted)' }}>Errored</td><td>{validation.errors}</td></tr>
                  </tbody>
                </table>
              </div>
              <div className="mt16" style={{ textAlign: 'center' }}>
                <button className="btn btn-primary" onClick={() => navigate(back)}>Back to {cfg.target}</button>
              </div>
            </div>
          )}
        </div>

        {/* Batch History */}
        <div className="card mt16" style={{ overflow: 'hidden' }}>
          <div className="card-head"><span className="card-title">Import Batch History</span><span className="field-hint">Previous import runs</span></div>
          {(() => {
            const batches = (store.importBatches || []).length > 0 ? store.importBatches : [
              { id: 'batch_20260607_01', sourceType: 'erp_afop', target: 'Contract AFOP', status: 'confirmed', rows: 42, createCount: 3, updateCount: 5, skipCount: 34, errorCount: 0, importedAt: '2026-06-07T10:00:00Z', importedBy: 'u1' },
              { id: 'batch_20260605_01', sourceType: 'pp', target: 'Procurement Plan', status: 'confirmed', rows: 7, createCount: 6, updateCount: 1, skipCount: 0, errorCount: 0, importedAt: '2026-06-05T09:00:00Z', importedBy: 'u1' },
            ];
            if (batches.length === 0) return <div style={{ padding: 32, textAlign: 'center' }}><Icon name="upload-cloud" size={32} color="#cbd5e1" /><div className="muted mt8">No import batches yet</div></div>;
            return (
              <table className="tbl tbl-compact">
                <thead><tr><th>Batch ID</th><th>Source</th><th>Target</th><th>Status</th><th className="num-col">Rows</th><th className="num-col">Created</th><th className="num-col">Updated</th><th>Date</th></tr></thead>
                <tbody>{batches.map((b) => (
                  <tr key={b.id}>
                    <td className="mono" style={{ fontSize: 11 }}>{b.id}</td>
                    <td><span className="badge badge-blue" style={{ fontSize: 10 }}>{b.sourceType}</span></td>
                    <td>{b.target}</td>
                    <td><span className="badge badge-green">{b.status}</span></td>
                    <td className="num-col">{b.rows}</td>
                    <td className="num-col" style={{ color: 'var(--color-green-700)' }}>{b.createCount}</td>
                    <td className="num-col" style={{ color: 'var(--color-blue-700)' }}>{b.updateCount}</td>
                    <td style={{ fontSize: 11 }}>{new Date(b.importedAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
                  </tr>
                ))}</tbody>
              </table>
            );
          })()}
        </div>
      </div>
    );
  }

  window.ImportModule = ImportModule;
})();