// ViG Command Center — editable dataset layer (CSV import / export / reset)
// Lets the cost tables be updated without code edits. Overrides persist in localStorage.
const { useState: useStateIO, useEffect: useEffectIO } = React;

window.DataIO = {
  get(key, def) { const o = LS.get('vig2_ovr_' + key, null); return o == null ? def : o; },
  set(key, val) { LS.set('vig2_ovr_' + key, val); window.dispatchEvent(new CustomEvent('vig-data-ovr', { detail: key })); },
  clear(key) { try { localStorage.removeItem('vig2_ovr_' + key); } catch (e) {} window.dispatchEvent(new CustomEvent('vig-data-ovr', { detail: key })); },
  has(key) { return LS.get('vig2_ovr_' + key, null) != null; },
};

function useOverride(key, def) {
  const [v, setV] = useStateIO(() => DataIO.get(key, def));
  useEffectIO(() => {
    const h = e => { if (e.detail === key) setV(DataIO.get(key, def)); };
    window.addEventListener('vig-data-ovr', h);
    return () => window.removeEventListener('vig-data-ovr', h);
  }, [key]);
  return v;
}

function toCSV(rows) {
  return rows.map(r => r.map(c => {
    const s = c == null ? '' : String(c);
    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
  }).join(',')).join('\n');
}
function parseCSV(text) {
  const rows = []; let row = [], cell = '', q = false;
  for (let i = 0; i < text.length; i++) {
    const ch = text[i];
    if (q) {
      if (ch === '"') { if (text[i + 1] === '"') { cell += '"'; i++; } else q = false; }
      else cell += ch;
    } else if (ch === '"') q = true;
    else if (ch === ',') { row.push(cell); cell = ''; }
    else if (ch === '\n' || ch === '\r') { if (ch === '\r' && text[i + 1] === '\n') i++; row.push(cell); rows.push(row); row = []; cell = ''; }
    else cell += ch;
  }
  if (cell !== '' || row.length) { row.push(cell); rows.push(row); }
  return rows.filter(r => r.some(c => c.trim() !== ''));
}

