// ── Instagram Analytics ─────────────────────────────────────
// Funnel (stades des comptes) + tableau des comptes + détail des reels (vignette, vues, likes,
// commentaires, engagement). Données scrapées via 1 compte connecté (backend ig_scraper).

const IG_STAGES = ["En attente", "Jour 1", "Jour 2", "Jour 3", "Jour 4+", "💎 Diamant"];
const IG_STAGE_COLOR = {
  "En attente": "#8b949e", "Jour 1": "#58a6ff", "Jour 2": "#3fb0ff", "Jour 3": "#1dbab4",
  "Jour 4+": "#d2a8ff", "💎 Diamant": "#f0c674",
};

function igStageOf(acc, diamantViews) {
  const avg = acc.avg_views || 0;
  if (acc.updated && avg >= (diamantViews || 10000)) return "💎 Diamant";
  const cat = (acc.category || "").toLowerCase();
  if (!acc.updated || cat.indexOf("attente") >= 0) return "En attente";
  const created = acc.created ? Date.parse(acc.created) : 0;
  if (!created) return "En attente";
  const days = Math.floor((Date.now() - created) / 86400000);
  if (days < 1) return "Jour 1";
  if (days < 2) return "Jour 2";
  if (days < 3) return "Jour 3";
  return "Jour 4+";
}

