import ScrollReveal from '@/components/ScrollReveal';
import type { ZoneData } from '@/data/zones';
import { zoneInPhraseCap, zoneName } from '@/lib/zoneGeo';
import { getSectorMedia } from '@/lib/localSeoWorkflow';
import { sanitizeWpHtml } from '@/lib/sanitizeHtml';

type RoissyActivitiesSectionProps = {
  zoneData: ZoneData;
};

/** Majuscule sur la 1re lettre (gère les accents : à→À, é→É). */
const capitalizeFirst = (s: string): string => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);

/**
 * Carte sémantique secteur → libellé pour le titre (« noun ») + stat de repli (« stat »).
 * Permet d'adapter le titre du bloc ET la stat des cartes aux vraies activités de la zone,
 * au lieu de textes génériques. Ordonné du plus spécifique au plus générique (1er match gagne).
 */
const SECTOR_MAP: Array<[RegExp, { noun: string; stats: string[] }]> = [
  [/a[ée]roport|tarmac/, { noun: 'sites aéroportuaires', stats: ['effet tarmac amplifié', 'hangars de fret exposés', 'zones cargo en plein soleil'] }],
  [/portuaire|maritime/, { noun: 'hangars portuaires', stats: ['terminaux sans ombrage', 'bac acier en bord de quai', 'entrepôts portuaires surchauffés'] }],
  [/sid[ée]rurg|m[ée]tallurg|fonderie/, { noun: 'sites sidérurgiques', stats: ['chaleur des fours + soleil', 'halles industrielles brûlantes', 'très forte charge thermique'] }],
  [/nucl[ée]aire|[ée]nerg/, { noun: 'sites énergétiques', stats: ['bâtiments techniques exposés', 'halles techniques surchauffées'] }],
  [/automobile/, { noun: 'sites automobiles', stats: ['halles d’assemblage surchauffées', 'lignes de production exposées', 'vastes ateliers en bac acier'] }],
  [/a[ée]rospat|a[ée]ronaut|spatial|d[ée]fense/, { noun: 'sites aérospatiaux', stats: ['halles de grande hauteur', 'sites d’assemblage exposés'] }],
  [/ferroviaire/, { noun: 'sites ferroviaires', stats: ['ateliers ferroviaires surchauffés', 'halles d’assemblage exposées'] }],
  [/chimie|p[ée]tro|plasturg/, { noun: 'sites de la chimie', stats: ['chaleur de production + soleil', 'unités de production exposées'] }],
  [/pharma|cosm[ée]|sant[ée]/, { noun: 'sites pharmaceutiques', stats: ['chaîne du froid sous tension', 'stabilité thermique critique', 'salles propres à climatiser'] }],
  [/horlog/, { noun: 'sites horlogers', stats: ['ateliers de précision', 'postes thermosensibles'] }],
  [/tech|r&d|r-d|[ée]lectro|semi|microtech|num[ée]riqu|data|e-commerce/, { noun: 'sites technologiques', stats: ['équipements thermosensibles', 'data et bureaux à refroidir', 'salles techniques surchauffées'] }],
  [/textile|dentelle/, { noun: 'sites textiles', stats: ['halles reconverties exposées', 'anciennes usines surchauffées'] }],
  [/agroaliment|viticole|agro/, { noun: 'sites agroalimentaires', stats: ['chaîne du froid sous tension', 'ateliers réfrigérés sollicités', 'groupes froids en surrégime'] }],
  [/audiovisuel|studio/, { noun: 'studios et plateaux', stats: ['régies climatisées en continu', 'plateaux à température dirigée'] }],
  [/messagerie/, { noun: 'plateformes de messagerie', stats: ['quais en flux tendu', 'cross-dock surchauffé'] }],
  [/tertiaire|bureau/, { noun: 'bâtiments tertiaires', stats: ['toitures-terrasses techniques', 'CVC en toiture sollicitée', 'derniers étages surchauffés'] }],
  [/service|pmi|pme/, { noun: 'bâtiments de services', stats: ['bureaux et locaux exposés', 'locaux mixtes à climatiser'] }],
  [/commerce|commercial/, { noun: 'surfaces commerciales', stats: ['grandes surfaces à climatiser', 'toits commerciaux exposés'] }],
  [/logistiqu|entrep|fret|d[ée]p[ôo]t|distribution/, { noun: 'plateformes logistiques', stats: ['grandes toitures bac acier', 'vastes surfaces métalliques', 'entrepôts de 5 000 à 50 000 m²', 'toitures planes à perte de vue'] }],
  [/industri/, { noun: 'sites industriels', stats: ['chaleur des machines + soleil', 'ateliers surchauffés', 'production sous toiture chaude'] }],
];
const DEFAULT_SECTOR = { noun: "bâtiments d'activité", stats: ['forte exposition au soleil', 'aucun ombrage l’été', 'rayonnement direct toute la journée', 'surfaces planes non protégées'] };

function sectorEntry(label: string): { noun: string; stats: string[] } {
  const t = (label || '').toLowerCase();
  return SECTOR_MAP.find(([re]) => re.test(t))?.[1] ?? DEFAULT_SECTOR;
}
const sectorNoun = (label: string): string => sectorEntry(label).noun;
function hashStr(s: string): number {
  let h = 2166136261 >>> 0;
  for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; }
  return h;
}
/** Stat de secteur, variée d'une ville à l'autre (hash du slug) ; salt distingue les 2 cartes. */
const sectorStat = (label: string, slug: string, salt: number): string => {
  const pool = sectorEntry(label).stats;
  return pool[(hashStr(slug) + salt * 7) % pool.length];
};
const twoWords = (s: string): string => (s || '').toLowerCase().split(/\s+/).slice(0, 2).join(' ');
/** Stat de secteur manquante à remplacer par une valeur dérivée du contexte local. */
const isMissingStat = (s: string): boolean => !s.trim();

