"use client";

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

interface HighRiskCase {
  id: number;
  name: string;
  email: string;
  mobileNumber: string;
  screeningDate: string;
  avatar: string;
  screening_uuid?: string;
  client_uuid?: string;
  suicide_risk_category?: string;
}

interface HighRiskCasesModalProps {
  isOpen: boolean;
  onClose: () => void;
  onViewCase?: (caseData: HighRiskCase) => void;
  onDownloadReport?: (caseData: HighRiskCase) => void;
  data?: PMHighRiskCaseData[];
  isLoading?: boolean;
}

function mapApiToHighRiskCase(item: PMHighRiskCaseData, index: number): HighRiskCase {
  return {
    id: index + 1,
    name: item.client_name || "Unknown",
    email: item.client_email || "",
    mobileNumber: item.mobile_number || "-",
    screeningDate: item.screening_date
      ? new Date(item.screening_date).toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" })
      : "-",
    avatar: "",
    screening_uuid: item.screening_uuid,
    client_uuid: item.client_uuid,
    suicide_risk_category: item.suicide_risk_category,
  };
}

export default function HighRiskCasesModal({
  isOpen,
  onClose,
  onViewCase,
  onDownloadReport,
  data,
  isLoading,
}: HighRiskCasesModalProps) {
  const t = useTranslations("practiceManager");

  const highRiskCases: HighRiskCase[] = data
    ? data.map(mapApiToHighRiskCase)
    : [];

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

        {/* Table */}
        <div className="border border-gray-300 rounded-xl overflow-hidden">
          <div className="overflow-x-auto">
          <table className="w-full min-w-[450px]">
            <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.highRiskCases.clientsName")}</th>
                <th className="text-left px-5 py-4 text-sm font-medium text-gray-600 border-l border-gray-300">{t("modals.highRiskCases.mobileNumber")}</th>
                <th className="text-left px-5 py-4 text-sm font-medium text-gray-600 border-l border-gray-300">{t("modals.highRiskCases.screeningDate")}</th>
                <th className="text-left px-5 py-4 text-sm font-medium text-gray-600 border-l border-gray-300">{t("modals.highRiskCases.action")}</th>
              </tr>
            </thead>
            <tbody>
              {isLoading ? (
                <tr>
                  <td colSpan={4} 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>
              ) : highRiskCases.length === 0 ? (
                <tr>
                  <td colSpan={4} className="py-8 text-center text-gray-500">
                    {t("modals.highRiskCases.noData")}
                  </td>
                </tr>
              ) : (
                highRiskCases.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-red-50 flex items-center justify-center text-red-500 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.screeningDate}</td>
                    <td className="px-5 py-4 border-l border-gray-200">
                      <div className="flex items-center gap-3">
                        {/* Download Button */}
                        <button
                          onClick={() => onDownloadReport?.(caseData)}
                          className="w-9 h-9 flex items-center justify-center rounded-full border border-[#3B9EC9] text-[#3B9EC9] hover:bg-[#3B9EC9]/5 transition cursor-pointer"
                          title="Download"
                        >
                          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                            <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                          </svg>
                        </button>
                        {/* View Button */}
                        <button
                          onClick={() => onViewCase?.(caseData)}
                          className="w-9 h-9 flex items-center justify-center rounded-full border border-[#3B9EC9] text-[#3B9EC9] hover:bg-[#3B9EC9]/5 transition cursor-pointer"
                          title="View"
                        >
                          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
          </div>
        </div>
      </div>
    </Modal>
  );
}