import Link from "next/link";
import { ArrowUpRight, Calendar, Heart, Sparkles } from "lucide-react";

import { auth } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export const metadata = { title: "Dashboard" };

export default async function DashboardOverviewPage() {
  const session = await auth();
  const name = session?.user?.name ?? "Traveler";

  return (
    <div className="mx-auto flex max-w-6xl flex-col gap-8">
      <header className="flex flex-col gap-2">
        <span className="font-mono text-xs uppercase tracking-[0.3em] text-muted-foreground">
          Overview
        </span>
        <h1 className="font-display text-4xl font-bold leading-tight sm:text-5xl">
          Where to next, {firstName(name)}?
        </h1>
        <p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
          Generate an AI itinerary in seconds, save destinations you&apos;re dreaming about, or
          browse guided tours from verified local providers.
        </p>
      </header>

      <section className="grid gap-4 sm:grid-cols-3">
        <StatCard label="Trips planned" value="0" icon={Calendar} />
        <StatCard label="Wishlisted" value="0" icon={Heart} />
        <StatCard label="Bookings" value="0" icon={ArrowUpRight} />
      </section>

      <section className="grid gap-4 lg:grid-cols-2">
        <Card className="bg-gradient-to-br from-primary/15 via-card to-card">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Sparkles className="size-5 text-primary" /> Plan your first trip
            </CardTitle>
            <CardDescription>
              Tell Trovo where you want to go and the AI builds a complete day-by-day itinerary
              with food spots, weather, and a packing list.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button asChild>
              <Link href="/dashboard/plan">Start planning →</Link>
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Browse the marketplace</CardTitle>
            <CardDescription>
              Discover guided tours and experiences from verified local providers worldwide.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button asChild variant="outline">
              <Link href="/tours">Explore tours →</Link>
            </Button>
          </CardContent>
        </Card>
      </section>
    </div>
  );
}

function StatCard({
  label,
  value,
  icon: Icon,
}: {
  label: string;
  value: string;
  icon: React.ComponentType<{ className?: string }>;
}) {
  return (
    <Card>
      <CardContent className="flex items-center justify-between p-6">
        <div className="flex flex-col gap-1">
          <span className="text-sm text-muted-foreground">{label}</span>
          <span className="font-display text-3xl font-semibold">{value}</span>
        </div>
        <div className="flex size-11 items-center justify-center rounded-full bg-primary/15 text-primary">
          <Icon className="size-5" />
        </div>
      </CardContent>
    </Card>
  );
}

function firstName(name: string) {
  return name.split(" ")[0] ?? name;
}