'use client';

import React, { useEffect, useState } from 'react';
import Image from 'next/image';
import { motion, Variants } from 'framer-motion';
import { MapPin, Globe, ArrowLeft } from 'lucide-react';
import { useI18n } from '../../i18n/provider';
import { useTheme } from 'next-themes';

// کامپوننت اختصاصی برای کارت‌های لوکیشن با افکت GPS
const LocationCard = ({
  name,
  ping,
  color,
  positionClass,
  delay
}: {
  name: string,
  ping: string,
  color: string,
  positionClass: string,
  delay: number
}) => {

  return (
    <motion.div
      animate={{ y: [0, -8, 0] }}
      transition={{ repeat: Infinity, duration: 4, ease: "easeInOut", delay }}
      className={`absolute ${positionClass} bg-[color:var(--glass-05)] backdrop-blur-md border border-[color:var(--border-10)] rounded-2xl p-2.5 pr-4 flex items-center gap-3 shadow-xl shadow-black/20 z-20 min-w-[160px]`}
    >
      {/* آیکون با افکت GPS چشمک‌زن */}
      <div
        className="relative flex items-center justify-center w-9 h-9 rounded-full flex-shrink-0"
        style={{ backgroundColor: `${color}25` }} // پس‌زمینه شفاف رنگی
      >
        {/* نقطه چشمک‌زن (GPS Pulse) */}
        <span
          className="absolute w-4 h-4 rounded-full animate-ping opacity-75"
          style={{ backgroundColor: color }}
        ></span>
        {/* آیکون اصلی پین */}
        <MapPin
          className="relative z-10 w-4 h-4"
          style={{ color: color }}
        />
      </div>
      <div className="text-left w-full" dir="ltr">
        <p className="text-[color:var(--text-primary)] text-[15px] font-medium tracking-wide">{name}</p>
        <p className="text-[color:var(--text-muted-2)] text-xs mt-0.5">{ping}</p>
      </div>
    </motion.div>
  );
};

const GlobalInfrastructure = () => {
  const { locale, t } = useI18n();
  const dir = locale === 'en' ? 'ltr' : 'rtl';
  const flipClass = locale === 'en' ? '-scale-x-100' : '';

  // انیمیشن ورود کل سکشن
  const fadeIn: Variants = {
    hidden: { opacity: 0, y: 30 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
  };


  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

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

  return (
    <motion.div
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin: "-100px" }}
      variants={fadeIn}
    >
      <section className="relative w-full max-w-[1200px] mx-auto my-24 px-4 sm:px-6 lg:px-8" dir={dir}>
        {/* Container اصلی - دقیقاً مطابق رنگ تصویر */}
        <div className="relative rounded-[2rem] border border-[color:var(--global-surface-border)] bg-[color:var(--global-surface-bg)] overflow-hidden flex flex-col lg:flex-row-reverse en-row-reverse items-center justify-between min-h-[480px] shadow-2xl">

          {/* تصویر پس‌زمینه در سمت چپ */}
          <div className="absolute inset-0 z-0 pointer-events-none">
            {/* عرض عکس طوری تنظیم شده که نیمه چپ را بپوشاند */}
            <div className="absolute left-0 top-0 bottom-0 w-full h-full">
              <Image
                src={mounted && resolvedTheme === 'light' ? '/images/earth-light.png' : '/images/earth-dark.png'}
                alt="Global Network"
                fill
                priority
                unoptimized
                quality={100}
                sizes="(min-width: 1024px) 65vw, 100vw"
                className={`object-cover object-left mix-blend-screen opacity-80 transform ${flipClass}`}
              />


              {/* گرادینت برای محو کردن دقیق مرز عکس در پس‌زمینه */}
              <div className="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-[var(--global-surface-bg)] via-[var(--global-surface-bg-80)] to-transparent" />
            </div>
          </div>

          {/* کانتینر پین‌های شناور روی کره زمین */}
          <div className="relative w-full lg:w-[55%] h-[480px] z-10 hidden lg:block pointer-events-none">
            <LocationCard
              name="Amsterdam"
              ping="15ms"
              color="#5eead4" // سبزآبی روشن (Teal)
              positionClass="top-[15%] left-[45%]"
              delay={0}
            />
            <LocationCard
              name="Frankfurt"
              ping="12ms"
              color="#818cf8" // بنفش/آبی (Indigo)
              positionClass="top-[45%] left-[8%]"
              delay={1}
            />
            <LocationCard
              name="Singapore"
              ping="28ms"
              color="#60a5fa" // آبی روشن (Blue)
              positionClass="bottom-[18%] left-[38%]"
              delay={0.5}
            />
          </div>

          {/* محتوای متنی (سمت راست) */}
          <div className="relative z-10 w-full lg:w-[45%] p-8 sm:p-12 lg:pl-16 lg:pr-12 flex flex-col justify-center text-right en-text-left">
            <p className="text-[#00c8b0] text-sm md:text-[15px] font-medium mb-3">
              {t('global_badge')}
            </p>
            <h2 className="text-[28px] md:text-[34px] font-bold text-[color:var(--text-primary)] mb-5 leading-tight">
              {t('global_title')}
            </h2>
            <p className="text-[color:var(--text-muted-2)] leading-[1.8] mb-10 text-[14px] md:text-[15px]">
              {t('global_desc')}
            </p>

            {/* دکمه دقیقاً مطابق تصویر (آیکون کره راست، فلش چپ) */}
            <button className="flex items-center gap-4 px-5 py-3 border border-[color:var(--border-10)] rounded-2xl text-[color:var(--text-primary)] hover:bg-[color:var(--glass-05)] hover:border-[color:var(--border-20)] transition-all w-fit group">
              <ArrowLeft className="w-4 h-4 text-[color:var(--text-muted-2)] group-hover:-translate-x-1 group-hover:text-[color:var(--text-primary)] transition-all" />
              <span className="text-[15px] font-medium pt-0.5">{t('global_cta')}</span>
              <Globe className="w-5 h-5 text-[color:var(--text-muted-2)] group-hover:text-[color:var(--text-primary)] transition-colors" />
            </button>
          </div>

        </div>
      </section>
    </motion.div>
  );
};

export default GlobalInfrastructure;
