"use client";

import { Link } from "@/i18n/navigation";
import { mediaUrl } from "@/app/lib/media";
import type { DatingProfile } from "../types";

interface MatchModalProps {
  profile: DatingProfile | null;
  conversationId?: string;
  onClose: () => void;
  t: (key: string) => string;
}

export default function MatchModal({ profile, conversationId, onClose, t }: MatchModalProps) {
  if (!profile) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
      <div className="w-full max-w-sm overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-gray-900">
        <div className="bg-gradient-to-br from-[#ff4d4f] via-pink-500 to-rose-400 px-6 py-8 text-center text-white">
          <p className="text-sm font-semibold uppercase tracking-widest opacity-90">{t("matchCelebration")}</p>
          <h2 className="mt-2 text-3xl font-black">{t("itsAMatch")}</h2>
          <p className="mt-2 text-sm text-white/90">{t("matchHint")}</p>
        </div>
        <div className="-mt-10 flex justify-center">
          <img
            src={mediaUrl(profile.photo)}
            alt={profile.name}
            className="h-24 w-24 rounded-full border-4 border-white object-cover shadow-lg dark:border-gray-900"
          />
        </div>
        <div className="px-6 pb-6 pt-4 text-center">
          <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">{profile.name}</h3>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">📍 {profile.location}</p>
          <div className="mt-6 flex flex-col gap-3">
            <Link
              href={conversationId ? `/chat/${conversationId}` : "/chat"}
              onClick={onClose}
              className="inline-flex items-center justify-center rounded-full bg-[#ff4d4f] px-4 py-3 text-sm font-semibold text-white transition hover:bg-red-600"
            >
              {t("sendMessage")}
            </Link>
            <button
              type="button"
              onClick={onClose}
              className="rounded-full border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
            >
              {t("keepSwiping")}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}