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";
import TourManagementCard from "./tour-management-card";
import { Plus } from "lucide-react";

type User = {
  id: string;
  email: string;
  name: string | null;
  role: "GUIDE" | "EXPLORER";
  createdAt: Date;
};

interface GuideDashboardProps {
  user: User;
}

export default async function GuideDashboard({ user }: GuideDashboardProps) {
  // Fetch guide's tours
  const tours = await prisma.tour.findMany({
    where: {
      createdById: user.id,
      archived: false,
    },
    include: {
      images: {
        orderBy: {
          order: "asc",
        },
        take: 1,
      },
      _count: {
        select: {
          bookings: true,
          reviews: true,
        },
      },
    },
    orderBy: {
      createdAt: "desc",
    },
  });

  // Get archived tours count
  const archivedCount = await prisma.tour.count({
    where: {
      createdById: user.id,
      archived: true,
    },
  });

  // Get stats
  const totalBookings = await prisma.booking.count({
    where: {
      tour: {
        createdById: user.id,
      },
    },
  });

  const totalReviews = await prisma.review.count({
    where: {
      tour: {
        createdById: user.id,
      },
    },
  });

  const publishedTours = tours.filter((tour) => tour.published).length;

  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>GUIDE</Badge>
            </div>
            <div className="flex items-center gap-4">
              <Link href="/tours/create">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Create Tour
                </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 back, {user.name || "Guide"}!
          </h2>
          <p className="text-muted-foreground">
            Manage your tours.
          </p>
        </div>

        {/* Stats Grid */}
        <div className="grid gap-4 md:grid-cols-4 mb-8">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Total Tours
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{tours.length}</div>
              <p className="text-xs text-muted-foreground mt-1">
                {publishedTours} published
              </p>
            </CardContent>
          </Card>

          <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">{totalBookings}</div>
              <p className="text-xs text-muted-foreground mt-1">
                All time bookings
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Reviews
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalReviews}</div>
              <p className="text-xs text-muted-foreground mt-1">
                Total reviews received
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                Archived
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{archivedCount}</div>
              <p className="text-xs text-muted-foreground mt-1">
                Archived tours
              </p>
            </CardContent>
          </Card>
        </div>

        {/* Tours Section */}
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <h3 className="text-2xl font-bold">Your Tours</h3>
            {archivedCount > 0 && (
              <Link href="/dashboard/archived">
                <Button variant="outline" size="sm">
                  View Archived ({archivedCount})
                </Button>
              </Link>
            )}
          </div>

          {tours.length === 0 ? (
            <Card>
              <CardContent className="flex flex-col items-center justify-center py-12">
                <h3 className="text-xl font-semibold mb-2">
                  No tours yet
                </h3>
                <p className="text-muted-foreground mb-6 text-center max-w-md">
                  Create your first tour and start sharing your local expertise
                  with travelers from around the world.
                </p>
                <Link href="/tours/create">
                  <Button>
                    <Plus className="mr-2 h-4 w-4" />
                    Create Your First Tour
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ) : (
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {tours.map((tour) => (
                <TourManagementCard key={tour.id} tour={tour} />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}