"use client";

import Image from "next/image";
import Modal from "@/components/Modal";
import { useTranslations } from "next-intl";

interface PatientDetails {
  id: number;
  name: string;
  email: string;
  therapist: string;
  screenings: number;
  age: number;
  gender: string;
  avatar: string;
}

interface PatientDetailsModalProps {
  isOpen: boolean;
  onClose: () => void;
  patient: PatientDetails | null;
}

export default function PatientDetailsModal({
  isOpen,
  onClose,
  patient,
}: PatientDetailsModalProps) {
  const t = useTranslations("practiceManager");
  if (!patient) return null;

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="md">
      <div className="p-8">
        {/* Header */}
        <h2 className="text-2xl font-bold text-gray-900 mb-8">
          {t("modals.clientDetails.title")}
        </h2>

        {/* Patient Avatar and Name */}
        <div className="flex items-center gap-4 mb-8">
          {patient.avatar ? (
            <Image
              src={patient.avatar}
              alt={patient.name}
              width={80}
              height={80}
              className="w-20 h-20 rounded-full object-cover border-2 border-[#E8F4F8]"
            />
          ) : (
            <div className="w-20 h-20 rounded-full bg-[#E8F4F8] flex items-center justify-center text-[#3B9EC9] font-bold text-2xl border-2 border-[#E8F4F8]">
              {patient.name.charAt(0).toUpperCase()}
            </div>
          )}
          <div>
            <h3 className="text-xl font-semibold text-gray-900">{patient.name}</h3>
            <p className="text-gray-500">{patient.email}</p>
          </div>
        </div>

        {/* Details Grid */}
        <div className="space-y-4">
          {/* Therapist */}
          <div className="flex items-center justify-between py-3 border-b border-gray-100">
            <span className="text-sm font-medium text-gray-500">{t("modals.clientDetails.assignedTherapist")}</span>
            <span className="text-sm text-gray-900">{patient.therapist}</span>
          </div>

          {/* Number of Screenings */}
          <div className="flex items-center justify-between py-3 border-b border-gray-100">
            <span className="text-sm font-medium text-gray-500">{t("modals.clientDetails.numberOfScreenings")}</span>
            <span className="text-sm text-gray-900">{patient.screenings}</span>
          </div>

          {/* Age */}
          <div className="flex items-center justify-between py-3 border-b border-gray-100">
            <span className="text-sm font-medium text-gray-500">{t("modals.clientDetails.age")}</span>
            <span className="text-sm text-gray-900">{patient.age} {t("common.years")}</span>
          </div>

          {/* Gender */}
          <div className="flex items-center justify-between py-3 border-b border-gray-100">
            <span className="text-sm font-medium text-gray-500">{t("modals.clientDetails.gender")}</span>
            <span className="text-sm text-gray-900">{patient.gender}</span>
          </div>
        </div>

        {/* Close Button */}
        <div className="mt-8 flex justify-end">
          <button
            onClick={onClose}
            className="px-8 py-3 bg-[#3B9EC9] text-white font-medium rounded-full hover:bg-[#2D8AB5] transition focus:outline-none focus:ring-2 focus:ring-[#3B9EC9] focus:ring-offset-2"
          >
            {t("modals.clientDetails.close")}
          </button>
        </div>
      </div>
    </Modal>
  );
}