/* WeatherMate — UI components */

function StatusBar({ time }) {
  return (
    <div className="statusbar">
      <span>{time}</span>
      <span className="sb-icons">
        {/* cellular */}
        <svg width="18" height="12" viewBox="0 0 18 12" fill="#fff">
          <rect x="0" y="8" width="3" height="4" rx="1" />
          <rect x="5" y="5.5" width="3" height="6.5" rx="1" />
          <rect x="10" y="3" width="3" height="9" rx="1" />
          <rect x="15" y="0.5" width="3" height="11.5" rx="1" />
        </svg>
        {/* wifi */}
        <svg width="17" height="12" viewBox="0 0 17 12" fill="#fff">
          <path d="M8.5 2.2c2.6 0 5 1 6.8 2.7l1.3-1.4A11 11 0 0 0 8.5.2 11 11 0 0 0 .9 3.5l1.3 1.4A9.4 9.4 0 0 1 8.5 2.2Z"/>
          <path d="M8.5 5.7c1.6 0 3.1.6 4.3 1.7l1.3-1.4a8 8 0 0 0-11.2 0l1.3 1.4A6.1 6.1 0 0 1 8.5 5.7Z"/>
          <path d="M8.5 9.1 10.7 7a3.1 3.1 0 0 0-4.4 0Z"/>
        </svg>
        {/* battery */}
        <svg width="26" height="13" viewBox="0 0 26 13" fill="none">
          <rect x="0.5" y="0.5" width="22" height="12" rx="3.5" stroke="#fff" strokeOpacity="0.5"/>
          <rect x="2" y="2" width="18" height="9" rx="2" fill="#fff"/>
          <rect x="23.5" y="4" width="2" height="5" rx="1" fill="#fff" fillOpacity="0.6"/>
        </svg>
      </span>
    </div>
  );
}

function HourSlot({ h, unit, active, animate, onClick, isNow }) {
  const cond = WX.conditionOf(h.code);
  return (
    <button className={"hour-slot" + (active ? " active" : "")} onClick={onClick}>
      <span className="h-label">{isNow ? "Now" : WX.fmtHour(h.time)}</span>
      <span className="h-pop">{h.pop != null && h.pop >= 20 ? h.pop + "%" : ""}</span>
      <WeatherIcon condition={cond} isDay={h.isDay} size={34} animate={animate} />
      <span className="h-temp">{WX.conv.temp(h.temp, unit)}°</span>
    </button>
  );
}

function WeekRow({ d, idx, unit, animate, range }) {
  const cond = WX.conditionOf(d.code);
  const lo = WX.conv.temp(d.lo, unit), hi = WX.conv.temp(d.hi, unit);
  const span = Math.max(1, range.max - range.min);
  const left = ((d.lo - range.min) / span) * 100;
  const width = ((d.hi - d.lo) / span) * 100;
  return (
    <div className="week-row">
      <span className="w-day">{WX.fmtDay(d.date, idx)}</span>
      <WeatherIcon condition={cond} isDay={true} size={28} animate={animate} />
      <span className="w-pop">{d.pop != null && d.pop >= 20 ? d.pop + "%" : ""}</span>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span className="w-lo">{lo}°</span>
        <div className="tempbar" style={{ flex: 1 }}>
          <i style={{ left: left + "%", width: width + "%" }} />
        </div>
        <span className="w-hi">{hi}°</span>
      </div>
    </div>
  );
}

/* sun arc graphic for sunrise/sunset widget */
function SunArc({ sunrise, sunset, now }) {
  const sr = new Date(sunrise).getTime();
  const ss = new Date(sunset).getTime();
  const t = Math.min(1, Math.max(0, (now - sr) / (ss - sr)));
  const W = 120, H = 56, pad = 8;
  const ax = pad + t * (W - pad * 2);
  // parabola y
  const norm = (ax - W / 2) / (W / 2 - pad);
  const ay = H - 8 - (1 - norm * norm) * (H - 18);
  return (
    <div className="sun-arc">
      <svg viewBox="0 0 120 56" preserveAspectRatio="none">
        <path d="M8 48 Q60 -6 112 48" fill="none" stroke="rgba(255,255,255,0.25)" strokeWidth="2" strokeDasharray="3 4"/>
        <line x1="0" y1="48" x2="120" y2="48" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
        {t > 0 && t < 1 && (
          <circle cx={ax} cy={ay} r="5" fill="#FFD45E" stroke="#fff" strokeWidth="1.5">
          </circle>
        )}
      </svg>
    </div>
  );
}

/* wind compass */
function Compass({ dir, speed, unit }) {
  const a = (dir || 0) * Math.PI / 180;
  const cx = 38, cy = 38, r = 28;
  const x2 = cx + Math.sin(a) * r, y2 = cy - Math.cos(a) * r;
  const x1 = cx - Math.sin(a) * (r - 6), y1 = cy + Math.cos(a) * (r - 6);
  return (
    <svg className="compass" width="76" height="76" viewBox="0 0 76 76">
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1.5"/>
      {["N","E","S","W"].map((c, i) => {
        const aa = i * Math.PI / 2;
        return <text key={c} x={cx + Math.sin(aa) * (r + 7)} y={cy - Math.cos(aa) * (r + 7) + 4}
          fill="rgba(235,235,245,0.7)" fontSize="9" fontWeight="700" textAnchor="middle">{c}</text>;
      })}
      <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
      <circle cx={cx} cy={cy} r="3" fill="#fff"/>
      <text x={cx} y={cy - 8} fill="#fff" fontSize="13" fontWeight="600" textAnchor="middle">{speed}</text>
      <text x={cx} y={cy + 14} fill="rgba(235,235,245,0.6)" fontSize="7.5" fontWeight="600" textAnchor="middle">{unit}</text>
    </svg>
  );
}

/* generic detail widget */
function DetailWidget({ icon, title, children }) {
  return (
    <div className="dwidget glass">
      <div className="dw-head"><span style={{ fontSize: 14 }}>{icon}</span>{title}</div>
      {children}
    </div>
  );
}

function BottomNav({ view, onHome, onSearch, onList, onRadar, onPrefs }) {
  return (
    <div className="bottombar">
      <button className={"nav-btn" + (view === "list" ? " active" : "")} onClick={onList} aria-label="Conditions">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
          <path d="M4 7h11M4 12h11M4 17h7"/><circle cx="19" cy="7" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/>
        </svg>
      </button>
      <button className={"nav-btn" + (view === "radar" ? " active" : "")} onClick={onRadar} aria-label="Radar">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 12 3.5 4.5"/><circle cx="12" cy="12" r="2"/><path d="M6.3 6.3A8 8 0 1 0 17.7 17.7"/><path d="M9.2 9.2A4 4 0 1 0 14.8 14.8"/>
        </svg>
      </button>
      <button className="add" onClick={onSearch} aria-label="Add city">+</button>
      <button className={"nav-btn" + (view === "prefs" ? " active" : "")} onClick={onPrefs} aria-label="Preferences">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/>
        </svg>
      </button>
      <button className={"nav-btn" + (view === "home" ? " active" : "")} onClick={onHome} aria-label="Home">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z"/><circle cx="12" cy="10" r="2.6"/>
        </svg>
      </button>
    </div>
  );
}

Object.assign(window, { StatusBar, HourSlot, WeekRow, SunArc, Compass, DetailWidget, BottomNav });
