// import-useri.jsx — importul lunar care repara userii schimbati.
//
// Creatorii isi schimba userul de TikTok des. ID-ul lor din backstage nu se schimba.
// Deci: se incarca Excelul cu perechile (ID, user), iar unde ID-ul e cunoscut si
// userul difera, panoul il rescrie si tine minte cum se numea inainte.
//
// Biblioteca de citit Excel (SheetJS) are ~900 KB si se incarca DOAR cand deschizi
// fereastra de import — o data pe luna, nu la fiecare intrare in panou.
//
// Expune: window.ImportHandlesModal({ influencers, profile, onClose, onDone })

const { useState: useStateIM, useRef: useRefIM } = React;

const XLSX_CDN = 'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js';

function loadXlsx() {
  return new Promise((resolve, reject) => {
    if (window.XLSX) { resolve(window.XLSX); return; }
    const s = document.createElement('script');
    s.src = XLSX_CDN;
    s.onload = () => window.XLSX ? resolve(window.XLSX) : reject(new Error('Biblioteca nu s-a încărcat.'));
    s.onerror = () => reject(new Error('Nu am putut încărca biblioteca de Excel. Verifică internetul.'));
    document.head.appendChild(s);
  });
}

// Ghicim care coloana e ID-ul si care e userul, dupa cum se numeste capul de tabel.
// Daca ghicim gresit, colegul schimba din doua dropdown-uri.
function guessColumns(headers) {
  const norm = (h) => String(h || '').toLowerCase().replace(/[\s_-]/g, '');
  const idWords = ['id', 'backstageid', 'creatorid', 'uniqueid', 'userid', 'idunic'];
  const handleWords = ['handle', 'user', 'username', 'cont', 'tiktok', 'nickname', 'account'];

  let idCol = '', handleCol = '';
  headers.forEach(h => {
    const n = norm(h);
    if (!idCol && idWords.some(w => n === w || n.indexOf(w) !== -1)) idCol = h;
  });
  headers.forEach(h => {
    const n = norm(h);
    if (h === idCol) return;
    if (!handleCol && handleWords.some(w => n === w || n.indexOf(w) !== -1)) handleCol = h;
  });
  return { idCol: idCol || headers[0] || '', handleCol: handleCol || headers[1] || '' };
}

