/* global React, T */

const HOUR_LABELS_24 = ["12A","1A","2A","3A","4A","5A","6A","7A","8A","9A","10A","11A","12P","1P","2P","3P","4P","5P","6P","7P","8P","9P","10P","11P"];

const DEVICE_LABELS = {
  mobile:  { en: "Mobile",  es: "Móvil" },
  desktop: { en: "Desktop", es: "Escritorio" },
  tablet:  { en: "Tablet",  es: "Tablet" },
  unknown: { en: "Unknown", es: "Desconocido" },
};

const prettySource = (s) => {
  if (s === "direct") return "Direct";
  return s.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
};

const Dist = ({ title, entries, color, lang }) => {
  const total = entries.reduce((s, e) => s + e[1], 0) || 1;
  return (
    <div className="panel">
      <div className="panel-head">
        <div><div className="panel-title" style={{fontSize:18}}>{title}</div></div>
      </div>
      {entries.length === 0 ? (
        <div style={{color:"var(--text-muted)", fontSize:13}}>{lang==="es"?"Sin datos todavía.":"No data yet."}</div>
      ) : (
        <div className="dist-list">
          {entries.map(([label, count], i) => (
            <div key={i} className="dist-row">
              <div style={{display:"flex", alignItems:"center", gap:10}}>
                <div style={{width:8, height:8, borderRadius:999, background:color}}/>
                <span>{label}</span>
              </div>
              <div className="dist-count">{count}</div>
              <div className="dist-pct">{Math.round((count / total) * 100)}%</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const AnalyticsTab = ({ agg, loading, lang }) => {
  const t = T[lang];
  if (loading && !agg) return <div className="panel loading-panel">{lang==="es"?"Cargando analíticas…":"Loading analytics…"}</div>;
  if (!agg || !agg.hasData) return (
    <div className="panel" style={{textAlign:"center", padding:"60px 24px", color:"var(--text-muted)"}}>
      {lang==="es"
        ? "Aún no hay escaneos en este periodo. Genera un QR en la pestaña Menú & QR para empezar a recopilar datos."
        : "No scans in this period yet. Generate a QR in the Menu & QR tab to start collecting data."}
    </div>
  );

  const topMax = agg.topViewed[0]?.count || 1;
  const dwellMax = agg.dwellByItem[0]?.dwell || 1;
  const catMax = agg.categoryEntries[0]?.count || 1;

  const deviceEntries = Object.entries(agg.deviceMap)
    .sort((a,b)=>b[1]-a[1])
    .map(([k,v]) => [DEVICE_LABELS[k] ? DEVICE_LABELS[k][lang] : k, v]);
  const sourceEntries = Object.entries(agg.qrSourceMap)
    .sort((a,b)=>b[1]-a[1])
    .map(([k,v]) => [prettySource(k), v]);

  return (
    <>
      <div className="two-up" style={{marginBottom:18}}>
        <div className="panel">
          <div className="panel-head">
            <div>
              <div className="panel-title">{t.topViewed}</div>
              <div className="panel-sub">{lang==="es"?"más vistos este periodo":"most seen this period"}</div>
            </div>
          </div>
          {agg.topViewed.length === 0 ? (
            <div style={{color:"var(--text-muted)", fontSize:13}}>{lang==="es"?"Sin datos.":"No data yet."}</div>
          ) : (
            <div className="bar-list">
              {agg.topViewed.map((it, i) => (
                <div key={i} className="bar-row">
                  <div className="bar-name">{it.name}</div>
                  <div className="bar-track"><div className="bar-fill" style={{"--c":"var(--brand-purple)", width:`${(it.count / topMax) * 100}%`}}/></div>
                  <div className="bar-count">{it.count}</div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="panel">
          <div className="panel-head">
            <div>
              <div className="panel-title">{t.attentionTitle}</div>
              <div className="panel-sub">{lang==="es"?"tiempo medio de atención por plato":"avg attention time per dish"}</div>
            </div>
          </div>
          {agg.dwellByItem.length === 0 ? (
            <div style={{color:"var(--text-muted)", fontSize:13}}>{lang==="es"?"Sin datos.":"No dwell data yet."}</div>
          ) : (
            <div className="bar-list">
              {agg.dwellByItem.slice(0,6).map((it, i) => (
                <div key={i} className="bar-row">
                  <div className="bar-name">{it.name}</div>
                  <div className="bar-track"><div className="bar-fill" style={{"--c":"var(--brand-blue)", width:`${(it.dwell / dwellMax) * 100}%`}}/></div>
                  <div className="bar-count">{it.dwell}s</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="two-up" style={{marginBottom:18}}>
        <div className="panel">
          <div className="panel-head">
            <div><div className="panel-title">{t.categoryPerf}</div></div>
          </div>
          {agg.categoryEntries.length === 0 ? (
            <div style={{color:"var(--text-muted)", fontSize:13}}>{lang==="es"?"Sin datos.":"No data yet."}</div>
          ) : (
            <div className="bar-list">
              {agg.categoryEntries.map((c, i) => {
                const colors = ["var(--brand-green)","var(--brand-orange)","var(--brand-blue)","var(--brand-purple)"];
                return (
                  <div key={i} className="bar-row">
                    <div className="bar-name">{c.name}</div>
                    <div className="bar-track"><div className="bar-fill" style={{"--c":colors[i%colors.length], width:`${(c.count / catMax) * 100}%`}}/></div>
                    <div className="bar-count">{c.count}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div className="panel">
          <div className="panel-head">
            <div>
              <div className="panel-title">{t.coViewed}</div>
              <div className="panel-sub">{lang==="es"?"vistos juntos a menudo":"items frequently viewed together"}</div>
            </div>
          </div>
          {agg.coViewed.length === 0 ? (
            <div style={{color:"var(--text-muted)", fontSize:13}}>{lang==="es"?"Aún no hay suficientes sesiones para análisis de pares.":"Not enough sessions yet for pair analysis."}</div>
          ) : (
            <div className="pair-list">
              {agg.coViewed.map((p, i) => (
                <div key={i} className="pair-row">
                  <span>{p.a}</span>
                  <span className="sep">×</span>
                  <span>{p.b}</span>
                  <span className="badge">{p.count}×</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="panel">
        <div className="panel-head">
          <div><div className="panel-title">{t.heatmapTitle}</div></div>
          <div style={{display:"flex", alignItems:"center", gap:8, fontSize:11, color:"var(--text-muted)", fontFamily:"var(--font-mono)"}}>
            <span>{t.quieter}</span>
            <div style={{display:"flex", gap:2}}>
              {[15,30,50,75,100].map((v,i)=><div key={i} style={{width:16, height:10, borderRadius:3, background:`color-mix(in srgb, var(--brand-purple) ${v}%, #eef0f4)`}}/>)}
            </div>
            <span>{t.busier}</span>
          </div>
        </div>
        <div className="heatmap heatmap-24">
          {agg.hourMap.map((v,i) => {
            const ratio = v / agg.heatMax;
            return (
              <div key={i} className="cell-wrap">
                <div className="cell" style={{"--v": ratio.toFixed(2)}} title={`${HOUR_LABELS_24[i]}: ${v} scans`}>{v > 0 ? v : ""}</div>
                <div className="cell-lbl">{HOUR_LABELS_24[i]}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="two-up" style={{marginTop:18}}>
        <Dist title={t.devices} entries={deviceEntries} color="var(--brand-blue)" lang={lang}/>
        <Dist title={t.qrSources} entries={sourceEntries} color="var(--brand-orange)" lang={lang}/>
      </div>
    </>
  );
};

Object.assign(window, { AnalyticsTab });