const fallbackActivities = [
  {
    title: 'Aéroportuaire',
    eyebrow: 'Roissy-CDG',
    metric: 'Tarmac, fret, hangars',
    text: "Les pistes, parkings avions et zones cargo renforcent l'îlot de chaleur. Les toitures exposées encaissent le rayonnement toute la journée, pendant que l'activité continue 24h/24.",
  },
  {
    title: 'Logistique',
    eyebrow: 'Entrepôts et plateformes',
    metric: 'Bac acier, quais, stockage',
    text: "Autour de Roissy, les plateformes logistiques concentrent de grandes surfaces métalliques. Quand la toiture chauffe, les quais, les stocks sensibles et les groupes froids subissent directement la contrainte.",
  },
];

const RoissyActivitiesSection = ({ zoneData }: RoissyActivitiesSectionProps) => {
  const city = zoneName(zoneData) || 'Roissy';
  const zonePrefixCap = zoneInPhraseCap(zoneData); // « À Roissy », « En Suisse », « Dans le Rhône »
  const slug = zoneData.slugVille ?? zoneData.slugDepartement ?? zoneData.slugRegion ?? 'x';
  const secteurs = zoneData.content?.secteurs;
  const activities =
    secteurs && secteurs.length > 0
      ? secteurs.map((s, i) => {
          const media = getSectorMedia(s.label, zoneData, i);
          const hasSourceStat = !isMissingStat(s.stat);
          return {
            title: s.label,
            image: s.image ?? media.src,
            eyebrow: city,
            metric: hasSourceStat ? s.stat : sectorStat(s.label, slug, i),
            isGeneratedMetric: !hasSourceStat,
            text: s.description,
            alt: s.image ? (s.imageAlt || `${s.label} — ${city}`) : media.alt,
          };
        })
      : fallbackActivities.map((a, i) => {
          const media = getSectorMedia(a.title, zoneData, i);
          return { ...a, image: media.src, alt: media.alt, isGeneratedMetric: true };
        });

  // Garde-fou : éviter deux stats trop ressemblantes entre les deux cartes
  if (
    activities.length >= 2 &&
    activities[1].isGeneratedMetric &&
    twoWords(activities[0].metric) === twoWords(activities[1].metric)
  ) {
    const pool = DEFAULT_SECTOR.stats;
    activities[1] = {
      ...activities[1],
      metric: pool.find((a) => twoWords(a) !== twoWords(activities[0].metric)) ?? pool[0],
    };
  }

  // Titre du bloc adapté aux activités réelles (hors carte de repli « Toitures exposées »).
  const titrePhrase =
    Array.from(
      new Set(activities.filter((a) => a.title !== 'Toitures exposées').map((a) => sectorNoun(a.title))),
    ).join(' et ') || "bâtiments d'activité";

  return (
    <section className="bg-white py-16 lg:py-28">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="mx-auto max-w-6xl">
          <ScrollReveal>
            <div className="mb-10 max-w-3xl lg:mb-14">
              <p className="mb-5 text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50 font-body">
                Activités principales
              </p>
              <h2
                className="font-satoshi text-3xl font-black !leading-[1.05] text-foreground sm:text-4xl lg:text-[3rem]"
                style={{ letterSpacing: '-0.03em' }}
              >
                {zonePrefixCap}, la chaleur frappe
                <span className="text-foreground/30"> d'abord vos {titrePhrase}.</span>
              </h2>
              {zoneData.content?.activitesIntro ? (
                <p
                  className="mt-5 text-base leading-relaxed text-foreground/58 font-body"
                  dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(zoneData.content.activitesIntro) }}
                />
              ) : (
                <p className="mt-5 text-base leading-relaxed text-foreground/58 font-body">
                  Deux familles de bâtiments dominent la zone : les infrastructures liées à l'aéroport et les plateformes de stockage. Dans les deux cas, la toiture devient une surface critique dès les premiers épisodes de forte chaleur.
                </p>
              )}
            </div>
          </ScrollReveal>

          <ScrollReveal stagger>
            <div className="grid gap-5 lg:grid-cols-2">
              {activities.map((activity) => (
                <article
                  key={activity.title}
                  className="overflow-hidden rounded-2xl border border-foreground/[0.06] bg-cream shadow-[0_12px_36px_rgba(26,42,58,0.08)]"
                >
                  <div className="relative aspect-[16/10] overflow-hidden">
                    <img
                      src={activity.image}
                      alt={activity.alt}
                      className="h-full w-full object-cover"
                      loading="lazy"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-foreground/72 via-foreground/18 to-transparent" />
                    <div className="absolute bottom-5 left-5 right-5">
                      <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-white/65 font-body">
                        {activity.eyebrow}
                      </p>
                      <h3 className="mt-1 font-satoshi text-3xl font-black leading-none text-white">
                        {activity.title}
                      </h3>
                    </div>
                  </div>
                  <div className="p-6 lg:p-7">
                    <p className="font-satoshi text-lg font-black leading-tight text-foreground">
                      {capitalizeFirst(activity.metric)}
                    </p>
                    <p className="mt-3 text-sm leading-relaxed text-foreground/58 font-body lg:text-base">
                      {activity.text}
                    </p>
                  </div>
                </article>
              ))}
            </div>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
};

export default RoissyActivitiesSection;
