// Data import page — CSV/Excel upload for stock data
const { useState: imState, useRef: imRef } = React;

function DataImport({ t, lang, role }) {
  const toast = useToast();
  const allowed = canRoleDo(role, 'stock_import');
  const fileInputRef = imRef();
  const [file, setFile] = imState(null);
  const [parsing, setParsing] = imState(false);
  const [rows, setRows] = imState(null); // array of arrays
  const [error, setError] = imState('');
  const [dragOver, setDragOver] = imState(false);
  const [imported, setImported] = imState(false);

  if (!allowed) {
    return (
      <div className="page">
        <div className="page-head">
          <div>
            <h1>{t.import_title}</h1>
            <div className="page-sub">{t.import_sub}</div>
          </div>
        </div>
        <div className="card" style={{ padding: 40, textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--bad-soft)', color: 'var(--bad)', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}>
            <Icon.Lock />
          </div>
          <h2 style={{ marginBottom: 8 }}>{t.no_permission}</h2>
          <div className="t-muted">{lang === 'th'
            ? 'เฉพาะผู้ดูแลระบบและผู้ดูแลข้อมูลเท่านั้นที่สามารถเข้าถึงหน้านี้'
            : 'Only Administrators and Super users can access this page.'}</div>
        </div>
      </div>
    );
  }

  function reset() {
    setFile(null);
    setRows(null);
    setError('');
    setImported(false);
    if (fileInputRef.current) fileInputRef.current.value = '';
  }

  function handleFile(f) {
    if (!f) return;
    setError('');
    setImported(false);
    setFile(f);
    setParsing(true);
    const reader = new FileReader();
    reader.onload = (ev) => {
      try {
        const text = String(ev.target.result || '');
        // For .xls/.xlsx we'd need a parser; for the demo, try CSV-style detection
        if (f.name.match(/\.(xls|xlsx)$/i)) {
          // Mock-parse: pretend we extracted rows from a spreadsheet
          setRows(mockExcelRows(f.name));
        } else {
          const parsed = window.parseCSV(text);
          if (!parsed.length) throw new Error('Empty file');
          setRows(parsed);
        }
      } catch (e) {
        setError(String(e.message || e));
        setRows(null);
      } finally {
        setParsing(false);
      }
    };
    reader.onerror = () => { setError('Read error'); setParsing(false); };
    if (f.name.match(/\.(xls|xlsx)$/i)) reader.readAsArrayBuffer(f);
    else reader.readAsText(f, 'UTF-8');
  }

  function mockExcelRows(name) {
    return [
      ['SKU', 'Name', 'Category', 'Unit', 'On hand', 'Unit cost', 'Reorder point'],
      ['NEW-' + Date.now().toString().slice(-5), 'Imported item A', 'parts',     'pcs', '120', '85',  '20'],
      ['NEW-' + (Date.now()+1).toString().slice(-5), 'Imported item B', 'packaging', 'pcs', '450', '12',  '50'],
      ['NEW-' + (Date.now()+2).toString().slice(-5), 'Imported item C', 'equipment', 'set', '3',   '8500','1'],
      ['NEW-' + (Date.now()+3).toString().slice(-5), 'Imported item D', 'parts',     'pcs', '0',   '320', '15']
    ];
  }

  function downloadTemplate() {
    window.exportCSV('ckw_import_template', [
      'SKU', 'Name', 'Category', 'Unit', 'On hand', 'Unit cost', 'Reorder point'
    ], [
      ['PKG-001', 'Example item', 'packaging', 'pcs', '100', '12', '20'],
      ['PRT-002', 'Spare part', 'parts', 'pcs', '50', '85', '10']
    ]);
  }

  function onDrop(e) {
    e.preventDefault();
    setDragOver(false);
    const f = e.dataTransfer.files && e.dataTransfer.files[0];
    if (f) handleFile(f);
  }

  function confirmImport() {
    setImported(true);
    toast(t.import_success);
  }

  const dataRows = rows && rows.length > 1 ? rows.slice(1) : [];
  const headers = rows && rows.length ? rows[0] : [];
  const summary = {
    total: dataRows.length,
    newCount: Math.max(0, dataRows.length - 1),
    updates: dataRows.length > 1 ? 1 : 0,
    invalid: 0
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>{t.import_title}</h1>
          <div className="page-sub">{t.import_sub}</div>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={downloadTemplate}>
            <Icon.Download className="icon icon-sm" /> {t.import_template}
          </button>
        </div>
      </div>

      {!rows && !error && (
        <div
          className={"import-drop " + (dragOver ? 'over' : '')}
          onDragOver={e => { e.preventDefault(); setDragOver(true); }}
          onDragLeave={() => setDragOver(false)}
          onDrop={onDrop}
        >
          <div className="import-drop-icon">
            <Icon.Upload />
          </div>
          <div style={{ fontSize: 18, fontWeight: 600, marginTop: 12 }}>{t.import_drop}</div>
          <div className="t-muted" style={{ fontSize: 13, marginTop: 6 }}>{t.import_supported}</div>
          <input
            ref={fileInputRef}
            type="file"
            accept=".csv,.xls,.xlsx,text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            style={{ display: 'none' }}
            onChange={e => handleFile(e.target.files && e.target.files[0])}
          />
          <button className="btn btn-primary" style={{ marginTop: 18 }} onClick={() => fileInputRef.current.click()}>
            <Icon.Upload className="icon icon-sm" /> {t.import_choose}
          </button>
        </div>
      )}

      {parsing && (
        <div className="card" style={{ padding: 24, textAlign: 'center' }}>
          <div className="login-spinner" style={{ borderTopColor: 'var(--accent)', borderColor: 'var(--border)', margin: '0 auto 12px' }}></div>
          <div className="t-muted">{lang === 'th' ? 'กำลังอ่านไฟล์...' : 'Parsing file...'}</div>
        </div>
      )}

      {error && (
        <div className="card" style={{ padding: 20 }}>
          <div className="alert" style={{ background: 'var(--bad-soft)', color: 'var(--bad)', padding: 14, borderRadius: 10, display: 'flex', gap: 10 }}>
            <Icon.AlertCircle className="icon" />
            <div>
              <div style={{ fontWeight: 600 }}>{t.import_invalid}</div>
              <div className="mono" style={{ fontSize: 13, marginTop: 4 }}>{error}</div>
            </div>
          </div>
          <button className="btn" style={{ marginTop: 14 }} onClick={reset}>
            <Icon.X className="icon icon-sm" /> {t.import_clear}
          </button>
        </div>
      )}

      {rows && !imported && (
        <>
          {/* File summary */}
          <div className="card" style={{ padding: 16, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
              <Icon.Folder />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700 }}>{file && file.name}</div>
              <div className="t-muted mono" style={{ fontSize: 12, marginTop: 2 }}>
                {file && (file.size / 1024).toFixed(1)} KB · {dataRows.length} {t.import_rows.toLowerCase()}
              </div>
            </div>
            <button className="btn btn-ghost" onClick={reset}><Icon.X className="icon icon-sm" /> {t.import_clear}</button>
          </div>

          {/* Summary KPIs */}
          <div className="grid grid-4" style={{ marginBottom: 16 }}>
            <SummaryCard label={t.import_rows} value={summary.total} color="var(--ink-2)" />
            <SummaryCard label={t.import_new} value={summary.newCount} color="var(--ok)" />
            <SummaryCard label={t.import_update} value={summary.updates} color="var(--info)" />
            <SummaryCard label={t.import_invalid} value={summary.invalid} color={summary.invalid > 0 ? 'var(--bad)' : 'var(--ink-3)'} />
          </div>

          {/* Preview table */}
          <div className="card" style={{ overflow: 'hidden' }}>
            <div className="card-header">
              <h2>{t.import_preview}</h2>
              <span className="chip" style={{ marginLeft: 8 }}>{dataRows.length} {t.import_rows.toLowerCase()}</span>
            </div>
            <div style={{ overflowX: 'auto', maxHeight: 360 }}>
              <table className="tbl">
                <thead><tr>{headers.map((h, i) => <th key={i}>{h}</th>)}</tr></thead>
                <tbody>
                  {dataRows.slice(0, 20).map((row, ri) => (
                    <tr key={ri}>
                      {row.map((cell, ci) => <td key={ci} className={ci === 0 ? 'mono' : ''}>{cell}</td>)}
                    </tr>
                  ))}
                </tbody>
              </table>
              {dataRows.length > 20 && (
                <div className="t-muted" style={{ padding: 12, fontSize: 12.5, textAlign: 'center' }}>
                  {lang === 'th' ? `แสดง 20 จาก ${dataRows.length} แถว` : `Showing 20 of ${dataRows.length} rows`}
                </div>
              )}
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, padding: 16, borderTop: '1px solid var(--border)' }}>
              <button className="btn" onClick={reset}>{t.import_clear}</button>
              <button className="btn btn-primary" onClick={confirmImport}>
                <Icon.Check className="icon icon-sm" /> {t.import_confirm}
              </button>
            </div>
          </div>
        </>
      )}

      {imported && (
        <div className="card" style={{ padding: 32, textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--ok-soft)', color: 'var(--ok)', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}>
            <Icon.Check />
          </div>
          <h2 style={{ marginBottom: 6 }}>{t.import_success}</h2>
          <div className="t-muted" style={{ marginBottom: 18 }}>
            {lang === 'th'
              ? `เพิ่ม ${dataRows.length} รายการเข้าระบบเรียบร้อย`
              : `${dataRows.length} rows added to the stock system.`}
          </div>
          <button className="btn btn-primary" onClick={reset}>
            <Icon.Upload className="icon icon-sm" /> {lang === 'th' ? 'นำเข้าไฟล์ใหม่' : 'Import another file'}
          </button>
        </div>
      )}

      {/* Recent imports */}
      {!rows && !error && (
        <div className="card" style={{ marginTop: 20 }}>
          <div className="card-header"><h2>{t.import_recent}</h2></div>
          <div className="card-body t-muted" style={{ fontSize: 13 }}>
            {t.import_no_recent}
          </div>
        </div>
      )}
    </div>
  );
}

function SummaryCard({ label, value, color }) {
  return (
    <div className="card" style={{ padding: 16 }}>
      <div className="t-muted" style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '.05em' }}>{label}</div>
      <div style={{ fontSize: 28, fontWeight: 700, marginTop: 4, color }}>{value}</div>
    </div>
  );
}

window.DataImport = DataImport;