import { DashboardLayout } from "@/components/layout/dashboard-layout";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Calendar, Clock, Users, CheckCircle } from "lucide-react";
import Link from "next/link";
import { requireDentist } from "@/lib/auth-session/auth-server";
import { prisma } from "@/lib/types/prisma";
import { safeFindManyAppointments } from "@/lib/utils/appointment-helpers";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Dentist Dashboard",
};

// Force dynamic rendering since this page uses authentication (headers)
export const dynamic = "force-dynamic";

export default async function DentistDashboard() {
  // Require dentist role - will redirect to appropriate page if not dentist
  const { user } = await requireDentist();

  // Calculate date ranges
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);
  const now = new Date();

  // Run all queries in parallel for better performance
  const [
    todayAppointments,
    pendingAppointments,
    totalPatients,
    completedAppointments,
    upcomingAppointments,
  ] = await Promise.all([
    // Fetch today's appointments
    safeFindManyAppointments({
      where: {
        dentistId: user.id,
        date: {
          gte: today,
          lt: tomorrow,
        },
        status: {
          in: ["pending", "confirmed"],
        },
      },
      include: {
        patient: true,
        service: true,
      },
      orderBy: {
        timeSlot: "asc",
      },
    }),
    // Fetch pending appointments
    safeFindManyAppointments({
      where: {
        dentistId: user.id,
        status: "pending",
        date: {
          gte: now,
        },
      },
      include: {
        patient: true,
        service: true,
      },
      orderBy: {
        date: "asc",
      },
      take: 5,
    }),
    // Get total unique patients
    prisma.appointment.groupBy({
      by: ["patientId"],
      where: {
        dentistId: user.id,
      },
    }),
    // Get completed appointments count
    prisma.appointment.count({
      where: {
        dentistId: user.id,
        status: "completed",
      },
    }),
    // Get upcoming appointments count
    prisma.appointment.count({
      where: {
        dentistId: user.id,
        status: {
          in: ["pending", "confirmed"],
        },
        date: {
          gte: now,
        },
      },
    }),
  ]);

  return (
    <DashboardLayout
      user={{ ...user, role: user.role || "dentist" }}
      role="dentist"
    >
      <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6 px-4 lg:px-6">
        <div>
          <h1 className="text-3xl font-bold">Welcome, Dr. {user.name}!</h1>
          <p className="text-muted-foreground">
            Manage your schedule and patients
          </p>
        </div>

        {/* Statistics Cards */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Today&apos;s Appointments
              </CardTitle>
              <Calendar className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {todayAppointments.length}
              </div>
              <p className="text-xs text-muted-foreground">
                Scheduled for today
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Upcoming</CardTitle>
              <Clock className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{upcomingAppointments}</div>
              <p className="text-xs text-muted-foreground">
                Future appointments
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Total Patients
              </CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalPatients.length}</div>
              <p className="text-xs text-muted-foreground">Unique patients</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Completed</CardTitle>
              <CheckCircle className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{completedAppointments}</div>
              <p className="text-xs text-muted-foreground">All time</p>
            </CardContent>
          </Card>
        </div>

        {/* Quick Actions */}
        <div className="grid gap-4 md:grid-cols-3">
          <Link href="/dentist/appointments">
            <Button className="w-full h-20" variant="outline">
              <div className="flex flex-col items-center gap-2">
                <Calendar className="h-6 w-6" />
                <span>View All Appointments</span>
              </div>
            </Button>
          </Link>
          <Link href="/dentist/schedule">
            <Button className="w-full h-20" variant="outline">
              <div className="flex flex-col items-center gap-2">
                <Clock className="h-6 w-6" />
                <span>Manage Schedule</span>
              </div>
            </Button>
          </Link>
          <Link href="/dentist/patients">
            <Button className="w-full h-20" variant="outline">
              <div className="flex flex-col items-center gap-2">
                <Users className="h-6 w-6" />
                <span>Patient Records</span>
              </div>
            </Button>
          </Link>
        </div>

        {/* Today's Schedule */}
        <Card>
          <CardHeader>
            <CardTitle>Today&apos;s Schedule</CardTitle>
            <CardDescription>{today.toLocaleDateString()}</CardDescription>
          </CardHeader>
          <CardContent>
            {todayAppointments.length === 0 ? (
              <p className="text-muted-foreground text-center py-8">
                No appointments scheduled for today
              </p>
            ) : (
              <div className="space-y-4">
                {todayAppointments.map((appointment) => (
                  <div
                    key={appointment.id}
                    className="flex items-center justify-between border-b pb-4 last:border-0"
                  >
                    <div>
                      <p className="font-medium">{appointment.patient.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {appointment.service.name}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        {appointment.timeSlot}
                      </p>
                    </div>
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline">
                        View Details
                      </Button>
                      {appointment.status === "pending" && (
                        <Button size="sm">Confirm</Button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Pending Appointments */}
        <Card>
          <CardHeader>
            <CardTitle>Pending Appointments</CardTitle>
            <CardDescription>
              Appointments awaiting confirmation
            </CardDescription>
          </CardHeader>
          <CardContent>
            {pendingAppointments.length === 0 ? (
              <p className="text-muted-foreground text-center py-8">
                No pending appointments
              </p>
            ) : (
              <div className="space-y-4">
                {pendingAppointments.map((appointment) => (
                  <div
                    key={appointment.id}
                    className="flex items-center justify-between border-b pb-4 last:border-0"
                  >
                    <div>
                      <p className="font-medium">{appointment.patient.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {appointment.service.name}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        {new Date(appointment.date).toLocaleDateString()} at{" "}
                        {appointment.timeSlot}
                      </p>
                    </div>
                    <div className="flex gap-2">
                      <Button size="sm">Accept</Button>
                      <Button size="sm" variant="destructive">
                        Decline
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}