/* ============================================================
   ZENITH — shared library: context, i18n, UI primitives
   ============================================================ */

const { useState, useEffect, useRef, useContext, createContext, useCallback } = React;

/* ---------- App context ---------- */
const AppCtx = createContext(null);
const useApp = () => useContext(AppCtx);

/* translate helper: tx(lang, en, si) */
function tx(lang, en, si) { return lang === "si" && si ? si : en; }

/* ---------- Brand logo (wordmark) ----------
   "islandrank" in navy (white on dark surfaces), ".lk" in teal. */
function Logo({ light = true, size = 26 }) {
  return (
    <span style={{ fontWeight: 700, fontSize: size * 0.92, letterSpacing: "-0.02em",
      lineHeight: 1, whiteSpace: "nowrap", color: light ? "#fff" : "#1F4266" }}>
      islandrank<span style={{ color: "#46AEB4" }}>.lk</span>
    </span>
  );
}

/* ---------- Buttons ---------- */
function Btn({ kind = "primary", size, icon, iconRight, children, ...rest }) {
  const cls = `btn btn--${kind}` + (size ? ` btn--${size}` : "");
  return (
    <button className={cls} {...rest}>
      {icon && <i className={`ph ph-${icon}`}></i>}
      {children}
      {iconRight && <i className={`ph ph-${iconRight}`}></i>}
    </button>
  );
}

/* ---------- Chip ---------- */
function Chip({ tone = "grey", icon, children }) {
  return (
    <span className={`chip chip--${tone}`}>
      {icon && <i className={`ph ph-${icon}`}></i>}
      {children}
    </span>
  );
}

/* ---------- Avatar ---------- */
function Avatar({ name, size = 38, src }) {
  const [broken, setBroken] = useState(false);
  useEffect(() => { setBroken(false); }, [src]);   // retry the image if the src changes
  const initials = (name || "").trim().split(/\s+/).filter(Boolean).map(w => w[0]).slice(0, 2).join("").toUpperCase() || "·";
  // Show the Google profile photo when available; fall back to initials on missing/blocked image.
  // referrerPolicy=no-referrer avoids googleusercontent 403s on some networks.
  if (src && !broken) {
    return <img className="avatar" src={src} alt={name || ""} referrerPolicy="no-referrer"
      onError={() => setBroken(true)}
      style={{ width: size, height: size, objectFit: "cover" }} />;
  }
  return <div className="avatar" style={{ width: size, height: size, fontSize: size * 0.37 }}>{initials}</div>;
}

/* ---------- Stat ---------- */
function Stat({ num, label, tone }) {
  return (
    <div>
      <div className="stat__num" style={tone ? { color: `var(--${tone})` } : null}>{num}</div>
      <div className="stat__lab">{label}</div>
    </div>
  );
}

/* ---------- Progress bar ---------- */
function PBar({ value, max = 100, color = "blue" }) {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  return <div className="pbar"><span style={{ width: pct + "%", background: `var(--${color})` }}></span></div>;
}

/* ---------- Field ---------- */
function Field({ label, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
      <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase",
        letterSpacing: "var(--tr-caps)", color: "var(--fg-muted)" }}>{label}</span>
      {children}
    </label>
  );
}

/* ---------- Z-score radial gauge ----------
   Maps z (0..3) onto a 270° arc. */
function ZGauge({ z, size = 200, label }) {
  const r = size / 2 - 14;
  const c = size / 2;
  const circ = 2 * Math.PI * r;
  const sweep = 0.75;                       // 270deg
  const frac = Math.max(0, Math.min(1, z / 3));
  const dash = circ * sweep;
  const fill = dash * frac;
  return (
    <div className="zgauge" style={{ width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: "rotate(135deg)" }}>
        <defs>
          <linearGradient id="zgauge-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#12A66B" />
            <stop offset="0.5" stopColor="#38B6E8" />
            <stop offset="1" stopColor="#1456C7" />
          </linearGradient>
        </defs>
        <circle cx={c} cy={c} r={r} fill="none" stroke="var(--grey-4)" strokeWidth="14"
          strokeLinecap="round" strokeDasharray={`${dash} ${circ}`} />
        <circle cx={c} cy={c} r={r} fill="none" stroke="url(#zgauge-grad)" strokeWidth="14"
          strokeLinecap="round" strokeDasharray={`${fill} ${circ}`}
          style={{ transition: "stroke-dasharray .9s cubic-bezier(.22,1,.36,1)" }} />
      </svg>
      <div className="zgauge__val">
        <div className="zgauge__num">{z.toFixed(2)}</div>
        {label && <div style={{ fontSize: 12, color: "var(--fg-muted)", fontWeight: 600,
          textTransform: "uppercase", letterSpacing: "var(--tr-caps)", marginTop: 4 }}>{label}</div>}
      </div>
    </div>
  );
}

/* ---------- Next Saturday 21:00 (the SRS publish CRON) + live countdown ---------- */
function nextSaturday(hour) {
  const now = new Date();
  const d = new Date(now);
  const day = d.getDay();                 // 0 Sun … 6 Sat
  let add = (6 - day + 7) % 7;
  d.setHours(hour, 0, 0, 0);
  if (add === 0 && now > d) add = 7;      // already past Sat 21:00 → next week
  d.setDate(d.getDate() + add);
  return d;
}
function useCountdown(hour = 21) {
  const [ms, setMs] = useState(() => nextSaturday(hour) - new Date());
  useEffect(() => {
    const id = setInterval(() => setMs(nextSaturday(hour) - new Date()), 1000);
    return () => clearInterval(id);
  }, [hour]);
  const s = Math.max(0, Math.floor(ms / 1000));
  return { d: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600),
    m: Math.floor((s % 3600) / 60), s: s % 60 };
}

/* format an integer with thousands separators; "—" when absent (sparse Z-uploads
   carry only z + ranks — no totals/percentile) */
function fmtInt(n) { return (n === null || n === undefined) ? "—" : Number(n).toLocaleString(); }

/* ---------- Sparkline ---------- */
function Spark({ data, w = 220, h = 56, color = "var(--blue)" }) {
  if (!data || data.length < 2) return <svg width={w} height={h} style={{ display: "block" }} />;  // need ≥2 points to plot a line
  const max = Math.max(...data), min = Math.min(...data);
  const rng = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - 6 - ((v - min) / rng) * (h - 12);
    return [x, y];
  });
  const d = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = d + ` L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg width={w} height={h} style={{ display: "block" }}>
      <defs>
        <linearGradient id="spk" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="rgba(20,86,199,.22)" />
          <stop offset="1" stopColor="rgba(20,86,199,0)" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#spk)" />
      <path d={d} fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      {pts.map((p, i) => i === pts.length - 1 &&
        <circle key={i} cx={p[0]} cy={p[1]} r="4" fill={color} />)}
    </svg>
  );
}

/* ---------- Empty helper to share components across babel scopes ---------- */
Object.assign(window, {
  AppCtx, useApp, tx, useState, useEffect, useRef, useCallback,
  Logo, Btn, Chip, Avatar, Stat, PBar, Field, ZGauge, Spark,
  nextSaturday, useCountdown,
});