SixFlagsSuperCalendar/app/park/[id]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";
import { PARK_MAP } from "@/lib/parks";
import { openDb, getParkMonthData, getApiId } from "@/lib/db";
import { scrapeRidesForDay } from "@/lib/scrapers/sixflags";
import { ParkMonthCalendar } from "@/components/ParkMonthCalendar";
import type { RideStatus, RidesFetchResult } from "@/lib/scrapers/sixflags";

interface PageProps {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ month?: string }>;
}

function parseMonthParam(param: string | undefined): { year: number; month: number } {
  if (param && /^\d{4}-\d{2}$/.test(param)) {
    const [y, m] = param.split("-").map(Number);
    if (y >= 2020 && y <= 2030 && m >= 1 && m <= 12) {
      return { year: y, month: m };
    }
  }
  const now = new Date();
  return { year: now.getFullYear(), month: now.getMonth() + 1 };
}

export default async function ParkPage({ params, searchParams }: PageProps) {
  const { id } = await params;
  const { month: monthParam } = await searchParams;

  const park = PARK_MAP.get(id);
  if (!park) notFound();

  const today = new Date().toISOString().slice(0, 10);
  const { year, month } = parseMonthParam(monthParam);

  const db = openDb();
  const monthData = getParkMonthData(db, id, year, month);
  const apiId = getApiId(db, id);
  db.close();

  // Fetch live ride data — cached 1h via Next.js ISR.
  // Note: the API drops today's date from its response (only returns future dates),
  // so scrapeRidesForDay may fall back to the nearest upcoming date.
  let ridesResult: RidesFetchResult | null = null;
  if (apiId !== null) {
    ridesResult = await scrapeRidesForDay(apiId, today);
  }

  const todayData = monthData[today];
  const parkOpenToday = todayData?.isOpen && todayData?.hoursLabel;

  return (
    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
      {/* ── Header ─────────────────────────────────────────────────────────── */}
      <header style={{
        position: "sticky",
        top: 0,
        zIndex: 20,
        background: "var(--color-bg)",
        borderBottom: "1px solid var(--color-border)",
        padding: "12px 24px",
        display: "flex",
        alignItems: "center",
        gap: 16,
      }}>
        <Link href="/" style={{
          display: "flex",
          alignItems: "center",
          gap: 6,
          fontSize: "0.8rem",
          color: "var(--color-text-muted)",
          textDecoration: "none",
          transition: "color 120ms ease",
        }}
          className="park-name-link"
        >
          ← Calendar
        </Link>
        <div style={{ width: 1, height: 16, background: "var(--color-border)" }} />
        <span style={{ fontSize: "0.9rem", fontWeight: 600, color: "var(--color-text)", letterSpacing: "-0.01em" }}>
          {park.name}
        </span>
        <span style={{ fontSize: "0.75rem", color: "var(--color-text-muted)" }}>
          {park.location.city}, {park.location.state}
        </span>
      </header>

      <main style={{ padding: "24px", maxWidth: 960, margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>

        {/* ── Month Calendar ───────────────────────────────────────────────── */}
        <section>
          <ParkMonthCalendar
            parkId={id}
            year={year}
            month={month}
            monthData={monthData}
            today={today}
          />
        </section>

        {/* ── Ride Status ─────────────────────────────────────────────────── */}
        <section>
          <SectionHeading>
            Rides
            <span style={{ fontSize: "0.72rem", fontWeight: 400, color: "var(--color-text-muted)", marginLeft: 8 }}>
              {ridesResult && !ridesResult.isExact
                ? formatShortDate(ridesResult.dataDate)
                : "Today"}
            </span>
          </SectionHeading>

          <RideList
            ridesResult={ridesResult}
            parkOpenToday={!!parkOpenToday}
            apiIdMissing={apiId === null}
          />
        </section>
      </main>
    </div>
  );
}

// ── Helpers ────────────────────────────────────────────────────────────────

function formatDate(iso: string): string {
  return new Date(iso + "T00:00:00").toLocaleDateString("en-US", {
    weekday: "long", month: "long", day: "numeric",
  });
}

function formatShortDate(iso: string): string {
  return new Date(iso + "T00:00:00").toLocaleDateString("en-US", {
    weekday: "short", month: "short", day: "numeric",
  });
}

// ── Sub-components ─────────────────────────────────────────────────────────

function SectionHeading({ children }: { children: React.ReactNode }) {
  return (
    <div style={{
      display: "flex",
      alignItems: "baseline",
      gap: 0,
      marginBottom: 14,
      paddingBottom: 10,
      borderBottom: "1px solid var(--color-border)",
    }}>
      <h2 style={{
        fontSize: "0.85rem",
        fontWeight: 700,
        color: "var(--color-text)",
        letterSpacing: "0.04em",
        textTransform: "uppercase",
        margin: 0,
      }}>
        {children}
      </h2>
    </div>
  );
}

function RideList({
  ridesResult,
  parkOpenToday,
  apiIdMissing,
}: {
  ridesResult: RidesFetchResult | null;
  parkOpenToday: boolean;
  apiIdMissing: boolean;
}) {
  if (apiIdMissing) {
    return (
      <Callout>
        Park API ID not discovered yet. Run{" "}
        <code style={{ background: "var(--color-surface-2)", padding: "1px 5px", borderRadius: 3, fontSize: "0.8em" }}>
          npm run discover
        </code>{" "}
        to enable ride data.
      </Callout>
    );
  }

  if (!parkOpenToday) {
    return <Callout>Park is closed today — no ride schedule available.</Callout>;
  }

  if (!ridesResult || ridesResult.rides.length === 0) {
    return <Callout>Ride schedule is not yet available from the API.</Callout>;
  }

  const { rides, isExact, dataDate, parkHoursLabel } = ridesResult;
  const openRides = rides.filter((r) => r.isOpen);
  const closedRides = rides.filter((r) => !r.isOpen);

  return (
    <div>
      {/* Summary badge row */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, flexWrap: "wrap" }}>
        <div style={{
          background: "var(--color-open-bg)",
          border: "1px solid var(--color-open-border)",
          borderRadius: 20,
          padding: "4px 12px",
          fontSize: "0.72rem",
          fontWeight: 600,
          color: "var(--color-open-hours)",
        }}>
          {openRides.length} open
        </div>
        {closedRides.length > 0 && (
          <div style={{
            background: "var(--color-surface)",
            border: "1px solid var(--color-border)",
            borderRadius: 20,
            padding: "4px 12px",
            fontSize: "0.72rem",
            fontWeight: 500,
            color: "var(--color-text-muted)",
          }}>
            {closedRides.length} closed / unscheduled
          </div>
        )}
        {!isExact && (
          <span style={{ fontSize: "0.7rem", color: "var(--color-text-dim)" }}>
            Showing {formatShortDate(dataDate)} — live schedule updates daily
          </span>
        )}
      </div>

      {/* Two-column grid */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
        gap: 6,
      }}>
        {openRides.map((ride) => <RideRow key={ride.name} ride={ride} parkHoursLabel={parkHoursLabel} />)}
        {closedRides.map((ride) => <RideRow key={ride.name} ride={ride} parkHoursLabel={parkHoursLabel} />)}
      </div>
    </div>
  );
}

