// ViG Command Center — Automation engine: smart alerts, auto daily briefing, snapshot history
const { useState: useStateAU, useEffect: useEffectAU } = React;

const AU_today = () => new Date().toISOString().slice(0, 10);

/* ---- auto-snapshot: silently record a daily datapoint of power + roster ---- */
function autoSnapshot() {
  try {
    const hist = LS.get('vig2_snapshots', []);
    const today = AU_today();
    if (hist.length && hist[hist.length - 1].d === today) return hist;
    const V = window.VIG, own = LS.get('vig2_ownership', {}) || {};
    const owned = (V?.generals || []).filter(g => own[g.type + '|' + g.name]).length;
    let vigPower = 0;
    try { const a = (window.ALLIANCE?.alliances || []).find(x => x.id === 'VIG'); vigPower = a ? a.power : 0; } catch (e) {}
    const next = [...hist, { d: today, owned, vigPower, t: Date.now() }].slice(-90);
    LS.set('vig2_snapshots', next);
    return next;
  } catch (e) { return []; }
}

/* ---- smart alerts: scan live data, surface the few things that matter now ---- */
function computeAlerts() {
  const out = [];
  const V = window.VIG;
  const own = LS.get('vig2_ownership', {}) || {};
  const ownedByName = name => (V?.generals || []).some(g => g.name === name && own[g.type + '|' + g.name]);

  // 1) covenants one general away
  try {
    const opt = window.CALC.optimizeCovenants(ownedByName, 75) || [];
    const oneAway = opt.filter(o => o.status.missing.length === 1);
    if (oneAway.length) out.push({
      tone: 'amber', icon: 'link', page: 'optimizer',
      title: `${oneAway.length} covenant${oneAway.length > 1 ? 's' : ''} one general away`,
      body: `Closest: ${oneAway.slice(0, 2).map(o => `${o.cov.main} (need ${o.status.missing[0]})`).join(', ')}`,
    });
  } catch (e) {}

  // 2) alliance movement vs last snapshot
  try {
    const A = window.ALLIANCE;
    if (A && A.alliances) {
      const ranked = [...A.alliances].sort((a, b) => b.power - a.power);
      const vig = ranked.find(a => a.id === 'VIG');
      const vigRank = ranked.findIndex(a => a.id === 'VIG') + 1;
      const ahead = vigRank > 1 ? ranked[vigRank - 2] : null;
      if (ahead) {
        const gap = (ahead.power - vig.power).toFixed(0);
        out.push({ tone: 'cyan', icon: 'trophy', page: 'warroom', title: `VIG is #${vigRank} — ${gap}B behind ${ahead.id}`, body: `Momentum ${ALCALC.momentum(vig)}%/cycle. Open the War Room race tracker.` });
      } else if (vig) {
        const lead = ranked[1] ? (vig.power - ranked[1].power).toFixed(0) : 0;
        out.push({ tone: 'emerald', icon: 'trophy', page: 'warroom', title: `VIG leads by ${lead}B`, body: `Holding #1. Keep momentum above rivals to stay ahead.` });
      }
    }
  } catch (e) {}

  // 3) event imminent (within 48h)
  try {
    const dates = LS.get('vig2_events', {});
    const now = Date.now();
    const names = { svs: 'Server vs Server', boc: 'Battle of Constantinople', bog: 'Battle of Gaul', kingspath: "King's Path", chalice: 'Holy Palace', alliancecomp: 'Alliance Championship', civcup: 'Civilization Cup' };
    const soon = Object.entries(dates).map(([k, t]) => ({ k, t, h: (t - now) / 3600000 })).filter(e => e.h > 0 && e.h < 48).sort((a, b) => a.h - b.h)[0];
    if (soon) out.push({ tone: 'purple', icon: 'target', page: 'events', title: `${names[soon.k] || soon.k} in ${soon.h < 1 ? Math.round(soon.h * 60) + 'm' : Math.round(soon.h) + 'h'}`, body: 'Prep your marches, speedups & rally setup now.' });
  } catch (e) {}

  // 4) roster growth nudge vs snapshot
  try {
    const hist = LS.get('vig2_snapshots', []);
    if (hist.length >= 2) {
      const first = hist[0], last = hist[hist.length - 1];
      const gain = last.owned - first.owned;
      if (gain > 0) out.push({ tone: 'emerald', icon: 'star', page: 'roster', title: `+${gain} generals since tracking began`, body: `Roster is growing. Check Roster Analytics for your next pickups.` });
    }
  } catch (e) {}

  return out;
}

const AU_TONE = {
  amber: { c: '#fbbf24', bg: 'rgba(251,191,36,.10)', bd: 'rgba(251,191,36,.30)' },
  cyan: { c: '#22d3ee', bg: 'rgba(34,211,238,.10)', bd: 'rgba(34,211,238,.30)' },
  emerald: { c: '#34d399', bg: 'rgba(52,211,153,.10)', bd: 'rgba(52,211,153,.30)' },
  purple: { c: '#a855f7', bg: 'rgba(168,85,247,.10)', bd: 'rgba(168,85,247,.30)' },
};

function SmartAlerts({ go }) {
  const [alerts, setAlerts] = useStateAU([]);
  const [dismissed, setDismissed] = useStateAU(() => LS.get('vig2_alerts_dismissed_' + AU_today(), []));
  useEffectAU(() => { autoSnapshot(); setAlerts(computeAlerts()); }, []);

  const shown = alerts.filter(a => !dismissed.includes(a.title));
  const dismiss = (title) => { const n = [...dismissed, title]; setDismissed(n); LS.set('vig2_alerts_dismissed_' + AU_today(), n); };
  if (!shown.length) return null;

  return (
    <section className="col-span-12">
      <div className="mb-2 flex items-center gap-2">
        <span className="relative flex h-2 w-2"><span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand opacity-60"></span><span className="relative inline-flex h-2 w-2 rounded-full bg-brand"></span></span>
        <h3 className="text-[11px] font-bold uppercase tracking-[0.14em] text-zinc-400">Smart Alerts · auto-scanned</h3>
        <span className="text-[11px] text-zinc-500">{shown.length} need attention</span>
      </div>
      <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 xl:grid-cols-4">
        {shown.slice(0, 4).map((a, i) => {
          const t = AU_TONE[a.tone];
          return (
            <button key={i} onClick={() => go(a.page)} className="group relative overflow-hidden rounded-xl border p-3 text-left transition-all hover:brightness-110" style={{ background: t.bg, borderColor: t.bd }}>
              <div className="flex items-start gap-2.5">
                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ background: t.c + '22', color: t.c }}><Icon name={a.icon} size={15} /></span>
                <div className="min-w-0 flex-1">
                  <div className="text-[12.5px] font-bold leading-tight text-white">{a.title}</div>
                  <div className="mt-0.5 text-[11px] leading-snug text-zinc-400">{a.body}</div>
                </div>
                <span onClick={e => { e.stopPropagation(); dismiss(a.title); }} className="shrink-0 rounded p-0.5 text-zinc-600 hover:text-zinc-300" title="Dismiss"><Icon name="x" size={13} /></span>
              </div>
            </button>
          );
        })}
      </div>
    </section>
  );
}

window.SmartAlerts = SmartAlerts;
window.autoSnapshot = autoSnapshot;
window.computeAlerts = computeAlerts;