function ImportHandlesModal({ influencers, profile, onClose, onDone }) {
  const [step, setStep] = useStateIM('alege');   // alege -> mapare -> confirmare -> gata
  const [busy, setBusy] = useStateIM(false);
  const [errorMsg, setErrorMsg] = useStateIM('');
  const [fileName, setFileName] = useStateIM('');
  const [headers, setHeaders] = useStateIM([]);
  const [rows, setRows] = useStateIM([]);
  const [idCol, setIdCol] = useStateIM('');
  const [handleCol, setHandleCol] = useStateIM('');
  const [result, setResult] = useStateIM(null);
  const fileRef = useRefIM(null);

  // Cautam creatorii dupa ID, nu dupa nume. ID-ul e singurul care nu se schimba.
  const byBackstageId = {};
  influencers.forEach(i => {
    const bid = (i.backstage_id || '').toString().trim().toLowerCase();
    if (bid) byBackstageId[bid] = i;
  });

  // Problema primei rulari: nimeni nu are inca ID-ul completat, deci nu avem dupa ce
  // potrivi. Solutia — la primul import ii recunoastem dupa userul de acum si le
  // scriem ID-ul. De la a doua rulare incolo, ID-ul face toata treaba, chiar daca
  // userul s-a schimbat intre timp.
  const byHandle = {};
  influencers.forEach(i => {
    const h = (i.tiktok_handle || '').toString().trim().toLowerCase();
    if (h && !byHandle[h]) byHandle[h] = i;
  });

  const handleFile = async (file) => {
    if (!file) return;
    setBusy(true); setErrorMsg('');
    try {
      const XLSX = await loadXlsx();
      const buf = await file.arrayBuffer();
      const wb = XLSX.read(buf, { type: 'array' });
      const sheet = wb.Sheets[wb.SheetNames[0]];
      const data = XLSX.utils.sheet_to_json(sheet, { defval: '' });
      if (data.length === 0) throw new Error('Fișierul pare gol sau nu are un cap de tabel.');

      const hdrs = Object.keys(data[0]);
      const guess = guessColumns(hdrs);
      setFileName(file.name);
      setHeaders(hdrs);
      setRows(data);
      setIdCol(guess.idCol);
      setHandleCol(guess.handleCol);
      setStep('mapare');
    } catch (e) {
      setErrorMsg(e.message || 'Nu am putut citi fișierul.');
    }
    setBusy(false);
  };

  // Ce s-ar schimba daca am apasa "aplica". Nimic nu se scrie inca.
  const analiza = () => {
    const deActualizat = [];   // ID cunoscut, user diferit -> rescriem userul
    const deLegat = [];        // ID nou, dar recunoastem userul -> ii scriem ID-ul
    const neschimbate = [];
    const necunoscute = [];
    const faraId = [];
    const luate = {};          // ca doua randuri sa nu lege acelasi creator

    rows.forEach((r, idx) => {
      const rawId = String(r[idCol] == null ? '' : r[idCol]).trim();
      const rawHandle = String(r[handleCol] == null ? '' : r[handleCol]).trim();
      const newHandle = window.normHandle ? window.normHandle(rawHandle) : rawHandle.replace(/^@+/, '');

      if (!rawId) { faraId.push({ rand: idx + 2, handle: rawHandle || '(gol)' }); return; }
      if (!newHandle) { faraId.push({ rand: idx + 2, handle: '(user gol)' }); return; }

      const inf = byBackstageId[rawId.toLowerCase()];

      if (inf) {
        const oldHandle = (inf.tiktok_handle || '').trim();
        if (oldHandle.toLowerCase() === newHandle.toLowerCase()) neschimbate.push(inf.id);
        else deActualizat.push({ inf, oldHandle, newHandle, backstageId: rawId });
        return;
      }

      // ID necunoscut: poate e primul import si creatorul e la noi, doar ca fara ID.
      const dupaUser = byHandle[newHandle.toLowerCase()];
      if (dupaUser && !(dupaUser.backstage_id || '').toString().trim() && !luate[dupaUser.id]) {
        luate[dupaUser.id] = true;
        deLegat.push({ inf: dupaUser, newHandle, backstageId: rawId });
        return;
      }

      necunoscute.push({ rand: idx + 2, id: rawId, handle: newHandle });
    });

    return { deActualizat, deLegat, neschimbate, necunoscute, faraId };
  };

  const a = (step === 'confirmare' || step === 'mapare') && idCol && handleCol ? analiza() : null;

  const aplica = async () => {
    setBusy(true); setErrorMsg('');
    const { deActualizat, deLegat } = analiza();
    let ok = 0;
    let legate = 0;
    const esuate = [];

    // Intai legam ID-urile: e o operatie care nu schimba nimic vizibil, dar face ca
    // importurile viitoare sa functioneze.
    for (const item of deLegat) {
      try {
        const { error } = await window.sb
          .from('influencer_applications')
          .update({ backstage_id: item.backstageId })
          .eq('id', item.inf.id);
        if (error) throw error;
        legate++;
      } catch (e) {
        esuate.push({ nume: item.inf.full_name, motiv: e.message || 'eroare la legare' });
      }
    }

    for (const item of deActualizat) {
      try {
        const { error: upErr } = await window.sb
          .from('influencer_applications')
          .update({ tiktok_handle: item.newHandle })
          .eq('id', item.inf.id);
        if (upErr) throw upErr;
        // Istoricul se scrie singur, dintr-un trigger din baza de date (vezi sql/13).
        // Asa prinde si schimbarile facute manual, nu doar importul.
        ok++;
      } catch (e) {
        esuate.push({ nume: item.inf.full_name, motiv: e.message || 'eroare' });
      }
    }

    // Tinem minte ca s-a facut. De aici stie panoul sa aminteasca luna viitoare.
    const { neschimbate, necunoscute } = analiza();
    try {
      await window.sb.from('handle_import_runs').insert({
        ran_by: profile ? profile.id : null,
        ran_by_name: profile ? profile.full_name : null,
        file_name: fileName,
        total_rows: rows.length,
        updated_count: ok,
        linked_count: legate,
        unchanged_count: neschimbate.length,
        unknown_count: necunoscute.length,
      });
    } catch (e) { /* evidenta nu trebuie sa blocheze importul */ }

    setResult({ actualizati: ok, legate, esuate });
    setStep('gata');
    setBusy(false);
  };

  const selectStyle = { width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' };
  const darkOpt = { backgroundColor: '#1a1a1a' };

  return (
    <div className="ma-modal-wrap" onClick={busy ? undefined : onClose} style={{ position: 'fixed', inset: 0, zIndex: 250, display: 'grid', placeItems: 'center', background: 'rgba(0,0,0,.7)', backdropFilter: 'blur(6px)', padding: 16 }}>
      <div className="ma-modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 780, width: '100%', maxHeight: '88vh', overflow: 'auto', background: '#0a0a0a', border: '.5px solid var(--line)', borderRadius: 16, padding: 32 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
          <h2 className="display" style={{ fontSize: 20, margin: 0 }}>Import useri din Excel</h2>
          <button onClick={onClose} disabled={busy} style={{ background: 'transparent', border: 'none', color: 'var(--txt-2)', fontSize: 22, cursor: busy ? 'not-allowed' : 'pointer' }}>✕</button>
        </div>
        <p style={{ fontSize: 12, color: 'var(--txt-3)', margin: '0 0 24px', lineHeight: 1.6 }}>
          Creatorii își schimbă userul, dar ID-ul din backstage rămâne același.
          Încarcă exportul lunar, iar userii schimbați se rescriu singuri.
        </p>

        {/* PASUL 1 — fisierul */}
        {step === 'alege' && (
          <React.Fragment>
            <div
              onClick={() => !busy && fileRef.current && fileRef.current.click()}
              style={{
                border: '2px dashed rgba(82,242,15,.3)', borderRadius: 10, padding: '40px 20px',
                textAlign: 'center', cursor: busy ? 'not-allowed' : 'pointer', background: 'rgba(82,242,15,.02)',
              }}
            >
              <input ref={fileRef} type="file" accept=".xlsx,.xls,.csv" style={{ display: 'none' }}
                onChange={e => handleFile(e.target.files && e.target.files[0])} />
              <div style={{ fontSize: 30, marginBottom: 8 }}>{busy ? '⏳' : '📄'}</div>
              <div style={{ fontSize: 14, fontWeight: 500, color: busy ? 'var(--txt-3)' : 'var(--txt-1)' }}>
                {busy ? 'Se citește fișierul...' : 'Click pentru a alege fișierul'}
              </div>
              <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 6 }}>Excel (.xlsx, .xls) sau CSV</div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 16, lineHeight: 1.6 }}>
              Fișierul are nevoie de două coloane: una cu <strong>ID-ul unic</strong> și una cu <strong>userul</strong>.
              Pot fi oriunde în tabel și se pot numi oricum — le alegi tu la pasul următor.
            </div>
          </React.Fragment>
        )}

        {/* PASUL 2 — care coloana e care */}
        {step === 'mapare' && (
          <React.Fragment>
            <div style={{ fontSize: 12, color: 'var(--txt-2)', marginBottom: 16 }}>
              <strong style={{ color: 'var(--txt-0)' }}>{fileName}</strong> · {rows.length} rânduri
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12, marginBottom: 20 }}>
              <div>
                <div style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '.08em', marginBottom: 6, textTransform: 'uppercase' }}>Coloana cu ID-ul unic</div>
                <select value={idCol} onChange={e => setIdCol(e.target.value)} className="input" style={selectStyle}>
                  {headers.map(h => <option key={h} value={h} style={darkOpt}>{h}</option>)}
                </select>
              </div>
              <div>
                <div style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '.08em', marginBottom: 6, textTransform: 'uppercase' }}>Coloana cu userul</div>
                <select value={handleCol} onChange={e => setHandleCol(e.target.value)} className="input" style={selectStyle}>
                  {headers.map(h => <option key={h} value={h} style={darkOpt}>{h}</option>)}
                </select>
              </div>
            </div>

            {/* Primele randuri, ca sa se vada ca am nimerit coloanele */}
            <div style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '.08em', marginBottom: 6, textTransform: 'uppercase' }}>Primele rânduri</div>
            <div style={{ border: '.5px solid var(--line)', borderRadius: 8, overflow: 'hidden', marginBottom: 20 }}>
              {rows.slice(0, 4).map((r, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, padding: '8px 12px', fontSize: 12, borderTop: i ? '.5px solid var(--line)' : 'none' }}>
                  <span className="mono" style={{ color: 'var(--txt-2)', minWidth: 140 }}>{String(r[idCol] || '—')}</span>
                  <span style={{ color: 'var(--txt-1)' }}>{String(r[handleCol] || '—')}</span>
                </div>
              ))}
            </div>

            <button onClick={() => setStep('confirmare')} disabled={!idCol || !handleCol || idCol === handleCol} className="btn btn-primary"
              style={{ width: '100%', opacity: (!idCol || !handleCol || idCol === handleCol) ? .5 : 1 }}>
              Vezi ce se schimbă →
            </button>
            {idCol === handleCol && (
              <div style={{ fontSize: 11, color: '#FFD700', marginTop: 8 }}>Alege două coloane diferite.</div>
            )}
          </React.Fragment>
        )}

        {/* PASUL 3 — ce se schimba, inainte sa se schimbe */}
        {step === 'confirmare' && a && (
          <React.Fragment>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))', gap: 10, marginBottom: 20 }}>
              <SumarIM label="De actualizat" value={a.deActualizat.length} color="var(--accent-1)" />
              <SumarIM label="Primesc ID" value={a.deLegat.length} color="#3FA9F5" />
              <SumarIM label="Neschimbate" value={a.neschimbate.length} color="var(--txt-2)" />
              <SumarIM label="Nu sunt în panou" value={a.necunoscute.length} color="var(--txt-3)" />
              <SumarIM label="Rânduri sărite" value={a.faraId.length} color="var(--txt-3)" />
            </div>

            {a.deLegat.length > 0 && (
              <div style={{ marginBottom: 16, padding: '12px 14px', borderRadius: 8, background: 'rgba(63,169,245,.08)', border: '.5px solid rgba(63,169,245,.3)', fontSize: 12, color: 'var(--txt-2)', lineHeight: 1.6 }}>
                <strong style={{ color: '#3FA9F5' }}>{a.deLegat.length} creatori primesc ID-ul lor.</strong> I-am recunoscut după userul de acum.
                Userul nu li se schimbă — doar învață sistemul cine sunt, ca la importurile următoare să-i găsească după ID chiar dacă și-au schimbat userul.
              </div>
            )}

            {a.deActualizat.length === 0 && a.deLegat.length === 0 ? (
              <div style={{ padding: 28, textAlign: 'center', color: 'var(--txt-3)', fontSize: 13, lineHeight: 1.6 }}>
                Nimic de făcut. Totul e deja la zi.
              </div>
            ) : a.deActualizat.length === 0 ? null : (
              <React.Fragment>
                <div style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '.08em', marginBottom: 6, textTransform: 'uppercase' }}>
                  Userii care se rescriu
                </div>
                <div style={{ maxHeight: 260, overflowY: 'auto', border: '.5px solid var(--line)', borderRadius: 8, marginBottom: 16 }}>
                  {a.deActualizat.map((item, i) => (
                    <div key={item.inf.id} style={{ padding: '10px 12px', borderTop: i ? '.5px solid var(--line)' : 'none', fontSize: 12 }}>
                      <div style={{ fontWeight: 600, marginBottom: 2 }}>{item.inf.full_name}</div>
                      <div style={{ color: 'var(--txt-3)' }}>
                        <span style={{ textDecoration: 'line-through' }}>@{item.oldHandle || '—'}</span>
                        <span style={{ margin: '0 8px', color: 'var(--accent-1)' }}>→</span>
                        <strong style={{ color: 'var(--accent-1)' }}>@{item.newHandle}</strong>
                        <span className="mono" style={{ marginLeft: 10, opacity: .7 }}>ID {item.backstageId}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </React.Fragment>
            )}

            {a.necunoscute.length > 0 && (
              <details style={{ marginBottom: 16 }}>
                <summary style={{ fontSize: 12, color: 'var(--txt-3)', cursor: 'pointer' }}>
                  {a.necunoscute.length} din fișier nu sunt înscriși pe site — normal, se ignoră
                </summary>
                <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 8, lineHeight: 1.6, paddingBottom: 6 }}>
                  Agenția are mult mai mulți creatori decât cei înscriși pentru social media.
                  Importul nu creează niciodată creatori noi — se atinge doar de cei care există deja aici.
                </div>
                <div style={{ marginTop: 8, maxHeight: 140, overflowY: 'auto', fontSize: 11, color: 'var(--txt-3)' }}>
                  {a.necunoscute.slice(0, 50).map((n, i) => (
                    <div key={i} className="mono">rând {n.rand} · ID {n.id} · @{n.handle}</div>
                  ))}
                  {a.necunoscute.length > 50 && <div style={{ marginTop: 4 }}>...și încă {a.necunoscute.length - 50}</div>}
                </div>
              </details>
            )}

            {errorMsg && <div style={{ marginBottom: 12, padding: '10px 12px', borderRadius: 8, background: 'rgba(255,90,90,.08)', border: '.5px solid rgba(255,100,100,.3)', fontSize: 12, color: 'var(--txt-2)' }}>⚠️ {errorMsg}</div>}

            <div style={{ display: 'flex', gap: 10 }}>
              <button onClick={() => setStep('mapare')} disabled={busy} className="btn btn-glass" style={{ flex: 1 }}>← Înapoi</button>
              <button onClick={aplica} disabled={busy || (a.deActualizat.length === 0 && a.deLegat.length === 0)} className="btn btn-primary"
                style={{ flex: 2, opacity: (busy || (a.deActualizat.length === 0 && a.deLegat.length === 0)) ? .5 : 1 }}>
                {busy ? 'Se lucrează...' : 'Aplică (' + (a.deActualizat.length + a.deLegat.length) + ')'}
              </button>
            </div>
          </React.Fragment>
        )}

        {/* PASUL 4 — gata */}
        {step === 'gata' && result && (
          <React.Fragment>
            <div style={{ padding: 28, textAlign: 'center' }}>
              <div style={{ fontSize: 34, marginBottom: 10 }}>✓</div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6 }}>
                {result.actualizati} {result.actualizati === 1 ? 'user actualizat' : 'useri actualizați'}
                {result.legate > 0 && ', ' + result.legate + ' creatori au primit ID'}
              </div>
              <div style={{ fontSize: 12, color: 'var(--txt-3)', lineHeight: 1.6 }}>
                Userii vechi rămân în istoric — poți găsi în continuare un creator după cum se numea înainte.
                {result.legate > 0 && ' De la următorul import, cei legați acum vor fi găsiți după ID.'}
              </div>
            </div>
            {result.esuate.length > 0 && (
              <div style={{ padding: '10px 12px', borderRadius: 8, background: 'rgba(255,90,90,.08)', border: '.5px solid rgba(255,100,100,.3)', fontSize: 12, color: 'var(--txt-2)', marginBottom: 16 }}>
                <strong>{result.esuate.length} nu s-au putut actualiza:</strong>
                {result.esuate.slice(0, 5).map((e, i) => <div key={i} style={{ marginTop: 4 }}>{e.nume} — {e.motiv}</div>)}
              </div>
            )}
            <button onClick={onDone} className="btn btn-primary" style={{ width: '100%' }}>Gata</button>
          </React.Fragment>
        )}

        {step === 'alege' && errorMsg && (
          <div style={{ marginTop: 16, padding: '10px 12px', borderRadius: 8, background: 'rgba(255,90,90,.08)', border: '.5px solid rgba(255,100,100,.3)', fontSize: 12, color: 'var(--txt-2)' }}>⚠️ {errorMsg}</div>
        )}
      </div>
    </div>
  );
}

