import { createClient } from "@/lib/supabase/server";
import { notFound } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  ArrowLeft,
  Edit,
  Phone,
  Mail,
  Calendar,
  Droplets,
  AlertCircle,
} from "lucide-react";
import Link from "next/link";

export const dynamic = "force-dynamic";

export default async function PatientDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const supabase = await createClient();
  const { data: patient, error } = await supabase
    .from("patients")
    .select("*")
    .eq("id", id)
    .single();

  if (error || !patient) notFound();

  return (
    <div className="mx-auto max-w-4xl space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/patients">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div className="flex items-center gap-3">
            <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-lg">
              {patient.first_name?.[0]}
              {patient.last_name?.[0]}
            </div>
            <div>
              <h1 className="text-2xl font-bold">
                {patient.first_name} {patient.last_name}
              </h1>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                {patient.gender && (
                  <Badge variant="secondary">
                    {patient.gender === "M"
                      ? "Masculino"
                      : patient.gender === "F"
                        ? "Femenino"
                        : "Otro"}
                  </Badge>
                )}
                {patient.date_of_birth && (
                  <span>Nacimiento: {patient.date_of_birth}</span>
                )}
              </div>
            </div>
          </div>
        </div>
        <Link href={`/patients/${id}/edit`}>
          <Button variant="outline" className="gap-2">
            <Edit className="h-4 w-4" /> Editar
          </Button>
        </Link>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {/* Contact Info */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Contacto</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {patient.phone && (
              <div className="flex items-center gap-3 text-sm">
                <Phone className="h-4 w-4 text-muted-foreground" />
                {patient.phone}
              </div>
            )}
            {patient.email && (
              <div className="flex items-center gap-3 text-sm">
                <Mail className="h-4 w-4 text-muted-foreground" />
                {patient.email}
              </div>
            )}
            {patient.curp && (
              <div className="flex items-center gap-3 text-sm">
                <span className="text-muted-foreground text-xs font-mono">
                  CURP
                </span>
                {patient.curp}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Medical Info */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Informacion medica</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {patient.blood_type && (
              <div className="flex items-center gap-3 text-sm">
                <Droplets className="h-4 w-4 text-red-500" />
                Tipo de sangre:{" "}
                <Badge variant="outline">{patient.blood_type}</Badge>
              </div>
            )}
            {patient.allergies && patient.allergies.length > 0 && (
              <div className="flex items-start gap-3 text-sm">
                <AlertCircle className="mt-0.5 h-4 w-4 text-amber-500" />
                <div>
                  <span className="font-medium">Alergias:</span>
                  <div className="mt-1 flex flex-wrap gap-1">
                    {patient.allergies.map((a: string) => (
                      <Badge
                        key={a}
                        variant="destructive"
                        className="text-xs"
                      >
                        {a}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Notes */}
      {patient.notes && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Notas</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground whitespace-pre-wrap">
              {patient.notes}
            </p>
          </CardContent>
        </Card>
      )}

      {/* Timeline placeholder */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Historial</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center py-8 text-center">
            <Calendar className="h-10 w-10 text-muted-foreground/40 mb-3" />
            <p className="text-sm text-muted-foreground">
              El historial de citas y consultas aparecera aqui.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
