"use client";

import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/navigation";

interface TrialData {
  screenings_used?: number;
  screenings_limit?: number;
  trial_end?: string;
}

interface UpgradeModalProps {
  isOpen: boolean;
  onClose: () => void;
  errorCode: "TRIAL_LIMIT_REACHED" | "TRIAL_EXPIRED" | "TRIAL_REQUIRED" | null;
  trialData?: TrialData;
  upgradeHref: string;
}

export default function UpgradeModal({
  isOpen,
  onClose,
  errorCode,
  trialData,
  upgradeHref,
}: UpgradeModalProps) {
  const t = useTranslations("upgradeModal");
  const router = useRouter();

  if (!isOpen || !errorCode) return null;

  const isExpired = errorCode === "TRIAL_EXPIRED";
  const isRequired = errorCode === "TRIAL_REQUIRED";

  const handleUpgrade = () => {
    onClose();
    router.push(upgradeHref as any);
  };

  return (
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-sm mx-4 relative"
        onClick={(e) => e.stopPropagation()}
      >
        {/* X close button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition cursor-pointer"
          aria-label="Close"
        >
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>

        {/* Icon */}
        <div className="flex justify-center mb-4">
          <div
            className={`w-14 h-14 rounded-full flex items-center justify-center ${
              isExpired ? "bg-gray-100" : isRequired ? "bg-blue-50" : "bg-red-50"
            }`}
          >
            <svg
              className={`w-7 h-7 ${isExpired ? "text-gray-500" : isRequired ? "text-[#3B9EC9]" : "text-red-500"}`}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={1.5}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
              />
            </svg>
          </div>
        </div>

        {/* Title */}
        <h3 className="text-lg font-semibold text-gray-900 text-center mb-2">
          {isRequired ? t("trialRequiredTitle") : isExpired ? t("expiredTitle") : t("limitTitle")}
        </h3>

        {/* Message */}
        <p className="text-sm text-gray-500 text-center mb-4 leading-relaxed">
          {isRequired ? t("trialRequiredMessage") : isExpired ? t("expiredMessage") : t("limitMessage")}
        </p>

        {/* Usage stats */}
        {trialData && !isExpired && (
          <div className="bg-gray-50 rounded-xl p-3 mb-4 flex items-center justify-between">
            <span className="text-sm text-gray-600">{t("screeningsUsed")}</span>
            <span className="text-sm font-semibold text-gray-900">
              {trialData.screenings_used} / {trialData.screenings_limit}
            </span>
          </div>
        )}

        {/* Features list */}
        <div className="bg-[#E8F5F5] rounded-xl p-4 mb-4">
          <h4 className="text-sm font-semibold text-gray-900 mb-3">{t("whatsIncluded")}</h4>
          <ul className="space-y-2">
            {(["feature1", "feature2", "feature3", "feature4", "feature5"] as const).map((key) => (
              <li key={key} className="flex items-center gap-2 text-sm text-gray-700">
                <svg className="w-4 h-4 text-[#3B9EC9] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                </svg>
                {t(key)}
              </li>
            ))}
          </ul>
        </div>

        {/* Buttons */}
        <div className="flex gap-3">
          <button
            onClick={onClose}
            className="flex-1 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-xl hover:bg-gray-200 transition cursor-pointer"
          >
            {t("cancel")}
          </button>
          <button
            onClick={handleUpgrade}
            className="flex-1 py-2.5 text-sm font-medium text-white bg-[#3B9EC9] rounded-xl hover:bg-[#2D8AB5] transition cursor-pointer"
          >
            {isRequired ? t("startTrialCta") : t("upgradeCta")}
          </button>
        </div>
      </div>
    </div>
  );
}