import { WeekCalendar } from "@/components/WeekCalendar";
import { WeekNav } from "@/components/WeekNav";
import { PARKS } from "@/lib/parks";
import { openDb, getDateRange } from "@/lib/db";

interface PageProps {
  searchParams: Promise<{ week?: string }>;
}

function getWeekStart(param: string | undefined): string {
  if (param && /^\d{4}-\d{2}-\d{2}$/.test(param)) {
    const d = new Date(param + "T00:00:00");
    if (!isNaN(d.getTime())) {
      // Snap to Sunday
      d.setDate(d.getDate() - d.getDay());
      return d.toISOString().slice(0, 10);
    }
  }
  const today = new Date();
  today.setDate(today.getDate() - today.getDay());
  return today.toISOString().slice(0, 10);
}

function getWeekDates(sundayIso: string): string[] {
  return Array.from({ length: 7 }, (_, i) => {
    const d = new Date(sundayIso + "T00:00:00");
    d.setDate(d.getDate() + i);
    return d.toISOString().slice(0, 10);
  });
}

export default async function HomePage({ searchParams }: PageProps) {
  const params = await searchParams;
  const weekStart = getWeekStart(params.week);
  const weekDates = getWeekDates(weekStart);
  const endDate = weekDates[6];

  const db = openDb();
  const data = getDateRange(db, weekStart, endDate);
  db.close();

  // Count how many days have any scraped data (to show empty state)
  const scrapedCount = Object.values(data).reduce(
    (sum, parkData) => sum + Object.keys(parkData).length,
    0
  );

  // Only show parks that have at least one open day this week
  const visibleParks = PARKS.filter((park) =>
    weekDates.some((date) => data[park.id]?.[date]?.isOpen)
  );

  return (
    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
      {/* Header */}
      <header style={{
        borderBottom: "1px solid var(--color-border)",
        padding: "16px 24px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 16,
        position: "sticky",
        top: 0,
        zIndex: 20,
        background: "var(--color-bg)",
      }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <span style={{ fontSize: "1rem", fontWeight: 700, color: "var(--color-text)", letterSpacing: "-0.02em" }}>
            Six Flags Calendar
          </span>
          <span style={{ fontSize: "0.75rem", color: "var(--color-text-muted)" }}>
            {visibleParks.length} of {PARKS.length} parks open
          </span>
        </div>

        <WeekNav weekStart={weekStart} weekDates={weekDates} />

        <Legend />
      </header>

      {/* Calendar */}
      <main style={{ padding: "0 24px 40px" }}>
        {scrapedCount === 0 ? (
          <EmptyState />
        ) : (
          <WeekCalendar parks={visibleParks} weekDates={weekDates} data={data} />
        )}
      </main>
    </div>
  );
}

function Legend() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, fontSize: "0.72rem", color: "var(--color-text-muted)" }}>
      <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
        <span style={{
          display: "inline-block", width: 28, height: 14, borderRadius: 3,
          background: "var(--color-open-bg)", border: "1px solid var(--color-open-border)",
        }} />
        Open
      </span>
      <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
        <span style={{ color: "var(--color-text-dim)" }}>Closed</span>
        <span style={{ color: "var(--color-border)" }}>·</span>
        <span style={{ color: "var(--color-text-dim)" }}>— no data</span>
      </span>
    </div>
  );
}

function EmptyState() {
  return (
    <div style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      padding: "80px 24px",
      gap: 12,
      color: "var(--color-text-muted)",
    }}>
      <div style={{ fontSize: "2rem" }}>📅</div>
      <div style={{ fontSize: "1rem", fontWeight: 600, color: "var(--color-text)" }}>No data scraped yet</div>
      <div style={{ fontSize: "0.85rem", textAlign: "center", lineHeight: 1.6 }}>
        Run the following to populate the calendar:
      </div>
      <pre style={{
        background: "var(--color-surface)",
        border: "1px solid var(--color-border)",
        borderRadius: 8,
        padding: "12px 20px",
        fontSize: "0.8rem",
        color: "var(--color-text)",
        lineHeight: 1.8,
      }}>
        npm run discover{"\n"}npm run scrape
      </pre>
    </div>
  );
}