/* Shared HK weather data + helpers for the pov.hk redesign mockups.
   Exposes window.POV = { W, SEG, SevenSeg, AsciiSky, ... } */
(function () {
  // Canonical reading — Hong Kong, early-June afternoon: hot, humid, storms building.
  const W = {
    city: "Hong Kong",
    cityZh: "香港",
    time: "14:32",
    date: "wed, 04 jun 2026",
    dateZh: "六月四日 星期三",
    temp: 31,
    high: 33,
    low: 28,
    feels: 38,
    dew: 26,
    humidity: 84,
    rain: 70,
    uv: 8,
    uvLabel: "very high",
    wind: 18,
    windDir: "SE",
    visibility: 14,
    sunrise: "05:39",
    sunset: "19:07",
    condition: "thunderstorms",
    conditionZh: "雷暴",
    forecast:
      "hot with sunny intervals. a few squally thunderstorms, heavy at times over the territory. very hot weather warning in force.",
    warnings: [
      { code: "hot", name: "very hot weather warning", tone: "amber" },
      { code: "ts", name: "thunderstorm warning", tone: "amber" },
    ],
    // 12-hour humidity-ish trend for charts (0-100)
    trend: [62, 66, 71, 74, 70, 76, 81, 84, 88, 86, 90, 84],
    hours: [
      { t: "now", temp: 31, k: "storm" },
      { t: "15", temp: 32, k: "storm" },
      { t: "16", temp: 31, k: "rain" },
      { t: "17", temp: 30, k: "rain" },
      { t: "18", temp: 29, k: "cloud" },
      { t: "19", temp: 28, k: "cloud" },
      { t: "20", temp: 28, k: "clear" },
    ],
  };

  // ---- 7-segment renderer (ported from repo segments.js) ----
  const SEGMENTS = {
    "0": "abcdef", "1": "bc", "2": "abged", "3": "abgcd", "4": "fgbc",
    "5": "afgcd", "6": "afgcde", "7": "abc", "8": "abcdefg", "9": "abcdfg",
    "-": "g", "C": "afed", "F": "afeg", "°": "abfg", " ": "",
  };
  function segPoints(ch, w, h, t, gap) {
    const on = new Set(SEGMENTS[ch] || "");
    const mid = h / 2;
    const horiz = (x1, y, x2) => {
      const dy = t / 2;
      return `${x1 + dy},${y} ${x1 + t},${y - dy} ${x2 - t},${y - dy} ${x2 - dy},${y} ${x2 - t},${y + dy} ${x1 + t},${y + dy}`;
    };
    const vert = (x, y1, y2) => {
      const dx = t / 2;
      return `${x},${y1 + dx} ${x + dx},${y1 + t} ${x + dx},${y2 - t} ${x},${y2 - dx} ${x - dx},${y2 - t} ${x - dx},${y1 + t}`;
    };
    const left = t, right = w - t, top = t, bottom = h - t;
    return {
      a: horiz(left, top, right),
      b: vert(right, top + gap, mid - gap),
      c: vert(right, mid + gap, bottom - gap),
      d: horiz(left, bottom, right),
      e: vert(left, mid + gap, bottom - gap),
      f: vert(left, top + gap, mid - gap),
      g: horiz(left, mid, right),
      _on: on,
    };
  }
  function SevenSeg({ value, h = 88, t = 7, gap = 0.5, onColor = "#ffcf78", offColor = "rgba(255,207,120,0.07)", glow = false, gapPx = 4 }) {
    const w = Math.round(h * 0.46);
    const chars = String(value).split("");
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: gapPx }}>
        {chars.map((ch, i) => {
          if (ch === ":") {
            return (
              <svg key={i} viewBox="0 0 16 88" style={{ height: h, width: "auto", display: "block" }}>
                {[28, 56].map((cy) => (
                  <circle key={cy} cx="8" cy={cy} r="4.5" fill={onColor} style={glow ? { filter: `drop-shadow(0 0 6px ${onColor})` } : null} />
                ))}
              </svg>
            );
          }
          const p = segPoints(ch, w, h, t, gap);
          return (
            <svg key={i} viewBox={`0 0 ${w} ${h}`} style={{ height: h, width: "auto", display: "block" }}>
              {["a", "b", "c", "d", "e", "f", "g"].map((s) => (
                <polygon
                  key={s}
                  points={p[s]}
                  fill={p._on.has(s) ? onColor : offColor}
                  style={p._on.has(s) && glow ? { filter: `drop-shadow(0 0 5px ${onColor})` } : null}
                />
              ))}
            </svg>
          );
        })}
      </span>
    );
  }

  // ---- ASCII sky glyph (thunderstorm) ----
  const ASCII_STORM =
`      .--.
   .-(    ).
  (___.__)__)
    /_  /_
     /  /`;

  function AsciiSky({ color = "#ffcf78", size = 13, glow = false }) {
    return (
      <pre style={{
        margin: 0, fontFamily: "var(--mono)", color, fontSize: size, lineHeight: 1.05,
        textShadow: glow ? `0 0 8px ${color}88` : "none", whiteSpace: "pre",
      }}>{ASCII_STORM}</pre>
    );
  }

  // ---- simple smooth SVG line path from values ----
  function linePath(vals, w, h, pad = 0) {
    const min = Math.min(...vals), max = Math.max(...vals);
    const range = max - min || 1;
    const pts = vals.map((v, i) => [
      pad + (i / (vals.length - 1)) * (w - pad * 2),
      h - pad - ((v - min) / range) * (h - pad * 2),
    ]);
    let d = `M ${pts[0][0]},${pts[0][1]}`;
    for (let i = 1; i < pts.length; i++) {
      const [x0, y0] = pts[i - 1], [x1, y1] = pts[i];
      const cx = (x0 + x1) / 2;
      d += ` C ${cx},${y0} ${cx},${y1} ${x1},${y1}`;
    }
    return { d, pts };
  }

  window.POV = { W, SevenSeg, AsciiSky, linePath };
})();