function RideRow({ ride, parkHoursLabel }: { ride: RideStatus; parkHoursLabel?: string }) {
  // Only show the ride's hours when they differ from the park's overall hours.
  // This avoids repeating "10am – 6pm" on every single row when that's the
  // default — but surfaces exceptions like "11am – 4pm" for Safari tours, etc.
  const showHours = ride.isOpen && ride.hoursLabel && ride.hoursLabel !== parkHoursLabel;

  return (
    <div style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 10,
      padding: "8px 12px",
      background: "var(--color-surface)",
      border: `1px solid ${ride.isOpen ? "var(--color-open-border)" : "var(--color-border)"}`,
      borderRadius: 8,
      opacity: ride.isOpen ? 1 : 0.6,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
        <span style={{
          width: 7,
          height: 7,
          borderRadius: "50%",
          background: ride.isOpen ? "var(--color-open-text)" : "var(--color-text-dim)",
          flexShrink: 0,
        }} />
        <span style={{
          fontSize: "0.8rem",
          color: ride.isOpen ? "var(--color-text)" : "var(--color-text-muted)",
          fontWeight: ride.isOpen ? 500 : 400,
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}>
          {ride.name}
        </span>
      </div>
      {showHours && (
        <span style={{
          fontSize: "0.72rem",
          color: "var(--color-open-hours)",
          fontWeight: 500,
          flexShrink: 0,
          whiteSpace: "nowrap",
        }}>
          {ride.hoursLabel}
        </span>
      )}
    </div>
  );
}

function Callout({ children }: { children: React.ReactNode }) {
  return (
    <div style={{
      padding: "14px 18px",
      background: "var(--color-surface)",
      border: "1px solid var(--color-border)",
      borderRadius: 8,
      fontSize: "0.82rem",
      color: "var(--color-text-muted)",
      lineHeight: 1.5,
    }}>
      {children}
    </div>
  );
}