function igIsPlug(v) { return v === true || ["plug", "true", "1", "oui", "yes"].indexOf(String(v).trim().toLowerCase()) >= 0; }
function igScrapeable(a, scope) {
  const plugged = igIsPlug(a.ig_plug);
  const cat = (a.category || "").toLowerCase();
  const activeCat = !!cat && cat.indexOf("attente") < 0;
  if (scope === "all") return true;
  if (scope === "plug") return plugged;
  return plugged || activeCat;   // "active"
}
function igFmt(n) {
  n = n || 0;
  if (n >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
  if (n >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, "") + "k";
  return String(n);
}
function igAgo(ts) {
  if (!ts) return "jamais";
  const s = Math.floor(Date.now() / 1000 - ts);
  if (s < 60) return "à l'instant";
  if (s < 3600) return Math.floor(s / 60) + " min";
  if (s < 86400) return Math.floor(s / 3600) + " h";
  return Math.floor(s / 86400) + " j";
}

function IgAnalytics() {
  const { useState, useEffect, useRef } = React;
  const [data, setData] = useState(null);
  const [openCfg, setOpenCfg] = useState(false);
  const [detail, setDetail] = useState(null);   // compte dont on voit les reels
  const [saving, setSaving] = useState(false);
  const pollRef = useRef(null);

  const fetchOverview = async () => { const r = await window.Backend.igOverview(); setData(r || {}); return r; };
  useEffect(() => { fetchOverview(); }, []);
  // poll pendant qu'un refresh OU une connexion navigateur tourne
  const jobRunning = data && data.job && data.job.state === "running";
  const loginRunning = data && data.login && data.login.state === "running";
  const polling = jobRunning || loginRunning;
  useEffect(() => {
    if (!polling) { if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; } return; }
    pollRef.current = setInterval(fetchOverview, 3000);
    return () => { if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; } };
  }, [polling]);

  if (!data) return <div style={{ padding: 40, color: "var(--muted)" }}>Chargement…</div>;
  const cfg = data.config || {};
  const statsAcc = (data.stats && data.stats.accounts) || {};
  const job = data.job || {};
  const diamant = cfg.diamant_views || 10000;
  const scope = cfg.scope || "active";

  // SOURCE DE VÉRITÉ = le Stockage de comptes (front, avec la coche IG Plug + attribution cloud).
  // Repli sur la copie backend si le store n'est pas chargé (ex: aperçu isolé).
  const store = (window.AccountCreationStore && window.AccountCreationStore.load) ? window.AccountCreationStore.load() : [];
  const srcAccounts = (store && store.length)
    ? store.filter(a => a.username).map(a => ({ username: a.username, category: a.category || "", nom: a.nom || "",
        ig_plug: !!a.ig_plug, cloud_attribue: a.cloud_attribue || "", created: a.saved_at || "" }))
    : (data.accounts || []);

  // fusion : comptes du stockage + leurs stats scrapées
  const rows = srcAccounts.map(a => ({ ...a, ...(statsAcc[a.username] || {}) }))
    .map(a => ({ ...a, stage: igStageOf(a, diamant) }));
  const toScrape = srcAccounts.filter(a => igScrapeable(a, scope));   // comptes qui seront scrapés (selon la coche + scope)
  const avail = srcAccounts;
  const scraped = rows.filter(r => r.updated);
  const counts = {}; IG_STAGES.forEach(s => counts[s] = 0);
  rows.forEach(r => { counts[r.stage] = (counts[r.stage] || 0) + 1; });
  const totalReels = scraped.reduce((s, r) => s + (r.reels_count || 0), 0);
  const totalFollowers = scraped.reduce((s, r) => s + (r.followers || 0), 0);

  const login = data.login || {};
  const saveCfg = async (patch) => {
    setSaving(true);
    const r = await window.Backend.igSaveConfig({ ...cfg, ...patch });
    setSaving(false);
    if (r && r.config) setData(d => ({ ...d, config: r.config }));
  };
  const refresh = async () => { await window.Backend.igRefresh(null, toScrape.map(a => a.username)); fetchOverview(); };
  const browserLogin = async () => { await window.Backend.igBrowserLogin(); fetchOverview(); };

  const noScraper = !cfg.account;

  return (
    <div>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 6, flexWrap: "wrap" }}>
        <h1 style={{ margin: 0, fontSize: 24, fontWeight: 700, letterSpacing: "-.01em" }}>📸 Instagram</h1>
        <span style={{ fontSize: 12.5, color: "var(--muted)" }}>{scraped.length}/{rows.length} scrapés · <b style={{ color: "var(--accent)" }}>{toScrape.length}</b> à scraper (IG Plug) · {igFmt(totalReels)} reels · {igFmt(totalFollowers)} abonnés</span>
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <span style={{ fontSize: 11.5, color: "var(--faint)" }}>Maj : {igAgo(data.stats && data.stats.updated)}</span>
          <button onClick={() => setOpenCfg(o => !o)} style={ghostBtn}>⚙️ Réglages</button>
          <button onClick={refresh} disabled={jobRunning || noScraper || toScrape.length === 0}
            title={noScraper ? "Configure d'abord un compte scraper" : toScrape.length === 0 ? "Aucun compte IG Plug à scraper" : ""}
            style={{ ...primaryBtn, opacity: (jobRunning || noScraper || toScrape.length === 0) ? .55 : 1, cursor: (jobRunning || noScraper || toScrape.length === 0) ? "default" : "pointer" }}>
            {jobRunning ? `⏳ Scrape ${job.done || 0}/${job.total || "?"}` : "🔄 Rafraîchir"}
          </button>
        </span>
      </div>
      <div style={{ fontSize: 12, color: "var(--faint)", marginBottom: 18 }}>Stats publiques (vues, likes, commentaires, engagement) rafraîchies au bouton ou auto toutes les 6 h.</div>

      {/* Bandeau job / erreur */}
      {job.state === "running" && <div style={{ ...banner, borderColor: "rgba(88,166,255,.4)" }}>
        ⏳ Scraping en cours… <b>{job.current}</b> ({job.done}/{job.total})
      </div>}
      {job.state === "error" && <div style={{ ...banner, borderColor: "rgba(248,81,73,.45)", color: "#f85149" }}>⚠️ {job.error}</div>}
      {login.state === "running" && <div style={{ ...banner, borderColor: "rgba(88,166,255,.4)", color: "#79c0ff" }}>
        🌐 Connexion navigateur en cours pour <b>@{login.account}</b>… une fenêtre <b>Chromium</b> s'est ouverte : complète l'éventuelle vérification (code, « c'est bien moi »). La session se sauvegarde toute seule dès que t'es connecté.
      </div>}
      {login.state === "done" && <div style={{ ...banner, borderColor: "rgba(63,185,80,.4)", color: "#3fb950" }}>✅ Session scraper établie — tu peux lancer 🔄 Rafraîchir.</div>}
      {login.state === "error" && <div style={{ ...banner, borderColor: "rgba(248,81,73,.45)", color: "#f85149" }}>⚠️ Connexion navigateur échouée : {login.error}</div>}
      {noScraper && <div style={{ ...banner, borderColor: "rgba(240,198,116,.45)", color: "#f0c674" }}>
        ⚙️ Choisis un <b>compte scraper</b> dans les Réglages pour lancer la collecte.
      </div>}
      {!noScraper && toScrape.length === 0 && <div style={{ ...banner, borderColor: "rgba(240,198,116,.45)", color: "#f0c674" }}>
        ⚠️ <b>0 compte à scraper</b> : aucun compte n'a la coche <b>IG Plug</b> (filtre « {scope} »). Plugge des comptes dans le Stockage, ou passe « Comptes à scraper » sur <b>Tous</b> dans les Réglages.
      </div>}

      {/* Réglages */}
      {openCfg && <IgSettings cfg={cfg} avail={avail} saving={saving} onSave={saveCfg} login={login} onBrowserLogin={browserLogin} />}

      {/* Funnel horizontal des stades */}
      <div style={{ display: "flex", gap: 8, marginBottom: 22, flexWrap: "wrap" }}>
        {IG_STAGES.map((s, i) => (
          <div key={s} style={{ flex: "1 1 130px", minWidth: 120, position: "relative", background: "var(--surface)", border: "1px solid var(--border)",
            borderLeft: "4px solid " + IG_STAGE_COLOR[s], borderRadius: 10, padding: "12px 14px" }}>
            <div style={{ fontSize: 11.5, color: "var(--muted)", fontWeight: 700 }}>{s}</div>
            <div style={{ fontSize: 26, fontWeight: 800, color: IG_STAGE_COLOR[s], lineHeight: 1.2 }}>{counts[s] || 0}</div>
            <div style={{ fontSize: 10, color: "var(--faint)" }}>compte{(counts[s] || 0) > 1 ? "s" : ""}</div>
            {i < IG_STAGES.length - 1 && <span style={{ position: "absolute", right: -11, top: "50%", transform: "translateY(-50%)", color: "var(--faint)", fontSize: 16, zIndex: 1 }}>›</span>}
          </div>
        ))}
      </div>

      {/* Tableau des comptes */}
      <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 12, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr .9fr .8fr .9fr .9fr 1fr .6fr", gap: 8, padding: "10px 14px", fontSize: 11, fontWeight: 700, color: "var(--faint)", borderBottom: "1px solid var(--border)", textTransform: "uppercase", letterSpacing: ".04em" }}>
          <span>Compte</span><span>Stade</span><span>Abonnés</span><span>Reels</span><span>Vues moy.</span><span>Engagement</span><span></span>
        </div>
        {rows.sort((a, b) => (b.avg_views || 0) - (a.avg_views || 0)).map(r => {
          const eng = r.reels && r.reels.length ? (r.reels.reduce((s, x) => s + (x.engagement || 0), 0) / r.reels.filter(x => x.engagement != null).length || 0) : null;
          return (
            <div key={r.username} onClick={() => r.reels && r.reels.length && setDetail(r)} style={{ display: "grid", gridTemplateColumns: "1.6fr .9fr .8fr .9fr .9fr 1fr .6fr", gap: 8, padding: "11px 14px", fontSize: 12.5, alignItems: "center", borderBottom: "1px solid var(--border)", cursor: (r.reels && r.reels.length) ? "pointer" : "default" }}>
              <span style={{ display: "flex", alignItems: "center", gap: 7, minWidth: 0 }}>
                <span title={r.cloud_attribue ? "Cloud : " + r.cloud_attribue : "iPhone"} style={{ fontSize: 13, flex: "none" }}>{r.cloud_attribue ? "☁️" : "📱"}</span>
                <span style={{ fontWeight: 700, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>@{r.username}</span>
                {igIsPlug(r.ig_plug) && <span title="IG Plug" style={{ fontSize: 9.5, color: "#34d399", flex: "none" }}>●</span>}
                {r.error && <span title={r.error} style={{ color: "#f85149", fontSize: 10 }}>⚠</span>}
              </span>
              <span><span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 10, background: IG_STAGE_COLOR[r.stage] + "22", color: IG_STAGE_COLOR[r.stage], fontWeight: 700, whiteSpace: "nowrap" }}>{r.stage}</span></span>
              <span>{r.updated ? igFmt(r.followers) : "—"}</span>
              <span>{r.updated ? (r.reels_count || 0) : "—"}</span>
              <span>{r.updated ? igFmt(r.avg_views) : "—"}</span>
              <span>{eng != null ? eng.toFixed(1) + " %" : "—"}</span>
              <span style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                <a href={"https://www.instagram.com/" + r.username + "/"} target="_blank" rel="noopener" onClick={e => e.stopPropagation()} title="Ouvrir sur Instagram"
                  style={{ textDecoration: "none", fontSize: 15 }}>📸</a>
              </span>
            </div>
          );
        })}
        {rows.length === 0 && <div style={{ padding: 20, textAlign: "center", color: "var(--faint)", fontSize: 12.5 }}>Aucun compte dans le stockage.</div>}
      </div>

      {detail && <IgReelsModal acc={detail} onClose={() => setDetail(null)} />}
    </div>
  );
}

