// AGENT_TARGET: moon-phase-calendar — moon phase wheel synced to real lunar calendar

const MOON_PHASES = [
  {
    id: "new",
    name: "New Moon",
    emoji: "🌑",
    desc: "Moon is invisible — a new cycle begins.",
  },
  {
    id: "wax-cres",
    name: "Waxing Crescent",
    emoji: "🌒",
    desc: "A tiny sliver growing on the right side.",
  },
  {
    id: "first-q",
    name: "First Quarter",
    emoji: "🌓",
    desc: "Half the moon is lit — growing brighter!",
  },
  {
    id: "wax-gib",
    name: "Waxing Gibbous",
    emoji: "🌔",
    desc: "Almost full — most of the face is glowing.",
  },
  {
    id: "full",
    name: "Full Moon",
    emoji: "🌕",
    desc: "The whole face shines bright all night long!",
  },
  {
    id: "wan-gib",
    name: "Waning Gibbous",
    emoji: "🌖",
    desc: "Still mostly lit but slowly fading now.",
  },
  {
    id: "last-q",
    name: "Last Quarter",
    emoji: "🌗",
    desc: "Half lit on the left — getting smaller.",
  },
  {
    id: "wan-cres",
    name: "Waning Crescent",
    emoji: "🌘",
    desc: "A slim sliver on the left, almost gone.",
  },
];

// AGENT_TARGET: moon-phase-calendar — compute current lunar phase index 0–7
function currentLunarPhaseIndex() {
  // Reference new moon: Jan 21 2023 20:53 UTC
  const knownNewMoonMs = new Date("2023-01-21T20:53:00Z").getTime();
  const cycleMs = 29.530589 * 24 * 3600 * 1000;
  const elapsed = Date.now() - knownNewMoonMs;
  const fraction = (((elapsed % cycleMs) + cycleMs) % cycleMs) / cycleMs;
  return Math.floor(fraction * 8) % 8;
}

// AGENT_TARGET: moon-phase-calendar — days remaining until next full moon
function daysUntilFullMoon() {
  const knownNewMoonMs = new Date("2023-01-21T20:53:00Z").getTime();
  const cycleMs = 29.530589 * 24 * 3600 * 1000;
  const elapsed = Date.now() - knownNewMoonMs;
  const phaseMs = ((elapsed % cycleMs) + cycleMs) % cycleMs;
  const fullMoonMs = cycleMs * 0.5;
  const remaining =
    fullMoonMs > phaseMs
      ? fullMoonMs - phaseMs
      : cycleMs - phaseMs + fullMoonMs;
  return Math.ceil(remaining / (24 * 3600 * 1000));
}

// AGENT_TARGET: moon-phase-calendar — MoonPhaseWheel main component
function MoonPhaseWheel({ onClose }) {
  const realIdx = currentLunarPhaseIndex();
  const [selectedIdx, setSelectedIdx] = useState(realIdx);
  const daysToFull = daysUntilFullMoon();
  const phase = MOON_PHASES[selectedIdx];
  const isTonight = selectedIdx === realIdx;

  return (
    <div
      className="moon-phase-overlay"
      role="dialog"
      aria-modal="true"
      aria-label="Moon Phase Calendar"
    >
      <div className="moon-phase-panel">
        <button
          className="moon-phase-close"
          onClick={onClose}
          aria-label="Close"
        >
          ✕
        </button>
        <div className="moon-phase-title">🌙 Tonight's Moon</div>
        <div className="moon-phase-hero">
          <div className="moon-phase-big-emoji">{phase.emoji}</div>
          <div className="moon-phase-name">{phase.name}</div>
          {isTonight && (
            <div className="moon-phase-tonight-badge">← Real moon tonight</div>
          )}
        </div>
        <p className="moon-phase-desc">{phase.desc}</p>
        {isTonight && (
          <div className="moon-phase-countdown">
            {daysToFull === 0
              ? "🌕 Full Moon is tonight!"
              : `Full Moon in ${daysToFull} day${daysToFull === 1 ? "" : "s"}`}
          </div>
        )}
        <div
          className="moon-phase-wheel-row"
          role="listbox"
          aria-label="Moon phase selector"
        >
          {MOON_PHASES.map((p, idx) => (
            <button
              key={p.id}
              className={[
                "moon-phase-pip",
                idx === selectedIdx ? "active" : "",
                idx === realIdx ? "tonight" : "",
              ]
                .filter(Boolean)
                .join(" ")}
              role="option"
              aria-selected={idx === selectedIdx}
              title={p.name}
              onClick={() => setSelectedIdx(idx)}
            >
              <span className="moon-phase-pip-emoji">{p.emoji}</span>
              <span className="moon-phase-pip-label">
                {p.name.replace(" Moon", "").replace("ing ", ".\n")}
              </span>
            </button>
          ))}
        </div>
        <div className="moon-phase-hint">
          Glowing ring = tonight's real moon · tap any phase to learn more
        </div>
      </div>
    </div>
  );
}