/* global React */
// ====================================================================
// Sky Hearth — Time-of-Day BACKGROUND exploration
// Concept: the page is a sheet on the harbor desk. Time-of-day is the LIGHT
// falling across it — colour temperature, the sun/moon's altitude tracing a
// daily arc, and a "sky margin" above the sheet. Ink stays legible always;
// time is atmosphere, never a theme swap.
// ====================================================================
const { useState: useTodState, useEffect: useTodEffect } = React;

// Each slot: which elemental pair owns it, the celestial body + its altitude
// (deg above horizon) and azimuth (-90 = far left … +90 = far right), the
// wash temperature, the sky-band gradient, and two accent hues.
const TOD = {
  night: {
    label: 'Night', range: '21 — 03', slotIdx: 0, pair: ['Ice', 'Holy'],
    body: 'moon', alt: 78, az: -20,
    // cool indigo light — darkens the page
    washTop: 'rgba(26, 36, 72, 0.50)', washBot: 'rgba(46, 58, 104, 0.34)',
    sky: ['#141d38', '#26315a', '#46557c'],
    accent: '#5a7d9a', accent2: '#b08c3c',
    glow: 'rgba(190, 205, 235, 0.55)', glowWarm: 'rgba(176, 140, 60, 0.40)',
    stars: true, blend: 'multiply', washStrength: 1,
    skyFull: ['#0d142e', '#1a2649', '#33446b'],
    tint: '#4a6fb0',
    poem: 'cold veins wake — Ice & Holy',
  },
  morning: {
    label: 'Morning', range: '05 — 11', slotIdx: 1, pair: ['Fire', 'Earth'],
    body: 'sun', alt: 21, az: -62,
    // rosy dawn rising from the low-left
    washTop: 'rgba(150, 174, 198, 0.16)', washBot: 'rgba(214, 132, 78, 0.34)',
    sky: ['#7fa2c4', '#e7c39c', '#f4d8a6'],
    accent: '#b8632a', accent2: '#7a5230',
    glow: 'rgba(244, 188, 120, 0.62)', glowWarm: 'rgba(244, 188, 120, 0.62)',
    stars: false, blend: 'multiply', washStrength: 0.72,
    skyFull: ['#a9c4dc', '#e8c79c', '#f1cf94'],
    tint: '#e3a85a',
    poem: 'first ember light — Fire & Earth',
  },
  afternoon: {
    label: 'Afternoon', range: '11 — 17', slotIdx: 2, pair: ['Lightning', 'Wind'],
    body: 'sun', alt: 79, az: 22,
    // bright, near-neutral high light — the clearest the page ever reads
    washTop: 'rgba(247, 244, 230, 0.20)', washBot: 'rgba(214, 222, 214, 0.12)',
    sky: ['#4f8ac4', '#93bcdc', '#d4e4ee'],
    accent: '#7d5aa8', accent2: '#3f8a6e',
    glow: 'rgba(255, 250, 230, 0.66)', glowWarm: 'rgba(255, 250, 230, 0.66)',
    stars: false, blend: 'soft-light', washStrength: 0.9,
    skyFull: ['#3f80c0', '#79acd4', '#c2e0ef'],
    tint: '#9aa6d8',
    poem: 'high clear sky — Lightning & Wind',
  },
  evening: {
    label: 'Evening', range: '17 — 21', slotIdx: 3, pair: ['Water', 'Nature'],
    body: 'sun', alt: 14, az: 60,
    // gold low-right sun under a cooling teal upper sky
    washTop: 'rgba(58, 78, 110, 0.34)', washBot: 'rgba(212, 138, 70, 0.36)',
    sky: ['#33486a', '#a8653f', '#e3a85a'],
    accent: '#355e7d', accent2: '#5d7a3f',
    glow: 'rgba(232, 162, 86, 0.66)', glowWarm: 'rgba(232, 162, 86, 0.66)',
    stars: false, blend: 'multiply', washStrength: 0.96,
    skyFull: ['#2c3f63', '#9c5a50', '#e3a85a'],
    tint: '#e0985a',
    poem: 'long gold dusk — Water & Nature',
  },
};
const TOD_ORDER = ['night', 'morning', 'afternoon', 'evening'];

// celestial body position within a band of given w,h (px)
function bodyXY(t, w, h, pad = 14) {
  const x = ((t.az + 90) / 180) * w;
  const y = h - pad - (t.alt / 90) * (h - pad * 2);
  return [x, y];
}

