/* global React, T, Pill */

const MetricCard = ({ label, value, sub, tone }) => (
  <div className="metric">
    <div className="metric-label">{label}</div>
    <div className="metric-val">{value}</div>
    {sub && <div className="metric-sub">{tone ? <span className={tone}>{sub}</span> : sub}</div>}
  </div>
);

const fmtDur = (s) => {
  s = Math.round(s || 0);
  if (s < 60) return `${s}s`;
  const m = Math.floor(s / 60), r = s % 60;
  return `${m}m ${r}s`;
};

const buildAlerts = (agg, lang, fmtHour) => {
  const t = T[lang];
  const alerts = [];
  const top = agg.topViewed[0];
  if (top) {
    alerts.push({ kind: "ok", t: t.alertTopPerformer(top.name), d: t.alertTopPerformerD });
  }
  if (agg.dropOffRate > 0.35) {
    alerts.push({ kind: "warn", t: t.alertDropOff, d: t.alertDropOffD });
  }
  if (agg.totalScans > 0) {
    alerts.push({ kind: "info", t: t.alertPeak(fmtHour(agg.peakHour)), d: t.alertPeakD });
  }
  const pair = agg.coViewed[0];
  if (pair && pair.count >= 2) {
    alerts.push({ kind: "ok", t: t.alertCombo(pair.a, pair.b), d: t.alertComboD });
  }
  if (agg.returningVisitors > 0) {
    alerts.push({
      kind: "info",
      t: lang === "es" ? `${agg.returningVisitors} visitantes recurrentes` : `${agg.returningVisitors} returning visitors`,
      d: lang === "es" ? `El ${Math.round(agg.returnRate*100)}% de tus visitantes únicos ha vuelto a escanear.` : `${Math.round(agg.returnRate*100)}% of your unique visitors came back to scan again.`,
    });
  }
  return alerts;
};

const EmptyDashboard = ({ lang }) => (
  <div className="panel empty-hero">
    <div className="empty-hero-mark"><span/><span/><span/><span/></div>
    <div className="empty-hero-title">{lang === "es" ? "Aún no hay datos" : "No data yet"}</div>
    <div className="empty-hero-body">
      {lang === "es"
        ? "Genera un QR en la pestaña Menú & QR, imprímelo y colócalo en tus mesas. Cada escaneo aparecerá aquí en tiempo real."
        : "Generate a QR in the Menu & QR tab, print it, and place it on your tables. Every scan will show up here in real time."}
    </div>
  </div>
);

const InsightsTab = ({ agg, loading, lang, report, onGenerate, fmtHour }) => {
  const t = T[lang];
  if (loading && !agg) return <div className="panel loading-panel">{lang==="es"?"Cargando analíticas…":"Loading analytics…"}</div>;
  const hasData = agg && agg.hasData;
  const alerts = hasData ? buildAlerts(agg, lang, fmtHour) : [];

  return (
    <>
      <div className="insight-card">
        <div className="deco d1"/><div className="deco d2"/>
        <div className="insight-head">
          <div>
            <div className="insight-title">{t.weeklyTitle}</div>
            <div style={{fontSize:13, color:"var(--text-muted)", marginTop:4, fontFamily:"var(--font-mono)", textTransform:"uppercase", letterSpacing:0.04}}>
              {t.aiGen}
            </div>
          </div>
          <button className="btn btn-primary" style={{background:"var(--brand-purple)"}} onClick={onGenerate} disabled={!hasData}>
            {report.length > 0 ? t.regenerateBtn : t.generateBtn}
          </button>
        </div>
        {report.length === 0 ? (
          <div className="insight-body empty">{hasData ? t.emptyInsight : (lang==="es"?"Recopila escaneos para generar tu primer informe.":"Collect some scans to generate your first report.")}</div>
        ) : (
          <div className="insight-body">
            {report.map((para, i) => (
              <p key={i} dangerouslySetInnerHTML={{__html: para.replace(/\*\*(.+?)\*\*/g, "<b>$1</b>")}}/>
            ))}
          </div>
        )}
      </div>

      {!hasData && <EmptyDashboard lang={lang}/>}

      {hasData && alerts.length > 0 && (
        <div style={{marginBottom:24}}>
          <div style={{fontFamily:"var(--font-head)", fontSize:22, fontWeight:500, letterSpacing:-0.02, marginBottom:14}}>
            {t.keyAlerts}
          </div>
          <div className="alert-grid">
            {alerts.map((a, i) => (
              <div key={i} className={`alert ${a.kind}`}>
                <div className="alert-icon">!</div>
                <div className="alert-body">
                  <div className="t">{a.t}</div>
                  <div className="d">{a.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {hasData && (
        <div className="metric-grid">
          <MetricCard label={t.mTotalScans} value={agg.totalScans} sub={`${agg.deltas.scans >= 0 ? "+" : ""}${agg.deltas.scans}% ${t.vsPrev}`} tone={agg.deltas.scans >= 0 ? "up" : "down"}/>
          <MetricCard label={t.mSessions} value={agg.sessions} sub={`${agg.deltas.sessions >= 0 ? "+" : ""}${agg.deltas.sessions}% ${t.vsPrev}`} tone={agg.deltas.sessions >= 0 ? "up" : "down"}/>
          <MetricCard label={t.mUnique} value={agg.uniqueVisitors} sub={`${agg.returningVisitors} ${t.returningLbl}`}/>
          <MetricCard label={t.mReturns} value={agg.returningVisitors} sub={`${Math.round(agg.returnRate * 100)}% ${t.pctOfVisitors}`}/>
          <MetricCard label={t.mItemViews} value={agg.totalViews} sub={`${agg.deltas.views >= 0 ? "+" : ""}${agg.deltas.views}% ${t.vsPrev}`} tone={agg.deltas.views >= 0 ? "up" : "down"}/>
          <MetricCard label={t.mAvgDwell} value={`${Math.round(agg.avgDwell)}s`} sub={`${agg.deltas.dwell >= 0 ? "+" : ""}${agg.deltas.dwell}% ${t.vsPrev}`} tone={agg.deltas.dwell >= 0 ? "up" : "down"}/>
          <MetricCard label={t.mScrollDepth} value={`${Math.round(agg.avgScroll)}%`} sub={agg.avgScroll >= 60 ? t.goodDepth : t.lowDepth} tone={agg.avgScroll >= 60 ? "up" : "down"}/>
          <MetricCard label={t.mSessionDur} value={fmtDur(agg.avgSessionDuration)} sub={`${agg.deltas.duration >= 0 ? "+" : ""}${agg.deltas.duration}% ${t.vsPrev}`} tone={agg.deltas.duration >= 0 ? "up" : "down"}/>
        </div>
      )}
    </>
  );
};

Object.assign(window, { InsightsTab });