// Réglages du scraper
function IgSettings({ cfg, avail, saving, onSave, login, onBrowserLogin }) {
  const { useState } = React;
  const [account, setAccount] = useState(cfg.account || "");
  const [limit, setLimit] = useState(cfg.reels_limit || 18);
  const [diamant, setDiamant] = useState(cfg.diamant_views || 10000);
  const [scope, setScope] = useState(cfg.scope || "active");
  return (
    <div style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 12, padding: 16, marginBottom: 18 }}>
      <div style={{ display: "flex", gap: 18, flexWrap: "wrap", alignItems: "flex-end" }}>
        <label style={igLbl}>Compte scraper (sacrificiel)
          <select value={account} onChange={e => setAccount(e.target.value)} style={igInput}>
            <option value="">— choisir —</option>
            {avail.map(a => <option key={a.username} value={a.username}>@{a.username}{a.category ? " · " + a.category : ""}</option>)}
          </select>
        </label>
        <label style={igLbl}>Comptes à scraper
          <select value={scope} onChange={e => setScope(e.target.value)} style={igInput}>
            <option value="active">IG Plug + catégories actives</option>
            <option value="plug">IG Plug uniquement</option>
            <option value="all">Tous les comptes</option>
          </select>
        </label>
        <label style={igLbl}>Reels par compte
          <input type="number" min="3" max="50" value={limit} onChange={e => setLimit(parseInt(e.target.value) || 18)} style={{ ...igInput, width: 80 }} />
        </label>
        <label style={igLbl}>Seuil 💎 Diamant (vues moy.)
          <input type="number" min="0" step="1000" value={diamant} onChange={e => setDiamant(parseInt(e.target.value) || 0)} style={{ ...igInput, width: 110 }} />
        </label>
        <label style={{ ...igLbl, flexDirection: "row", alignItems: "center", gap: 7 }}>
          <input type="checkbox" checked={!!cfg.auto} onChange={e => onSave({ auto: e.target.checked })} /> Auto-refresh 6 h
        </label>
        <button onClick={() => onSave({ account, reels_limit: limit, diamant_views: diamant, scope })} disabled={saving}
          style={{ ...primaryBtn, opacity: saving ? .6 : 1 }}>{saving ? "…" : "Enregistrer"}</button>
        <button onClick={onBrowserLogin} disabled={!cfg.account || (login && login.state === "running")}
          title={!cfg.account ? "Enregistre d'abord le compte scraper" : "Ouvre Chromium pour connecter le compte (à faire une fois)"}
          style={{ padding: "7px 14px", borderRadius: 9, background: "rgba(88,166,255,.14)", border: "1px solid rgba(88,166,255,.5)", color: "#79c0ff", fontSize: 12.5, fontWeight: 800, cursor: (!cfg.account || (login && login.state === "running")) ? "default" : "pointer", opacity: (!cfg.account || (login && login.state === "running")) ? .5 : 1 }}>
          {login && login.state === "running" ? "🌐 Connexion…" : "🌐 Connexion navigateur"}</button>
      </div>
      <div style={{ fontSize: 10.5, color: "var(--faint)", marginTop: 10 }}>1) Choisis le compte scraper + <b>Enregistre</b>. 2) <b>🌐 Connexion navigateur</b> : une fenêtre Chromium s'ouvre, connecte le compte (complète la vérif si demandée) — la session est gardée, à faire <b>une seule fois</b>. 3) <b>🔄 Rafraîchir</b>. Prends un compte peu important (il porte le risque de blocage) et donne-lui un proxy.</div>
    </div>
  );
}

