"use client";

import { AppointmentCard } from "./AppointmentCard";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type { Appointment } from "@/types/appointments";

interface AppointmentsListProps {
  appointments: Appointment[];
  userRole: "PATIENT" | "DOCTOR" | "ADMIN";
  onApprove?: (id: string) => void;
  onReject?: (id: string) => void;
  onCancel?: (id: string) => void;
}

export const AppointmentsList = ({
  appointments,
  userRole,
  onApprove,
  onReject,
  onCancel,
}: AppointmentsListProps) => {
  const pendientes = appointments.filter((a) => a.estado === "PENDIENTE");
  const aprobadas = appointments.filter((a) => a.estado === "APROBADA");
  const completadas = appointments.filter((a) => a.estado === "COMPLETADA");
  const otras = appointments.filter(
    (a) => a.estado === "RECHAZADA" || a.estado === "CANCELADA"
  );

  return (
    <Tabs defaultValue="pendientes" className="w-full">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="pendientes">
          Pendientes {pendientes.length > 0 && `(${pendientes.length})`}
        </TabsTrigger>
        <TabsTrigger value="aprobadas">
          Aprobadas {aprobadas.length > 0 && `(${aprobadas.length})`}
        </TabsTrigger>
        <TabsTrigger value="completadas">
          Completadas {completadas.length > 0 && `(${completadas.length})`}
        </TabsTrigger>
        <TabsTrigger value="otras">Otras</TabsTrigger>
      </TabsList>

      <TabsContent value="pendientes" className="space-y-4 mt-4">
        {pendientes.length === 0 ? (
          <p className="text-center text-muted-foreground py-8">
            No hay citas pendientes
          </p>
        ) : (
          pendientes.map((appointment) => (
            <AppointmentCard
              key={appointment.id}
              appointment={appointment}
              userRole={userRole}
              onApprove={onApprove}
              onReject={onReject}
              onCancel={onCancel}
            />
          ))
        )}
      </TabsContent>

      <TabsContent value="aprobadas" className="space-y-4 mt-4">
        {aprobadas.length === 0 ? (
          <p className="text-center text-muted-foreground py-8">
            No hay citas aprobadas
          </p>
        ) : (
          aprobadas.map((appointment) => (
            <AppointmentCard
              key={appointment.id}
              appointment={appointment}
              userRole={userRole}
              onApprove={onApprove}
              onReject={onReject}
              onCancel={onCancel}
            />
          ))
        )}
      </TabsContent>

      <TabsContent value="completadas" className="space-y-4 mt-4">
        {completadas.length === 0 ? (
          <p className="text-center text-muted-foreground py-8">
            No hay citas completadas
          </p>
        ) : (
          completadas.map((appointment) => (
            <AppointmentCard
              key={appointment.id}
              appointment={appointment}
              userRole={userRole}
            />
          ))
        )}
      </TabsContent>

      <TabsContent value="otras" className="space-y-4 mt-4">
        {otras.length === 0 ? (
          <p className="text-center text-muted-foreground py-8">
            No hay citas rechazadas o canceladas
          </p>
        ) : (
          otras.map((appointment) => (
            <AppointmentCard
              key={appointment.id}
              appointment={appointment}
              userRole={userRole}
            />
          ))
        )}
      </TabsContent>
    </Tabs>
  );
};