function SumarIM({ label, value, color }) {
  return (
    <div style={{ padding: '12px 14px', borderRadius: 8, background: 'rgba(255,255,255,.02)', border: '.5px solid var(--line)' }}>
      <div style={{ fontSize: 10, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{label}</div>
      <div style={{ fontSize: 20, fontWeight: 700, color: color, marginTop: 2 }}>{value}</div>
    </div>
  );
}

// Memento pentru adminii care fac importul. Apare doar daca luna curenta n-are
// inca o rulare — si doar la admini, ca nu are ce face un coleg cu el.
function ImportReminder({ profile, onGo }) {
  const [state, setState] = useStateIM(null);   // null = inca nu stim

  React.useEffect(() => {
    if (!profile || profile.role !== 'admin') { setState({ show: false }); return; }
    (async () => {
      const { data, error } = await window.sb
        .from('handle_import_runs')
        .select('ran_at, ran_by_name')
        .order('ran_at', { ascending: false })
        .limit(1);
      if (error) { setState({ show: false }); return; }

      const ultima = (data && data[0]) ? new Date(data[0].ran_at) : null;
      const acum = new Date();
      const inLunaAsta = ultima
        && ultima.getFullYear() === acum.getFullYear()
        && ultima.getMonth() === acum.getMonth();

      setState({ show: !inLunaAsta, ultima, cine: data && data[0] ? data[0].ran_by_name : null });
    })();
  }, [profile && profile.id]);

  if (!state || !state.show) return null;

  const luna = new Date().toLocaleDateString('ro-RO', { month: 'long' });

  return (
    <div style={{
      marginBottom: 20, padding: '14px 18px', borderRadius: 12,
      background: 'rgba(255,215,0,.06)', border: '1px solid rgba(255,215,0,.25)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap',
    }}>
      <div>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent-2)' }}>
          Importul de useri pe {luna} nu s-a făcut încă
        </div>
        <div style={{ fontSize: 12, color: 'var(--txt-3)', marginTop: 2, lineHeight: 1.5 }}>
          {state.ultima
            ? 'Ultimul import: ' + state.ultima.toLocaleDateString('ro-RO') + (state.cine ? ' · ' + state.cine : '')
            : 'Nu s-a făcut niciodată. Primul import leagă creatorii de ID-urile lor.'}
        </div>
      </div>
      {onGo && <button onClick={onGo} className="btn btn-glass" style={{ whiteSpace: 'nowrap' }}>Fă importul acum</button>}
    </div>
  );
}

window.ImportHandlesModal = ImportHandlesModal;
window.ImportReminder = ImportReminder;