import { createClient } from "@/lib/supabase/server";
import { AppointmentCalendar } from "@/components/appointments/appointment-calendar";
import { ReceptionView } from "@/components/appointments/reception-view";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Calendar, List } from "lucide-react";

export const dynamic = "force-dynamic";

export default async function AppointmentsPage() {
  const supabase = await createClient();

  const { data: doctors } = await supabase
    .from("users")
    .select("id, full_name, specialty, color")
    .eq("role", "doctor")
    .eq("is_active", true)
    .order("full_name");

  const { data: patients } = await supabase
    .from("patients")
    .select("id, first_name, last_name, phone")
    .eq("is_active", true)
    .order("last_name")
    .limit(200);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Agenda</h1>
        <p className="text-muted-foreground">Calendario de citas y vista de recepcion.</p>
      </div>

      <Tabs defaultValue="calendar">
        <TabsList>
          <TabsTrigger value="calendar" className="gap-2"><Calendar className="h-4 w-4" /> Calendario</TabsTrigger>
          <TabsTrigger value="reception" className="gap-2"><List className="h-4 w-4" /> Recepcion</TabsTrigger>
        </TabsList>
        <TabsContent value="calendar" className="mt-4">
          <AppointmentCalendar doctors={doctors || []} patients={patients || []} />
        </TabsContent>
        <TabsContent value="reception" className="mt-4">
          <ReceptionView />
        </TabsContent>
      </Tabs>
    </div>
  );
}
