import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Calendar, Compass, Eye, MapPin } from "lucide-react";

import { SiteHeader } from "@/components/landing/site-header";
import { SiteFooter } from "@/components/landing/site-footer";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { db } from "@/lib/db";
import { listPopularDestinations } from "@/lib/destinations";

export const metadata: Metadata = {
  title: "Explore — trending destinations & trips · Trovo",
  description:
    "Browse the most-planned destinations and shared trip itineraries on Trovo. Real plans from real travelers, plus tours from verified local guides.",
  openGraph: {
    title: "Explore — trending destinations & trips · Trovo",
    description:
      "Browse the most-planned destinations and shared trip itineraries on Trovo.",
    type: "website",
  },
};

export const revalidate = 3600;

export default async function ExplorePage() {
  const [destinations, trips] = await Promise.all([
    listPopularDestinations(12),
    db.trip.findMany({
      where: { status: "PUBLISHED" },
      orderBy: [{ viewCount: "desc" }, { updatedAt: "desc" }],
      take: 9,
      select: {
        id: true,
        slug: true,
        title: true,
        destination: true,
        days: true,
        viewCount: true,
        travelStyle: true,
        user: { select: { name: true, image: true } },
      },
    }),
  ]);

  return (
    <>
      <SiteHeader />
      <main id="main-content" className="flex flex-1 flex-col">
        <section className="relative overflow-hidden border-b border-border">
          <div
            aria-hidden
            className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,hsl(172_80%_45%/0.15),transparent_50%),radial-gradient(ellipse_at_bottom_right,hsl(35_95%_58%/0.12),transparent_50%)]"
          />
          <div className="mx-auto flex max-w-7xl flex-col gap-4 px-6 py-16 sm:py-20">
            <span className="inline-flex w-fit items-center gap-2 rounded-full border border-border bg-card/40 px-3 py-1 text-xs text-muted-foreground">
              <Compass className="size-3 text-primary" />
              Explore
            </span>
            <h1 className="font-display max-w-3xl text-4xl font-bold leading-tight sm:text-5xl">
              <span className="bg-gradient-to-r from-[hsl(172_80%_45%)] to-[hsl(35_95%_58%)] bg-clip-text text-transparent">
                Trending destinations
              </span>{" "}
              and trips shared by Trovo travelers.
            </h1>
            <p className="max-w-2xl text-balance text-muted-foreground">
              Get inspired by real itineraries planned in the last month, or dive into a
              destination guide to see what locals recommend.
            </p>
          </div>
        </section>

        {destinations.length > 0 && (
          <section className="border-b border-border bg-background py-16">
            <div className="mx-auto max-w-7xl px-6">
              <div className="mb-8 flex flex-wrap items-end justify-between gap-3">
                <div className="flex flex-col gap-1">
                  <span className="font-mono text-xs uppercase tracking-[0.3em] text-primary">
                    Popular destinations
                  </span>
                  <h2 className="font-display text-2xl font-semibold sm:text-3xl">
                    Where Trovo travelers are headed
                  </h2>
                </div>
                <p className="text-sm text-muted-foreground">
                  Ranked by published trips and tour bookings.
                </p>
              </div>

              <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                {destinations.map((d) => (
                  <Link
                    key={d.citySlug}
                    href={`/destinations/${d.citySlug}`}
                    className="group"
                  >
                    <Card className="overflow-hidden transition-transform group-hover:-translate-y-0.5">
                      <div className="relative aspect-[5/3] w-full overflow-hidden bg-secondary/40">
                        {d.heroImage ? (
                          <Image
                            src={d.heroImage}
                            alt={`${d.city}, ${d.country}`}
                            fill
                            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                            className="object-cover transition-transform group-hover:scale-105"
                          />
                        ) : (
                          <div className="flex h-full items-center justify-center text-muted-foreground">
                            <MapPin className="size-8" />
                          </div>
                        )}
                        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/70 to-transparent" />
                        <div className="absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 p-4">
                          <div className="flex flex-col gap-0.5 text-white">
                            <span className="font-display text-lg font-semibold leading-tight">
                              {d.city}
                            </span>
                            <span className="text-xs text-white/70">{d.country}</span>
                          </div>
                          <span className="rounded-full bg-white/15 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wider text-white backdrop-blur">
                            {d.listingCount} tour{d.listingCount === 1 ? "" : "s"}
                          </span>
                        </div>
                      </div>
                    </Card>
                  </Link>
                ))}
              </div>
            </div>
          </section>
        )}

        {trips.length > 0 && (
          <section className="border-b border-border bg-card/20 py-16">
            <div className="mx-auto max-w-7xl px-6">
              <div className="mb-8 flex flex-wrap items-end justify-between gap-3">
                <div className="flex flex-col gap-1">
                  <span className="font-mono text-xs uppercase tracking-[0.3em] text-primary">
                    Shared itineraries
                  </span>
                  <h2 className="font-display text-2xl font-semibold sm:text-3xl">
                    Trip plans from the community
                  </h2>
                </div>
                <Link
                  href="/sign-up"
                  className="hidden items-center gap-1 text-sm text-primary hover:underline sm:inline-flex"
                >
                  Plan your own <ArrowRight className="size-4" />
                </Link>
              </div>

              <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                {trips.map((t) => (
                  <Link key={t.id} href={`/explore/${t.slug}`} className="group">
                    <Card className="h-full transition-transform group-hover:-translate-y-0.5">
                      <CardContent className="flex h-full flex-col gap-3 p-5">
                        <span className="font-mono text-[11px] uppercase tracking-wider text-primary">
                          {t.travelStyle.toLowerCase()}
                        </span>
                        <h3 className="font-display text-lg font-semibold leading-snug line-clamp-2">
                          {t.title}
                        </h3>
                        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                          <span className="flex items-center gap-1">
                            <MapPin className="size-3" />
                            {t.destination}
                          </span>
                          <span className="flex items-center gap-1">
                            <Calendar className="size-3" />
                            {t.days} day{t.days === 1 ? "" : "s"}
                          </span>
                          {t.viewCount > 0 && (
                            <span className="flex items-center gap-1">
                              <Eye className="size-3" />
                              {t.viewCount} view{t.viewCount === 1 ? "" : "s"}
                            </span>
                          )}
                        </div>
                        <div className="mt-auto flex items-center gap-2 border-t border-border pt-3 text-xs text-muted-foreground">
                          {t.user.image ? (
                            <Image
                              src={t.user.image}
                              alt={t.user.name ?? "Trovo traveler"}
                              width={20}
                              height={20}
                              className="size-5 rounded-full object-cover"
                            />
                          ) : (
                            <span className="grid size-5 place-items-center rounded-full bg-secondary text-[10px]">
                              {(t.user.name ?? "T")[0]?.toUpperCase()}
                            </span>
                          )}
                          <span>Planned by {t.user.name ?? "a Trovo traveler"}</span>
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                ))}
              </div>
            </div>
          </section>
        )}

        <section className="bg-background py-16">
          <div className="mx-auto flex max-w-3xl flex-col items-center gap-4 px-6 text-center">
            <h2 className="font-display text-2xl font-semibold sm:text-3xl">
              Plan your own trip in seconds
            </h2>
            <p className="max-w-xl text-balance text-muted-foreground">
              Give Trovo a destination and a few preferences — get a day-by-day itinerary
              with tours, weather, and a map in under a minute.
            </p>
            <Button asChild size="lg">
              <Link href="/sign-up">
                Start planning free <ArrowRight className="size-4" />
              </Link>
            </Button>
          </div>
        </section>
      </main>
      <SiteFooter />
    </>
  );
}