function downloadText(filename, text) {
  const blob = new Blob([text], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a'); a.href = url; a.download = filename; a.click();
  setTimeout(() => URL.revokeObjectURL(url), 2000);
}

/* generic IO modal — page supplies CSV serialize + parse */
function DataIOModal({ title, datasetKey, filename, currentCSV, onImport, isOverridden, onClose }) {
  const [tab, setTab] = useStateIO('export');
  const [text, setText] = useStateIO('');
  const [msg, setMsg] = useStateIO(null);

  const apply = () => {
    try {
      const rows = parseCSV(text.trim());
      if (!rows.length) throw new Error('No rows found');
      const res = onImport(rows);
      if (res && res.error) throw new Error(res.error);
      setMsg({ ok: true, text: `Imported ${res && res.n != null ? res.n : rows.length - 1} rows.` });
    } catch (e) { setMsg({ ok: false, text: e.message || 'Could not parse CSV' }); }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div onClick={onClose} className="absolute inset-0" style={{ background: 'rgba(8,8,10,.55)', backdropFilter: 'blur(3px)' }}></div>
      <div className="relative w-full max-w-xl overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-zinc-900" style={{ maxHeight: '88vh', overflowY: 'auto' }}>
        <div className="flex items-center justify-between border-b border-zinc-100 px-5 py-3.5 dark:border-zinc-800">
          <div>
            <h3 className="text-[14px] font-bold text-zinc-900 dark:text-white">{title}</h3>
            <p className="text-[11.5px] text-zinc-400">Edit in any spreadsheet, then paste back — or reset to the built-in data.</p>
          </div>
          <button onClick={onClose} className="rounded-lg p-1.5 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800"><Icon name="x" size={16} /></button>
        </div>
        <div className="flex gap-1 border-b border-zinc-100 px-5 pt-3 dark:border-zinc-800">
          {[['export', 'Export'], ['import', 'Import']].map(([id, label]) => (
            <button key={id} onClick={() => { setTab(id); setMsg(null); }} className={`-mb-px border-b-2 px-3 py-2 text-[12.5px] font-semibold transition-colors ${tab === id ? 'border-brand text-brand' : 'border-transparent text-zinc-400 hover:text-zinc-600'}`}>{label}</button>
          ))}
          {isOverridden && <span className="ml-auto self-center rounded-full bg-amber-400/15 px-2 py-0.5 text-[10.5px] font-bold uppercase tracking-wide text-amber-600 dark:text-amber-300">Edited</span>}
        </div>

        {tab === 'export' ? (
          <div className="space-y-3 p-5">
            <textarea readOnly value={currentCSV} className="h-56 w-full resize-none rounded-lg border border-zinc-200 bg-zinc-50 p-3 font-mono text-[11px] leading-relaxed text-zinc-700 outline-none dark:border-zinc-700 dark:bg-zinc-800/60 dark:text-zinc-200" />
            <div className="flex gap-2">
              <button onClick={() => downloadText(filename, currentCSV)} className="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-[12.5px] font-semibold text-white transition-all hover:brightness-110" style={{ background: 'linear-gradient(180deg,#ff7d1a,#FF6B00)' }}><Icon name="download" size={14} />Download CSV</button>
              <button onClick={() => { navigator.clipboard && navigator.clipboard.writeText(currentCSV); setMsg({ ok: true, text: 'Copied to clipboard.' }); }} className="rounded-lg border border-zinc-200 px-3.5 py-2 text-[12.5px] font-semibold text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">Copy</button>
            </div>
          </div>
        ) : (
          <div className="space-y-3 p-5">
            <textarea value={text} onChange={e => { setText(e.target.value); setMsg(null); }} placeholder="Paste CSV here (same columns as the export)…" className="h-56 w-full resize-none rounded-lg border border-zinc-200 bg-white p-3 font-mono text-[11px] leading-relaxed outline-none focus:border-brand dark:border-zinc-700 dark:bg-zinc-900" />
            <div className="flex items-center gap-2">
              <button onClick={apply} disabled={!text.trim()} className="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-[12.5px] font-semibold text-white transition-all hover:brightness-110 disabled:opacity-40" style={{ background: 'linear-gradient(180deg,#ff7d1a,#FF6B00)' }}><Icon name="check" size={14} />Apply import</button>
              <button onClick={() => setText(currentCSV)} className="rounded-lg border border-zinc-200 px-3.5 py-2 text-[12.5px] font-semibold text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">Load current</button>
              {isOverridden && <button onClick={() => { DataIO.clear(datasetKey); setMsg({ ok: true, text: 'Reset to built-in data.' }); }} className="ml-auto rounded-lg border border-rose-200 px-3.5 py-2 text-[12.5px] font-semibold text-rose-500 hover:bg-rose-50 dark:border-rose-900/50 dark:hover:bg-rose-950/30">Reset to default</button>}
            </div>
          </div>
        )}
        {msg && <div className={`mx-5 mb-5 rounded-lg px-3 py-2 text-[12px] ${msg.ok ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300' : 'bg-rose-50 text-rose-600 dark:bg-rose-950/40 dark:text-rose-300'}`}>{msg.text}</div>}
      </div>
    </div>
  );
}

/* small trigger button used in page headers */
function DataIOButton({ onClick, edited }) {
  return (
    <button onClick={onClick} className="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 px-2.5 py-1.5 text-[12px] font-semibold text-zinc-600 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">
      <Icon name="download" size={14} />Edit data{edited && <span className="h-1.5 w-1.5 rounded-full bg-amber-400"></span>}
    </button>
  );
}

Object.assign(window, { useOverride, toCSV, parseCSV, DataIOModal, DataIOButton });