"use client";

import { memo, useState } from "react";
import { City } from "../data/cities";
import { getCitySocialSummary } from "../data/city-social";
import { useLocale, useTranslation } from "@/i18n/navigation";
import { type CityWeatherLive, weatherCodeLabel } from "@/app/lib/city-weather";

function ratingToPercent(rating: string): number {
  const m: Record<string, number> = {
    极好: 95,
    很好: 80,
    好: 60,
    一般: 40,
    差: 20,
  };
  return m[rating] || 50;
}

function getBarColor(p: number): string {
  if (p >= 60) return "#22c55e";
  if (p >= 35) return "#eab308";
  return "#ef4444";
}

interface ScoreBarProps {
  icon: string;
  label: string;
  percent: number;
  animate: boolean;
}

const ScoreBar = memo(function ScoreBar({ icon, label, percent, animate }: ScoreBarProps) {
  return (
    <div className="flex items-center gap-2 sm:gap-3">
      <span className="text-white/80 text-xs sm:text-sm w-14 sm:w-16 shrink-0 flex items-center gap-1">
        <span>{icon}</span>
        <span className="hidden sm:inline">{label}</span>
      </span>
      <div className="flex-1 h-2 sm:h-2.5 bg-white/10 rounded-full overflow-hidden">
        <div
          className="h-full rounded-full transition-all duration-700 ease-out"
          style={{
            width: animate ? `${percent}%` : "0%",
            backgroundColor: getBarColor(percent),
          }}
        />
      </div>
    </div>
  );
});

interface CityCardProps {
  city: City;
  rank: number;
  onClick?: () => void;
  liveWeather?: CityWeatherLive | null;
}

function CityCardComponent({ city, rank, onClick, liveWeather }: CityCardProps) {
  const [hovered, setHovered] = useState(false);
  const locale = useLocale();
  const { t } = useTranslation("cityCard");
  const socialSummary = getCitySocialSummary(city);
  const temperature = liveWeather?.temperature ?? city.temperature;
  const weatherLabel = weatherCodeLabel(liveWeather?.weatherCode, locale === "zh" ? "zh" : "en");

  const scores = [
    {
      icon: "⭐",
      label: "综合",
      percent: (city.overallScore / 5) * 100,
    },
    {
      icon: "👥",
      label: "游民",
      percent: Math.min(95, (city.nomadsNow / 1200) * 100),
    },
    {
      icon: "🌡",
      label: "天气",
      percent: Math.max(20, Math.min(95, 100 - Math.abs(temperature - 22) * 4)),
    },
    {
      icon: "👍",
      label: "好评",
      percent: ratingToPercent(city.liked),
    },
    {
      icon: "👮",
      label: "安全",
      percent: ratingToPercent(city.safety),
    },
  ];

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onClick}
      onKeyDown={(e) => e.key === "Enter" && onClick?.()}
      className="city-card cursor-pointer"
      style={{
        background: `linear-gradient(135deg, ${city.gradientFrom}, ${city.gradientTo})`,
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* Icon watermark */}
      <span className="absolute bottom-8 right-2 text-[70px] sm:text-[90px] opacity-[0.12] select-none pointer-events-none leading-none">
        {city.icon}
      </span>

      {/* ===== Default state ===== */}
      <div
        className={`absolute inset-0 z-10 flex flex-col justify-between p-3 sm:p-4 transition-opacity duration-300 ${hovered ? "opacity-0" : "opacity-100"}`}
      >
        {/* Top row */}
        <div className="flex items-start justify-between">
          <span className="text-white/70 text-base sm:text-xl font-bold">
            {rank}
          </span>
          <span
            className="text-[10px] sm:text-xs bg-white/20 backdrop-blur-sm rounded-full px-1.5 sm:px-2 py-0.5 sm:py-1 text-white flex items-center gap-0.5"
            title={liveWeather ? (weatherLabel ? `${weatherLabel} · 实时` : "实时天气") : undefined}
          >
            🌡 {temperature}°C
            {weatherLabel ? (
              <span className="hidden sm:inline opacity-80">· {weatherLabel}</span>
            ) : null}
          </span>
        </div>

        {/* Center: city name */}
        <div className="text-center -mt-2">
          <h3 className="text-xl sm:text-[28px] font-bold text-white drop-shadow-md tracking-wide">
            {city.name}
          </h3>
        </div>

        {/* Bottom: temp + cost + nomads */}
        <div>
          <div className="mb-1.5 grid grid-cols-3 gap-1">
            <span className="truncate rounded-full bg-white/20 px-1.5 py-0.5 text-center text-[9px] text-white/90 backdrop-blur-sm sm:text-[10px]">
              ☕ {socialSummary.coffeechat}
            </span>
            <span className="truncate rounded-full bg-white/20 px-1.5 py-0.5 text-center text-[9px] text-white/90 backdrop-blur-sm sm:text-[10px]">
              🧭 {socialSummary.localGuide}
            </span>
            <span className="truncate rounded-full bg-white/20 px-1.5 py-0.5 text-center text-[9px] text-white/90 backdrop-blur-sm sm:text-[10px]">
              🥾 {socialSummary.cityWalk}
            </span>
          </div>
          <div className="flex items-end justify-between text-white text-xs sm:text-sm">
            <span className="text-white/80 text-[10px] sm:text-xs line-clamp-1 max-w-[60%]">
              {city.description}
            </span>
            <span className="font-semibold shrink-0">
              👥 {city.nomadsNow.toLocaleString()}{t("nomadsHere")}
            </span>
          </div>
        </div>
      </div>

      {/* ===== Hover overlay (desktop only) ===== */}
      <div
        className={`absolute inset-0 z-20 bg-[#2a2a2a]/95 hidden sm:flex flex-col justify-between p-4 sm:p-5 transition-opacity duration-300 ${hovered ? "opacity-100" : "opacity-0 pointer-events-none"}`}
      >
        {/* Top icons */}
        <div className="flex items-center justify-between">
          <button className="text-white/50 hover:text-red-400 transition-colors text-base">
            ❤️
          </button>
          <button
            className="text-white/30 hover:text-white text-sm transition-colors"
            onClick={(e) => {
              e.stopPropagation();
              setHovered(false);
            }}
            type="button"
          >
            ✕
          </button>
        </div>

        {/* Score bars */}
        <div className="space-y-2.5 sm:space-y-3">
          {scores.map((s) => (
            <ScoreBar
              key={s.label}
              icon={s.icon}
              label={s.label}
              percent={s.percent}
              animate={hovered}
            />
          ))}
        </div>

        {/* Bottom: city info small */}
        <div className="space-y-2 text-center text-xs">
          <div className="grid grid-cols-3 gap-1 text-white/80">
            <span className="rounded-full bg-white/10 px-2 py-1">☕ {socialSummary.coffeechat}</span>
            <span className="rounded-full bg-white/10 px-2 py-1">🧭 {socialSummary.localGuide}</span>
            <span className="rounded-full bg-white/10 px-2 py-1">🥾 {socialSummary.cityWalk}</span>
          </div>
          <div className="text-white/40">
            {city.name}
          </div>
        </div>
      </div>
    </div>
  );
}

export default memo(CityCardComponent);