import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import SignOutButton from "./sign-out-button";
import prisma from "@/lib/db";

interface User {
  id: string;
  name: string | null;
  email: string;
  image: string | null;
  role: "GUIDE" | "EXPLORER";
}

interface ExplorerDashboardProps {
  user: User;
}

export default async function ExplorerDashboard({ user }: ExplorerDashboardProps) {
  // Fetch user's bookings
  const bookings = await prisma.booking.findMany({
    where: {
      userId: user.id,
    },
    include: {
      tour: {
        include: {
          images: {
            orderBy: {
              order: "asc",
            },
            take: 1,
          },
        },
      },
    },
    orderBy: {
      createdAt: "desc",
    },
  });

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      {/* <div className="border-b bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link href="/">
                <Image
                  src="/assets/ZuriGuide Logo.png"
                  alt="ZuriGuide Logo"
                  width={120}
                  height={40}
                  className="object-contain"
                />
              </Link>
              <Badge variant="secondary">EXPLORER</Badge>
            </div>
            <div className="flex items-center gap-4">
              <Link href="/">
                <Button variant="outline">Browse Tours</Button>
              </Link>
              <SignOutButton />
            </div>
          </div>
        </div>
      </div> */}

      <div className="container mx-auto px-4 py-8">
        {/* Welcome Section */}
        <div className="mb-8">
          <h2 className="text-3xl font-bold mb-2">
            Welcome, {user.name || "Traveler"}!
          </h2>
          <p className="text-muted-foreground">
            View your bookings and discover new experiences
          </p>
        </div>

        {/* Stats Grid */}
        <div className="grid gap-4 md:grid-cols-3 mb-8">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Total Bookings
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{bookings.length}</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Upcoming Tours
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {bookings.filter((b) => new Date(b.date) > new Date()).length}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Past Tours
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {bookings.filter((b) => new Date(b.date) <= new Date()).length}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Bookings Section */}
        <div className="space-y-6">
          <h3 className="text-2xl font-bold">Your Bookings</h3>

          {bookings.length === 0 ? (
            <Card>
              <CardContent className="flex flex-col items-center justify-center py-12">
                <h3 className="text-xl font-semibold mb-2">No bookings yet</h3>
                <p className="text-muted-foreground mb-6 text-center max-w-md">
                  Start exploring amazing tours in Zurich and book your first
                  experience!
                </p>
                <Link href="/">
                  <Button>Browse Tours</Button>
                </Link>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-4">
              {bookings.map((booking) => (
                <Card key={booking.id}>
                  <CardContent className="pt-6">
                    <div className="flex flex-col md:flex-row gap-4">
                      <div className="flex-1">
                        <h4 className="font-semibold text-lg mb-1">
                          {booking.tour.title}
                        </h4>
                        <p className="text-sm text-muted-foreground mb-2">
                          {booking.tour.city}
                        </p>
                        <div className="flex flex-wrap gap-4 text-sm">
                          <div>
                            <span className="font-medium">Date:</span>{" "}
                            {new Date(booking.date).toLocaleDateString()}
                          </div>
                          <div>
                            <span className="font-medium">Guests:</span>{" "}
                            {booking.numberOfGuests}
                          </div>
                          <div>
                            <span className="font-medium">Total:</span> CHF{" "}
                            {(booking.totalPrice / 100).toFixed(2)}
                          </div>
                          <div>
                            <Badge
                              variant={
                                booking.status === "CONFIRMED"
                                  ? "default"
                                  : "secondary"
                              }
                            >
                              {booking.status}
                            </Badge>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center">
                        <Link href={`/tours/${booking.tour.slug}`}>
                          <Button variant="outline">View Tour</Button>
                        </Link>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}