"use client";

import { useState, useEffect } from "react";
import { WeekCalendar } from "./WeekCalendar";
import { MobileCardList } from "./MobileCardList";
import { WeekNav } from "./WeekNav";
import { Legend } from "./Legend";
import { EmptyState } from "./EmptyState";
import { PARKS, groupByRegion } from "@/lib/parks";
import type { DayData } from "@/lib/db";

const COASTER_MODE_KEY = "coasterMode";

interface HomePageClientProps {
  weekStart: string;
  weekDates: string[];
  today: string;
  isCurrentWeek: boolean;
  data: Record<string, Record<string, DayData>>;
  rideCounts: Record<string, number>;
  coasterCounts: Record<string, number>;
  hasCoasterData: boolean;
  scrapedCount: number;
}

export function HomePageClient({
  weekStart,
  weekDates,
  today,
  isCurrentWeek,
  data,
  rideCounts,
  coasterCounts,
  hasCoasterData,
  scrapedCount,
}: HomePageClientProps) {
  const [coastersOnly, setCoastersOnly] = useState(false);

  // Hydrate from localStorage after mount to avoid SSR mismatch.
  useEffect(() => {
    setCoastersOnly(localStorage.getItem(COASTER_MODE_KEY) === "true");
  }, []);

  const toggle = () => {
    const next = !coastersOnly;
    setCoastersOnly(next);
    localStorage.setItem(COASTER_MODE_KEY, String(next));
  };

  const activeCounts = coastersOnly ? coasterCounts : rideCounts;

  const visibleParks = PARKS.filter((park) =>
    weekDates.some((date) => data[park.id]?.[date]?.isOpen)
  );
  const grouped = groupByRegion(visibleParks);

  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)",
      }}>
        {/* Row 1: Title + controls */}
        <div style={{
          padding: "12px 16px 10px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 12,
        }}>
          <span style={{
            fontSize: "1.1rem",
            fontWeight: 700,
            color: "var(--color-text)",
            letterSpacing: "-0.02em",
          }}>
            Thoosie Calendar
          </span>

          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            {hasCoasterData && (
              <button
                onClick={toggle}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 5,
                  padding: "4px 12px",
                  borderRadius: 20,
                  border: coastersOnly
                    ? "1px solid var(--color-accent)"
                    : "1px solid var(--color-border)",
                  background: coastersOnly
                    ? "var(--color-accent-muted)"
                    : "var(--color-surface)",
                  color: coastersOnly
                    ? "var(--color-accent)"
                    : "var(--color-text-muted)",
                  fontSize: "0.72rem",
                  fontWeight: 600,
                  cursor: "pointer",
                  transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
                  whiteSpace: "nowrap",
                }}
              >
                🎢 Coaster Mode
              </button>
            )}

            <span style={{
              background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
              border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
              borderRadius: 20,
              padding: "4px 14px",
              fontSize: "0.78rem",
              color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
              fontWeight: 600,
            }}>
              {visibleParks.length} of {PARKS.length} parks open this week
            </span>
          </div>
        </div>

        {/* Row 2: Week nav + legend */}
        <div style={{
          padding: "8px 16px 10px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 16,
          borderTop: "1px solid var(--color-border-subtle)",
        }}>
          <WeekNav
            weekStart={weekStart}
            weekDates={weekDates}
            isCurrentWeek={isCurrentWeek}
          />
          <div className="hidden sm:flex">
            <Legend />
          </div>
        </div>
      </header>

      {/* ── Main content ────────────────────────────────────────────────────── */}
      <main className="px-4 sm:px-6 pb-12">
        {scrapedCount === 0 ? (
          <EmptyState />
        ) : (
          <>
            {/* Mobile: card list (hidden on lg+) */}
            <div className="lg:hidden">
              <MobileCardList
                grouped={grouped}
                weekDates={weekDates}
                data={data}
                today={today}
                rideCounts={activeCounts}
                coastersOnly={coastersOnly}
              />
            </div>

            {/* Desktop: week table (hidden below lg) */}
            <div className="hidden lg:block">
              <WeekCalendar
                parks={visibleParks}
                weekDates={weekDates}
                data={data}
                grouped={grouped}
                rideCounts={activeCounts}
                coastersOnly={coastersOnly}
              />
            </div>
          </>
        )}
      </main>
    </div>
  );
}