// ---- Celestial body (sun disc + rays, or crescent moon) ----
function Celestial({ t, size = 30 }) {
  const r = size / 2;
  if (t.body === 'moon') {
    return (
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block', overflow: 'visible' }}>
        <circle cx={r} cy={r} r={r} fill="none" />
        <circle cx={r} cy={r} r={r * 2.2} fill={t.glow} opacity="0.18" />
        <circle cx={r} cy={r} r={r * 1.5} fill={t.glow} opacity="0.22" />
        <path d={`M ${r} ${r - r} A ${r} ${r} 0 1 0 ${r} ${r + r} A ${r * 0.72} ${r} 0 1 1 ${r} ${r - r} Z`}
          fill="#eaf0fb" opacity="0.92" />
      </svg>
    );
  }
  // sun
  const rays = Array.from({ length: 12 });
  return (
    <svg width={size * 2} height={size * 2} viewBox={`0 0 ${size * 2} ${size * 2}`} style={{ display: 'block', overflow: 'visible' }}>
      <g transform={`translate(${size} ${size})`}>
        <circle r={r * 2.6} fill={t.glow} opacity="0.20" />
        <circle r={r * 1.7} fill={t.glow} opacity="0.30" />
        {rays.map((_, i) => {
          const a = (i / 12) * Math.PI * 2;
          const r0 = r * 1.35, r1 = r * 2.15;
          return <line key={i} x1={Math.cos(a) * r0} y1={Math.sin(a) * r0}
            x2={Math.cos(a) * r1} y2={Math.sin(a) * r1}
            stroke="#fbe8c4" strokeWidth="1.4" strokeLinecap="round" opacity="0.7" />;
        })}
        <circle r={r} fill="#fdf1cf" />
        <circle r={r} fill="none" stroke={t.accent2} strokeWidth="0.8" opacity="0.5" />
      </g>
    </svg>
  );
}

// ---- Compact diurnal clock (the existing language, shrunk) ----
function ClockDial({ t, size = 92 }) {
  const cx = size / 2, cy = size / 2;
  const rOuter = size / 2 - 2, rInner = rOuter - 8, rHand = rInner - 5, rCenter = 13;
  const handHour = t.slotIdx * 6 + 3;
  const handDeg = (handHour / 24) * 360;
  const ang = (h) => (h / 24) * Math.PI * 2 - Math.PI / 2;
  const xy = (h, r) => [cx + Math.cos(ang(h)) * r, cy + Math.sin(ang(h)) * r];
  return (
    <svg viewBox={`0 0 ${size} ${size}`} style={{ width: size, height: size, display: 'block' }}>
      <circle cx={cx} cy={cy} r={rOuter} fill="var(--paper-light)" stroke="var(--ink)" strokeWidth="1.3" />
      {[0, 1, 2, 3].map(i => {
        const [x0, y0] = xy(i * 6, rInner), [x1, y1] = xy((i + 1) * 6, rInner);
        const isNow = i === t.slotIdx;
        return <path key={i} d={`M ${cx} ${cy} L ${x0} ${y0} A ${rInner} ${rInner} 0 0 1 ${x1} ${y1} Z`}
          fill={isNow ? t.accent : 'transparent'} fillOpacity={isNow ? 0.30 : 0}
          stroke={isNow ? t.accent : 'var(--ink-ghost)'} strokeWidth={isNow ? 1.3 : 0.5}
          strokeDasharray={isNow ? 'none' : '2 3'} />;
      })}
      {Array.from({ length: 24 }).map((_, h) => {
        const major = h % 6 === 0;
        const [x1, y1] = xy(h, rOuter), [x2, y2] = xy(h, major ? rOuter - 5 : rOuter - 2.5);
        return <line key={h} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--ink)" strokeWidth={major ? 1 : 0.5} />;
      })}
      {[0, 6, 12, 18].map(h => { const [x, y] = xy(h, rInner); return <line key={h} x1={cx} y1={cy} x2={x} y2={y} stroke="var(--ink-faded)" strokeWidth="0.5" strokeDasharray="2 2" />; })}
      <g style={{ transform: `translate(${cx}px,${cy}px) rotate(${handDeg}deg)`, transformBox: 'view-box', transformOrigin: '0 0' }}>
        <line x1="0" y1="0" x2="0" y2={-rHand} stroke="var(--ink)" strokeWidth="1.7" strokeLinecap="round" />
        <line x1="0" y1="0" x2="0" y2={4} stroke="var(--ink)" strokeWidth="1.3" strokeLinecap="round" />
      </g>
      <circle cx={cx} cy={cy} r={rCenter} fill="var(--paper)" stroke="var(--ink)" strokeWidth="1" />
      <text x={cx} y={cy + 4} textAnchor="middle" fontSize="12" fill="var(--ink)" fontFamily="IM Fell English SC, serif" fontWeight="600">04</text>
    </svg>
  );
}

Object.assign(window, { TOD, TOD_ORDER, bodyXY, Celestial, ClockDial });