// Détail des reels d'un compte
function IgReelsModal({ acc, onClose }) {
  const reels = (acc.reels || []).slice().sort((a, b) => (b.taken_at || 0) - (a.taken_at || 0));
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(2,4,10,.7)", display: "grid", placeItems: "center", zIndex: 3000, padding: 20 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 900, maxWidth: "95vw", maxHeight: "90vh", overflowY: "auto", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 16, padding: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
          <div style={{ fontSize: 17, fontWeight: 800 }}>@{acc.username}</div>
          <a href={"https://www.instagram.com/" + acc.username + "/"} target="_blank" rel="noopener" style={{ textDecoration: "none", fontSize: 16 }}>📸</a>
          <span style={{ marginLeft: "auto", cursor: "pointer", color: "var(--muted)", fontSize: 20 }} onClick={onClose}>✕</span>
        </div>
        <div style={{ fontSize: 12.5, color: "var(--muted)", marginBottom: 16 }}>{igFmt(acc.followers)} abonnés · {acc.reels_count || reels.length} reels · {igFmt(acc.avg_views)} vues moy.</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(150px,1fr))", gap: 12 }}>
          {reels.map(r => (
            <a key={r.pk} href={r.url} target="_blank" rel="noopener" style={{ textDecoration: "none", color: "inherit", border: "1px solid var(--border)", borderRadius: 11, overflow: "hidden", background: "var(--surface-2)" }}>
              <div style={{ aspectRatio: "9 / 16", background: "#0b1020", position: "relative", overflow: "hidden" }}>
                {r.thumb ? <img src={window.Backend.igThumbUrl(r.thumb)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  : <div style={{ display: "grid", placeItems: "center", height: "100%", color: "var(--faint)", fontSize: 22 }}>▶</div>}
                <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "14px 8px 6px", background: "linear-gradient(transparent,rgba(0,0,0,.8))", color: "#fff", fontSize: 11.5, fontWeight: 700 }}>▶ {igFmt(r.views)}</div>
              </div>
              <div style={{ padding: "7px 9px", display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--muted)" }}>
                <span>❤ {igFmt(r.likes)}</span><span>💬 {igFmt(r.comments)}</span><span style={{ color: "var(--accent)", fontWeight: 700 }}>{r.engagement != null ? r.engagement + "%" : "—"}</span>
              </div>
            </a>
          ))}
          {reels.length === 0 && <div style={{ color: "var(--faint)", fontSize: 12.5, padding: 12 }}>Aucun reel récupéré.</div>}
        </div>
      </div>
    </div>
  );
}

const ghostBtn = { padding: "7px 13px", borderRadius: 9, background: "var(--surface-2)", border: "1px solid var(--border)", color: "var(--muted)", fontSize: 12.5, fontWeight: 700, cursor: "pointer" };
const primaryBtn = { padding: "7px 15px", borderRadius: 9, background: "var(--accent-soft)", border: "1px solid var(--accent-line)", color: "var(--accent)", fontSize: 12.5, fontWeight: 800, cursor: "pointer" };
const banner = { padding: "9px 13px", borderRadius: 9, background: "var(--surface-2)", border: "1px solid var(--border)", fontSize: 12.5, marginBottom: 16 };
const igLbl = { display: "flex", flexDirection: "column", gap: 5, fontSize: 11, fontWeight: 700, color: "var(--faint)" };
const igInput = { padding: "7px 10px", borderRadius: 8, border: "1px solid var(--border)", background: "var(--surface)", color: "var(--text)", fontSize: 12.5, fontWeight: 500 };

window.IgAnalytics = IgAnalytics;