"use client";

import { useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { useTranslation } from "@/i18n/navigation";
import { City } from "@/app/data/cities";

const CITY_COORDS: Record<string, [number, number]> = {
  大理: [25.7, 100.2],
  成都: [30.6, 104.1],
  深圳: [22.5, 114.1],
  上海: [31.2, 121.5],
  杭州: [30.3, 120.2],
  厦门: [24.5, 118.1],
  北京: [39.9, 116.4],
  广州: [23.1, 113.3],
  重庆: [29.6, 106.6],
  昆明: [25.0, 102.7],
  三亚: [18.3, 109.5],
  丽江: [26.9, 100.2],
  西安: [34.3, 108.9],
  南京: [32.1, 118.8],
  长沙: [28.2, 112.9],
  青岛: [36.1, 120.4],
  苏州: [31.3, 120.6],
  珠海: [22.3, 113.6],
};

const CITY_IMAGES: Record<string, string> = {
  大理: "https://images.unsplash.com/photo-1590856029826-c7a73142bbf1?w=1200",
  成都: "https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=1200",
  深圳: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=1200",
  上海: "https://images.unsplash.com/photo-1542051841857-5f90071e7989?w=1200",
  杭州: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200",
  厦门: "https://images.unsplash.com/photo-1590559899731-a382839e5549?w=1200",
  北京: "https://images.unsplash.com/photo-1508804185872-d7badad00f7d?w=1200",
  广州: "https://images.unsplash.com/photo-1596422846543-75c6fc197f07?w=1200",
  重庆: "https://images.unsplash.com/photo-1563841930606-67e2cce48b78?w=1200",
  昆明: "https://images.unsplash.com/photo-1589553416260-f586c8f1514f?w=1200",
  三亚: "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?w=1200",
  丽江: "https://images.unsplash.com/photo-1548013146-72479768bada?w=1200",
  西安: "https://images.unsplash.com/photo-1590559899731-a382839e5549?w=1200",
  南京: "https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=1200",
  长沙: "https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=1200",
  青岛: "https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?w=1200",
  苏州: "https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=1200",
  珠海: "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?w=1200",
};

type ScoreLabel = "great" | "good" | "okay" | "bad";

function scoreToLabel(score: number): ScoreLabel {
  if (score >= 4.2) return "great";
  if (score >= 3.5) return "good";
  if (score >= 2.5) return "okay";
  return "bad";
}

interface CityModalProps {
  city: City | null;
  isOpen: boolean;
  onClose: () => void;
}

export default function CityModal({ city, isOpen, onClose }: CityModalProps) {
  const { t } = useTranslation("cityModal");
  const [activeTab, setActiveTab] = useState("scores");
  const [mounted, setMounted] = useState(false);
  const [favorited, setFavorited] = useState(false);

  useEffect(() => setMounted(true), []);

  if (!isOpen || !city || !mounted) return null;

  const coverImage = city.coverImage ?? CITY_IMAGES[city.name] ?? `linear-gradient(135deg, ${city.gradientFrom}, ${city.gradientTo})`;
  const reviewsCount = city.reviewsCount ?? city.nomadsNow * 4 + Math.floor(Math.random() * 500);
  const likedCount = city.likedCount ?? Math.floor(reviewsCount * 0.55);
  const dislikedCount = city.dislikedCount ?? Math.floor(reviewsCount * 0.08);
  const qualityOfLife = (city.qualityOfLife?.toLowerCase() as ScoreLabel) ?? scoreToLabel(city.overallScore);
  const familyScore = (city.familyScore?.toLowerCase() as ScoreLabel) ?? scoreToLabel(city.overallScore - 0.2);
  const communityScore = (city.communityScore?.toLowerCase() as ScoreLabel) ?? scoreToLabel(city.overallScore + 0.1);
  const nomadPercent = city.nomadPercent ?? Math.min(5, Math.ceil((city.nomadsNow / 500) * 2));
  const funLabel = (city.funLabel?.toLowerCase() as ScoreLabel) ?? scoreToLabel(city.overallScore);
  const feelsLike = city.feelsLikeTemp ?? city.temperature + 2;
  const acPercent = city.acPercent ?? Math.min(95, 60 + city.temperature);
  const [lat, lng] = city.lat && city.lng ? [city.lat, city.lng] : (CITY_COORDS[city.name] ?? [30, 120]);
  const region = t("region");
  const internetInfo = getInternetInfo(city.internetSpeed, t);
  const tempInfo = getTempInfo(city.temperature, feelsLike, t);
  const costLabel = getCostLabel(city.costPerMonth, t);
  const humidityLabel = getHumidityLabel(city.humidity, t);
  const acLabel = getAcLabel(acPercent, t);

  const tabs = [
    { id: "guide", labelKey: "tabs.guide" },
    { id: "pros", labelKey: "tabs.pros" },
    { id: "reviews", labelKey: "tabs.reviews" },
    { id: "cost", labelKey: "tabs.cost" },
    { id: "people", labelKey: "tabs.people" },
    { id: "chat", labelKey: "tabs.chat" },
    { id: "photos", labelKey: "tabs.photos" },
    { id: "weather", labelKey: "tabs.weather" },
    { id: "trends", labelKey: "tabs.trends" },
    { id: "demographics", labelKey: "tabs.demographics" },
    { id: "scores", labelKey: "tabs.scores" },
  ];

  const scoresList = [
    { icon: "🚩", labelKey: "scores.nomadScore", value: `${Math.round(city.overallScore)}/5 (${t("scores.rank")} #${city.id})`, good: true },
    { icon: "❤️", labelKey: "scores.likedByMembers", value: `${likedCount} ${t("scores.likedIt")} ${dislikedCount} ${t("scores.dislikedIt")}`, good: null },
    { icon: "⭐", labelKey: "scores.qualityOfLife", value: t(`scores.scoreLabels.${qualityOfLife}`), good: qualityOfLife !== "bad" },
    { icon: "👨‍👩‍👧", labelKey: "scores.familyScore", value: t(`scores.scoreLabels.${familyScore}`), good: familyScore !== "bad" },
    { icon: "👥", labelKey: "scores.communityScore", value: t(`scores.scoreLabels.${communityScore}`), good: communityScore !== "bad" },
    { icon: "🏙️", labelKey: "scores.nomadDensity", value: `${nomadPercent}% ${t("scores.nomadHere")}`, good: true },
    { icon: "💰", labelKey: "scores.cost", value: `${costLabel}: ¥${city.costPerMonth.toLocaleString()}/${t("scores.perMonth")}`, good: city.costPerMonth <= 6000 },
    { icon: "📡", labelKey: "scores.internet", value: internetInfo.text, good: internetInfo.isGood },
    { icon: "😊", labelKey: "scores.fun", value: t(`scores.scoreLabels.${funLabel}`), good: funLabel !== "bad" },
    { icon: "🌡️", labelKey: "scores.temperature", value: tempInfo.text, good: tempInfo.isGood },
    { icon: "💧", labelKey: "scores.humidity", value: `${humidityLabel}: ${city.humidity}%`, good: true },
    { icon: "❄️", labelKey: "scores.acPercent", value: `${acLabel}: ${acPercent}%`, good: acPercent >= 70 },
  ];

  const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.2},${lat - 0.15},${lng + 0.2},${lat + 0.15}&layer=mapnik&marker=${lat},${lng}`;

  const modalContent = (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-3 sm:p-4 md:p-6">
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
        aria-hidden
      />
      <div
        className="relative z-10 flex flex-col w-full max-w-5xl max-h-[90vh] rounded-2xl overflow-hidden shadow-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header with cover image */}
        <div className="relative h-36 sm:h-44 md:h-52 shrink-0">
          {typeof coverImage === "string" && coverImage.startsWith("http") ? (
            <img
              src={coverImage}
              alt={city.name}
              className="absolute inset-0 w-full h-full object-cover"
            />
          ) : (
            <div
              className="absolute inset-0 w-full h-full"
              style={{ background: coverImage as string }}
            />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
          <button
            onClick={onClose}
            className="absolute right-3 top-3 sm:right-4 sm:top-4 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors"
            aria-label={t("close")}
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          <div className="absolute bottom-0 left-0 right-0 p-3 sm:p-4 flex flex-wrap items-end justify-between gap-2">
            <div>
              <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-white drop-shadow-lg">
                {city.name}
              </h1>
              <p className="text-white/90 text-sm mt-0.5">
                {city.countryEmoji} {city.country}
              </p>
            </div>
            <div className="flex items-center gap-2 sm:gap-3">
              <span className="text-white/90 text-xs sm:text-sm">
                {reviewsCount.toLocaleString()} {t("reviews")}
              </span>
              <button
                onClick={() => setFavorited(!favorited)}
                className={`rounded-full px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm font-medium transition-colors ${
                  favorited
                    ? "bg-[#ff4d4f] text-white"
                    : "bg-white/20 text-white hover:bg-white/30"
                }`}
              >
                {favorited ? t("favorited") : t("favorite")}
              </button>
            </div>
          </div>
        </div>

        {/* Breadcrumb */}
        <div className="shrink-0 px-3 sm:px-4 py-2 border-b border-gray-100 dark:border-gray-800">
          <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400">
            {t("breadcrumbPrefix")} &gt; {region} &gt; {city.country} &gt; {city.name}
          </p>
        </div>

        {/* Tabs */}
        <div className="shrink-0 border-b border-gray-100 dark:border-gray-800 overflow-x-auto">
          <div className="flex gap-1 min-w-max px-3 sm:px-4 py-2">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`px-2 sm:px-3 py-1.5 sm:py-2 text-xs sm:text-sm font-medium whitespace-nowrap rounded-lg transition-colors ${
                  activeTab === tab.id
                    ? "text-[#ff4d4f] border-b-2 border-[#ff4d4f] -mb-[2px]"
                    : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
                }`}
              >
                {t(tab.labelKey)}
              </button>
            ))}
          </div>
        </div>

        {/* Content - scrollable */}
        <div className="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
          {activeTab === "scores" ? (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
              <div className="space-y-2 sm:space-y-3">
                {scoresList.map((s) => (
                  <div
                    key={s.labelKey}
                    className="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-xl bg-gray-50 dark:bg-gray-800/50"
                  >
                    <span className="text-lg sm:text-xl w-7 sm:w-8 shrink-0">{s.icon}</span>
                    <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 flex-1 min-w-0">
                      {t(s.labelKey)}
                    </span>
                    <span
                      className={`text-xs font-medium px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full shrink-0 ${
                        s.good === null
                          ? "bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300"
                          : s.good
                            ? "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-400"
                            : "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-400"
                      }`}
                    >
                      {String(s.value)}
                    </span>
                  </div>
                ))}
              </div>
              <div className="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 h-64 sm:h-72 lg:h-80">
                <iframe
                  title={`${city.name} ${t("map")}`}
                  src={mapUrl}
                  className="w-full h-full"
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>
            </div>
          ) : (
            <div className="py-6 sm:py-8 text-center text-gray-500 dark:text-gray-400">
              <p className="text-lg">{city.icon}</p>
              <p className="mt-2 text-sm sm:text-base">
                「{tabs.find((x) => x.id === activeTab) ? t(tabs.find((x) => x.id === activeTab)!.labelKey) : activeTab}」{t("comingSoon")}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );

  return createPortal(modalContent, document.body);
}

function getInternetInfo(speed: number, t: (k: string) => string): { text: string; isGood: boolean } {
  const avg = t("scores.avg");
  if (speed >= 80) return { text: `${t("scores.fast")}: ${speed} Mbps (${avg})`, isGood: true };
  if (speed >= 50) return { text: `${t("scores.medium")}: ${speed} Mbps (${avg})`, isGood: false };
  return { text: `${t("scores.slow")}: ${speed} Mbps (${avg})`, isGood: false };
}

function getTempInfo(temp: number, feels: number, t: (k: string) => string): { text: string; isGood: boolean } {
  const feelsLike = t("scores.feelsLike");
  if (temp >= 32 || feels >= 38) return { text: `${t("scores.tooHot")}: ${temp}°C (${feelsLike} ${feels}°C)`, isGood: false };
  if (temp >= 25) return { text: `${t("scores.warm")}: ${temp}°C (${feelsLike} ${feels}°C)`, isGood: true };
  if (temp >= 15) return { text: `${t("scores.comfortable")}: ${temp}°C (${feelsLike} ${feels}°C)`, isGood: true };
  return { text: `${t("scores.cold")}: ${temp}°C (${feelsLike} ${feels}°C)`, isGood: false };
}

function getCostLabel(cost: number, t: (k: string) => string): string {
  if (cost <= 4000) return t("scores.affordable");
  if (cost <= 7000) return t("scores.moderate");
  return t("scores.expensive");
}

function getHumidityLabel(h: number, t: (k: string) => string): string {
  if (h <= 60) return t("scores.comfy");
  if (h <= 80) return t("scores.moderate");
  return t("scores.humid");
}

function getAcLabel(pct: number, t: (k: string) => string): string {
  if (pct >= 85) return t("scores.veryHigh");
  if (pct >= 70) return t("scores.high");
  return t("scores.normal");
}