"use client";

import Modal from "@/components/Modal";
import { useTranslations } from "next-intl";
import type { PMPendingScreeningData } from "@/api/user/generated.schemas";

interface PendingCase {
  id: number;
  name: string;
  email: string;
  mobileNumber: string;
  gender: string;
  age: number;
  avatar: string;
  screening_uuid?: string;
  client_uuid?: string;
}

interface PendingScreenModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSendReminder?: (caseData: PendingCase) => void;
  data?: PMPendingScreeningData[];
  isLoading?: boolean;
}

function mapApiToPendingCase(item: PMPendingScreeningData, index: number): PendingCase {
  return {
    id: index + 1,
    name: item.client_name || "Unknown",
    email: item.client_email || "",
    mobileNumber: item.mobile_number || "-",
    gender: item.gender || "-",
    age: item.age ?? 0,
    avatar: "",
    screening_uuid: item.screening_uuid,
    client_uuid: item.client_uuid,
  };
}

export default function PendingScreenModal({
  isOpen,
  onClose,
  onSendReminder,
  data,
  isLoading,
}: PendingScreenModalProps) {
  const t = useTranslations("practiceManager");

  const pendingCases: PendingCase[] = data
    ? data.map(mapApiToPendingCase)
    : [];

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="3xl">
      <div>
        {/* Title */}
        <h2 className="text-2xl font-bold text-[#F5A623] mb-6">
          {t("modals.pendingScreen.title")}
        </h2>

        {/* Table */}
        <div className="border border-gray-300 rounded-xl overflow-hidden">
          <div className="overflow-x-auto">
          <table className="w-full min-w-[500px]">
            <thead>
              <tr className="bg-white border-b border-gray-300">
                <th className="text-left px-5 py-4 text-sm font-medium text-gray-600">{t("modals.pendingScreen.clientsName")}</th>
                <th className="text-left px-5 py-4 text-sm font-medium text-gray-600 border-l border-gray-300">{t("modals.pendingScreen.mobileNumber")}</th>
                <th className="text-left px-5 py-4 text-sm font-medium text-gray-600 border-l border-gray-300">{t("modals.pendingScreen.gender")}</th>
                <th className="text-left px-5 py-4 text-sm font-medium text-gray-600 border-l border-gray-300">{t("modals.pendingScreen.age")}</th>
                <th className="text-left px-5 py-4 text-sm font-medium text-gray-600 border-l border-gray-300">{t("modals.pendingScreen.reminder")}</th>
              </tr>
            </thead>
            <tbody>
              {isLoading ? (
                <tr>
                  <td colSpan={5} className="py-8 text-center text-gray-500">
                    <div className="flex justify-center">
                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#3B9EC9]"></div>
                    </div>
                  </td>
                </tr>
              ) : pendingCases.length === 0 ? (
                <tr>
                  <td colSpan={5} className="py-8 text-center text-gray-500">
                    {t("modals.pendingScreen.noData")}
                  </td>
                </tr>
              ) : (
                pendingCases.map((caseData) => (
                  <tr key={`${caseData.screening_uuid || caseData.id}`} className="border-b border-gray-200 last:border-b-0 hover:bg-gray-50/50 transition">
                    <td className="px-5 py-4">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-full bg-[#E8F4F8] flex items-center justify-center text-[#3B9EC9] font-semibold text-sm">
                          {caseData.name.charAt(0).toUpperCase()}
                        </div>
                        <div>
                          <p className="text-sm font-medium text-gray-900">{caseData.name}</p>
                          <p className="text-xs text-gray-500">{caseData.email}</p>
                        </div>
                      </div>
                    </td>
                    <td className="px-5 py-4 text-sm text-gray-600 border-l border-gray-200">{caseData.mobileNumber}</td>
                    <td className="px-5 py-4 text-sm text-gray-600 border-l border-gray-200">{caseData.gender}</td>
                    <td className="px-5 py-4 text-sm text-gray-600 border-l border-gray-200">{caseData.age || "-"}</td>
                    <td className="px-5 py-4 border-l border-gray-200">
                      {/* Reminder Button */}
                      <button
                        onClick={() => onSendReminder?.(caseData)}
                        className="flex items-center gap-2 px-4 py-2 bg-[#3B9EC9] text-white text-sm font-medium rounded-full hover:bg-[#2D8AB5] transition"
                      >
                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                          <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {t("modals.pendingScreen.reminder")}
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
          </div>
        </div>
      </div>
    </Modal>
  );
}