import { MapPin, ArrowRight, Clock } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import type { ZoneData } from '@/data/zones';
import { departementInPhrase } from '@/lib/zoneGeo';

interface MaillageInterneSectionProps {
  zoneData: ZoneData;
  departementNom: string;
  departement: string;
  region: string;
  slugDepartement: string;
  slugRegion?: string;
  villesDepartement: Array<{ nom: string; slug: string; typeZone: string }>;
  villeCourante?: string;
  isDepartementPage: boolean;
}

const MaillageInterneSection = ({
  zoneData,
  departementNom,
  departement,
  region,
  slugDepartement,
  slugRegion,
  villesDepartement,
  villeCourante,
  isDepartementPage,
}: MaillageInterneSectionProps) => {
  const isRegionPage = zoneData.pageType === 'region';
  const isDeptPage = zoneData.pageType === 'departement';
  const isForeign = (zoneData.pays ?? 'FR') !== 'FR';
  const scope = zoneData.maillageScope;
  const deptPhrase = departementInPhrase(departementNom); // « dans le Rhône » / « en Seine-Saint-Denis » / « dans les Bouches-du-Rhône »
  const departmentLinkLabel = `Cool roof ${deptPhrase}`;

  // Liste = maillage précalculé (16 villes les plus proches, ou départements d'une région), fallback villes du département.
  const villes = zoneData.maillage ?? villesDepartement;

  // Titre + sous-titre selon le type de page et la portée du maillage.
  let titleMain: string;
  let titleSpan: string;
  let subtitle: string;
  if (isForeign) {
    titleMain = 'Covalba intervient';
    titleSpan = ` en ${region}.`;
    subtitle = 'Cliquez sur une ville pour consulter la page dédiée à votre secteur.';
  } else if (isRegionPage) {
    titleMain = 'Tous les départements couverts';
    titleSpan = ` en ${region}.`;
    subtitle = 'Cliquez sur un département pour découvrir nos zones d’intervention.';
  } else if (isDeptPage) {
    titleMain = 'Toutes les villes couvertes';
    titleSpan = ` ${deptPhrase}.`;
    subtitle = 'Cliquez sur une ville pour consulter la page dédiée à votre secteur.';
  } else {
    // page ville
    titleMain = scope === 'alentours' ? 'Covalba intervient' : 'Covalba intervient partout';
    titleSpan = scope === 'alentours' ? ` ${deptPhrase} et aux alentours.` : ` ${deptPhrase}.`;
    subtitle = `Découvrez nos zones d’intervention les plus proches de ${villeCourante}.`;
  }

  return (
    <section className="bg-cream py-20 lg:py-28">
      <div className="container mx-auto px-4 lg:px-8">
        {/* Header */}
        <ScrollReveal>
          <div className="text-center mb-14">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
              Maillage territorial
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05]"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titleMain}
              <span className="text-foreground/30">
                {titleSpan}
              </span>
            </h2>
            <p className="max-w-2xl mx-auto text-foreground/60 text-base mt-5 font-body leading-relaxed">
              {subtitle}
            </p>
          </div>
        </ScrollReveal>

        {/* City grid — premium cards */}
        <ScrollReveal stagger>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {villes.map((ville) => {
              const isCurrent = ville.nom === villeCourante;

              const cardContent = (
                <>
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex items-center gap-3 min-w-0">
                      <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                        <MapPin className="w-4 h-4 text-primary" strokeWidth={2.2} />
                      </div>
                      <div className="min-w-0">
                        <p className="font-satoshi font-bold text-foreground text-[15px] leading-tight truncate">
                          {ville.nom}
                        </p>
                        <p className="text-foreground/40 text-xs font-body mt-0.5 truncate">
                          {ville.typeZone}
                        </p>
                      </div>
                    </div>
                    {!isCurrent && (
                      <span className="flex items-center justify-center w-7 h-7 rounded-full bg-foreground/[0.04] shrink-0 mt-1 transition-all duration-300 group-hover:bg-primary/10">
                        <ArrowRight className="w-3.5 h-3.5 text-foreground/30 transition-colors duration-300 group-hover:text-primary" />
                      </span>
                    )}
                  </div>
                </>
              );

              if (isCurrent) {
                return (
                  <div
                    key={ville.slug}
                    className="bg-white rounded-2xl border-2 border-primary/20 px-5 py-4 shadow-[0_2px_20px_rgba(26,42,58,0.06)] opacity-60 pointer-events-none"
                  >
                    {cardContent}
                  </div>
                );
              }

              return (
                <a
                  key={ville.slug}
                  href={'/' + ville.slug}
                  className="group bg-white rounded-2xl border border-foreground/[0.05] px-5 py-4 shadow-[0_2px_20px_rgba(26,42,58,0.06)] transition-all duration-300 hover:border-primary/25 hover:shadow-[0_4px_24px_rgba(26,42,58,0.10)]"
                >
                  {cardContent}
                </a>
              );
            })}
          </div>
        </ScrollReveal>

        {/* Upward linking */}
        <ScrollReveal>
          <div className="mt-10 pt-6 flex items-center justify-center">
            {isRegionPage ? null : isDeptPage ? (
              slugRegion && (
                <a
                  href={'/' + slugRegion}
                  className="group inline-flex items-center gap-2 text-sm text-foreground/50 hover:text-primary font-semibold font-body transition-colors"
                >
                  <span>&larr;</span>
                  <span>Voir toutes nos zones d'intervention en {region}</span>
                </a>
              )
            ) : isForeign ? (
              slugRegion && (
                <a
                  href={'/' + slugRegion}
                  className="group inline-flex items-center gap-2 text-sm text-foreground/50 hover:text-primary font-semibold font-body transition-colors"
                >
                  <span>&larr;</span>
                  <span>Voir la page {region}</span>
                </a>
              )
            ) : (
              <a
                href={'/' + slugDepartement}
                className="group inline-flex items-center gap-2 text-sm text-foreground/50 hover:text-primary font-semibold font-body transition-colors"
              >
                <span>&larr;</span>
                <span>Voir la page département : {departmentLinkLabel}</span>
              </a>
            )}
          </div>
        </ScrollReveal>

        {/* Encart CTA — page département uniquement */}
        {isDeptPage && (
          <ScrollReveal>
            <div className="mt-12 rounded-2xl bg-white shadow-[0_2px_20px_rgba(26,42,58,0.06)] border border-foreground/[0.05] p-8 text-center max-w-2xl mx-auto">
              <div className="flex items-center justify-center gap-2 text-primary mb-3">
                <Clock className="w-5 h-5" />
                <span className="font-semibold text-sm font-body">Réponse sous 48h</span>
              </div>
              <p className="text-foreground/75 font-body text-base leading-relaxed mb-6">
                Covalba intervient dans toutes les villes du {departement}.
                Décrivez-nous votre projet, nous revenons vers vous sous 48h
                avec une première estimation.
              </p>
              <a
                href="#mid-page-form"
                className="group inline-flex items-center gap-2 cta-gradient text-white font-semibold pl-6 pr-2 py-2 rounded-full"
              >
                <span className="text-sm">Décrire mon projet</span>
                <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5 group-hover:scale-105">
                  <ArrowRight className="w-3.5 h-3.5" />
                </span>
              </a>
            </div>
          </ScrollReveal>
        )}
      </div>
    </section>
  );
};

export default MaillageInterneSection;