import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { useMemo, useState } from "react";
import { Sparkles } from "lucide-react";
import { AppShell } from "@/components/AppShell";
import { EventCard, EventCardSkeleton } from "@/components/EventCard";
import { Button } from "@/components/ui/button";
import { fetchActiveCities, fetchEvents, type HotspotEvent } from "@/lib/hotspots";
import { useAuth } from "@/hooks/useAuth";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "HOTSPOTS — See What's Happening Around You" },
      {
        name: "description",
        content:
          "Trending events near you, happening today and this weekend across Ghana, Nigeria, Kenya and South Africa.",
      },
      { property: "og:title", content: "HOTSPOTS — See What's Happening Around You" },
      {
        property: "og:description",
        content: "Find events near you, save them, say you're going and get reminded.",
      },
    ],
  }),
  component: HomePage,
});

function startOfToday() {
  const d = new Date();
  d.setHours(0, 0, 0, 0);
  return d;
}

function Section({
  title,
  subtitle,
  events,
  loading,
  grid,
}: {
  title: string;
  subtitle?: string;
  events: HotspotEvent[];
  loading: boolean;
  grid?: boolean;
}) {
  if (!loading && events.length === 0) return null;
  return (
    <section className="space-y-3">
      <div className="flex items-end justify-between gap-3">
        <div>
          <h2 className="font-display text-xl font-bold">{title}</h2>
          {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
        </div>
      </div>
      {grid ? (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {loading
            ? Array.from({ length: 8 }).map((_, i) => <EventCardSkeleton key={i} />)
            : events.map((event) => <EventCard key={event.id} event={event} />)}
        </div>
      ) : (
        <div className="hs-scroll-row hide-scrollbar">
          {loading
            ? Array.from({ length: 4 }).map((_, i) => <EventCardSkeleton key={i} compact />)
            : events.map((event) => <EventCard key={event.id} event={event} compact />)}
        </div>
      )}
    </section>
  );
}


function HomePage() {
  const { userId } = useAuth();
  const [cityId, setCityId] = useState<string>("");
  const [term, setTerm] = useState("");

  const { data: cities = [] } = useQuery({ queryKey: ["active-cities"], queryFn: fetchActiveCities });


  const today = startOfToday();
  const endOfToday = new Date(today);
  endOfToday.setHours(23, 59, 59);
  const weekendEnd = useMemo(() => {
    const d = new Date(today);
    const daysToSunday = (7 - d.getDay()) % 7;
    d.setDate(d.getDate() + daysToSunday);
    d.setHours(23, 59, 59);
    return d;
  }, [today.getTime()]);

  const base = { cityId: cityId || undefined, limit: 48 as const };

  const trending = useQuery({
    queryKey: ["home", "trending", cityId],
    queryFn: () => fetchEvents({ ...base, featured: true }),
  });
  const near = useQuery({
    queryKey: ["home", "near", cityId],
    queryFn: () => fetchEvents(base),
  });
  const todayQ = useQuery({
    queryKey: ["home", "today", cityId],
    queryFn: () => fetchEvents({ ...base, to: endOfToday.toISOString() }),
  });
  const weekend = useQuery({
    queryKey: ["home", "weekend", cityId],
    queryFn: () => fetchEvents({ ...base, to: weekendEnd.toISOString() }),
  });
  const free = useQuery({
    queryKey: ["home", "free", cityId],
    queryFn: () => fetchEvents({ ...base, freeOnly: true }),
  });
  const newest = useQuery({
    queryKey: ["home", "new", cityId],
    queryFn: () => fetchEvents({ ...base, order: "newest" }),
  });

  return (
    <AppShell>
      <div className="space-y-10">
        <section className="relative overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-primary/25 via-card to-card p-6 md:p-10">
          <span className="inline-flex items-center gap-1.5 rounded-full bg-gold/15 px-3 py-1 text-xs font-semibold text-gold">
            <Sparkles className="h-3.5 w-3.5" /> Now live in Ghana
          </span>
          <h1 className="mt-4 max-w-xl font-display text-3xl font-extrabold leading-tight md:text-5xl">
            See what's happening around you.
          </h1>
          <p className="mt-3 max-w-lg text-sm text-muted-foreground md:text-base">
            Discover events near you, save the ones you love, tell people you're going and never
            miss a moment.
          </p>
          <div className="mt-4 flex flex-wrap gap-2">
            <button
              onClick={() => setCityId("")}
              className={`rounded-full border px-3 py-1.5 text-xs font-medium ${
                cityId === "" ? "border-primary bg-primary/15 text-primary" : "border-border"
              }`}
            >
              All cities
            </button>
            {cities.map((c) => (
              <button
                key={c.id}
                onClick={() => setCityId(c.id)}
                className={`rounded-full border px-3 py-1.5 text-xs font-medium ${
                  cityId === c.id ? "border-primary bg-primary/15 text-primary" : "border-border"
                }`}
              >
                {c.name}
              </button>
            ))}
          </div>
        </section>


        <Section
          title="🔥 Trending Near You"
          subtitle="The events everyone is talking about"
          events={trending.data ?? []}
          loading={trending.isLoading}
        />
        <Section
          title="📍 Events Near You"
          subtitle="Coming up soon in your selected area"
          events={near.data ?? []}
          loading={near.isLoading}
          grid
        />
        <Section
          title="📅 Happening Today"
          events={todayQ.data ?? []}
          loading={todayQ.isLoading}
          grid
        />
        <Section
          title="🎉 This Weekend"
          events={weekend.data ?? []}
          loading={weekend.isLoading}
          grid
        />

        <Section title="⭐ Free Events" events={free.data ?? []} loading={free.isLoading} />
        <Section
          title="🆕 Newly Discovered"
          subtitle="Freshly added to HOTSPOTS"
          events={newest.data ?? []}
          loading={newest.isLoading}
        />

        {!userId && (
          <section className="rounded-3xl border border-border bg-card p-6 text-center">
            <h2 className="font-display text-xl font-bold">Make it yours</h2>
            <p className="mt-2 text-sm text-muted-foreground">
              Create a free account to save events, build your calendar and get reminders.
            </p>
            <Button asChild className="mt-4 rounded-full px-6">
              <Link to="/auth">Create account</Link>
            </Button>
          </section>
        )}
      </div>
    </AppShell>
  );
}