import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import ScrollReveal from '@/components/ScrollReveal';
import type { ZoneData } from '@/data/zones';

const frDec = (n: number) => n.toFixed(1).replace('.', ',');

function getZoneLabel(zone: ZoneData): string {
  if (zone.pageType === 'region') return `en ${zone.region}`;
  if (zone.pageType === 'departement') return `dans le ${zone.departementNom}`;
  return `\u00e0 ${zone.ville}`;
}

interface ClimateProjectionBlocksProps {
  zoneData: ZoneData;
}

const ClimateProjectionBlocks = ({ zoneData }: ClimateProjectionBlocksProps) => {
  const zoneLabel = getZoneLabel(zoneData);

  const baseTemp = zoneData.tempMoyEstivale;
  const baseDays = zoneData.joursSup30C;

  // +5 ans (interpolated)
  const temp5 = Number(((baseTemp + zoneData.tempMoyEstivale10ans) / 2).toFixed(1));
  const days5 = Math.round((baseDays + zoneData.joursSup30C10ans) / 2);

  const gainPct5 = Math.round(zoneData.reductionSousToiture * 0.7 * 3);
  const gainDeg5 = Math.round(zoneData.reductionSousToiture * 0.7);
  const gainPct10 = Math.round(zoneData.reductionSousToiture * 0.85 * 3);
  const gainDeg10 = Math.round(zoneData.reductionSousToiture * 0.85);
  const gainPct20 = zoneData.reductionSousToiture * 3;
  const gainDeg20 = zoneData.reductionSousToiture;

  const horizons = [
    {
      label: '+5 ans',
      year: 2031,
      temp: temp5,
      days: days5,
      deltaTemp: temp5 - baseTemp,
      deltaDays: days5 - baseDays,
      gainPct: gainPct5,
      gainDeg: gainDeg5,
      tone: 'amber' as const,
      desc: "Les premiers effets sont d\u00e9j\u00e0 l\u00e0. La surcharge thermique s\u2019installe, la facture de climatisation commence \u00e0 d\u00e9river \u2014 chaque \u00e9t\u00e9 un peu plus que le pr\u00e9c\u00e9dent.",
    },
    {
      label: '+10 ans',
      year: 2036,
      temp: zoneData.tempMoyEstivale10ans,
      days: zoneData.joursSup30C10ans,
      deltaTemp: zoneData.tempMoyEstivale10ans - baseTemp,
      deltaDays: zoneData.joursSup30C10ans - baseDays,
      gainPct: gainPct10,
      gainDeg: gainDeg10,
      tone: 'orange' as const,
      desc: "La trajectoire du GIEC se confirme. Les canicules se r\u00e9p\u00e8tent, les groupes froids saturent et l\u2019\u00e9tanch\u00e9it\u00e9 vieillit deux fois plus vite sous les cycles thermiques.",
    },
    {
      label: '+20 ans',
      year: 2046,
      temp: zoneData.tempMoyEstivale20ans,
      days: zoneData.joursSup30C20ans,
      deltaTemp: zoneData.tempMoyEstivale20ans - baseTemp,
      deltaDays: zoneData.joursSup30C20ans - baseDays,
      gainPct: gainPct20,
      gainDeg: gainDeg20,
      tone: 'red' as const,
      desc: "Sans protection, le co\u00fbt cumul\u00e9 explose \u2014 surconsommation, maintenance anticip\u00e9e, remplacement de couverture. Chaque ann\u00e9e sans cool roof est une ann\u00e9e de surco\u00fbt.",
    },
  ];

  const toneStyles = {
    amber: {
      card: 'bg-amber-50/80 border-amber-200/50',
      year: 'text-amber-500',
      badge: 'bg-amber-500',
      delta: 'text-amber-700 bg-amber-100/80',
    },
    orange: {
      card: 'bg-orange-50/80 border-orange-200/50',
      year: 'text-orange-500',
      badge: 'bg-orange-500',
      delta: 'text-orange-700 bg-orange-100/80',
    },
    red: {
      card: 'bg-red-50/80 border-red-200/50',
      year: 'text-red-500',
      badge: 'bg-red-500',
      delta: 'text-red-700 bg-red-100/80',
    },
  };

  return (
    <div className="py-20 lg:py-28 border-t border-foreground/[0.06] px-2 lg:px-6">

      {/* Header — same style as other panels */}
      <ScrollReveal>
        <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
          Projection climatique
        </p>
        <h2
          className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05]"
          style={{ letterSpacing: '-0.03em' }}
        >
          Ce qui attend vos toitures
          <span className="text-foreground/30"> {zoneLabel}.</span>
        </h2>
        <p className="text-foreground/50 text-base font-body leading-relaxed mt-6">
          Trajectoire m{'\u00e9'}diane du GIEC appliqu{'\u00e9'}e au d{'\u00e9'}partement.
          Pas le pire sc{'\u00e9'}nario — celui qui se confirme chaque {'\u00e9'}t{'\u00e9'} depuis dix ans.
        </p>
      </ScrollReveal>

      {/* Baseline pill */}
      <ScrollReveal>
        <div className="flex flex-wrap items-center gap-4 mt-10 mb-8">
          <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-foreground/[0.04] border border-foreground/[0.06]">
            <div className="w-2 h-2 rounded-full bg-blue-500" />
            <span className="text-sm font-body font-semibold text-foreground/60">
              R{'\u00e9'}f{'\u00e9'}rence 2026
            </span>
          </div>
          <div className="flex items-center gap-4 text-sm font-body text-foreground/40">
            <span>
              <strong className="text-foreground/70 font-semibold">{baseDays}</strong> jours {'>'} 30 {'\u00b0'}C
            </span>
            <span className="text-foreground/15">|</span>
            <span>
              <strong className="text-foreground/70 font-semibold">{frDec(baseTemp)} {'\u00b0'}C</strong> moy. {'\u00e9'}t{'\u00e9'}
            </span>
          </div>
        </div>
      </ScrollReveal>

      {/* 3 horizon blocks */}
      <div className="flex flex-col gap-5">
        {horizons.map((h) => {
          const s = toneStyles[h.tone];

          return (
            <ScrollReveal key={h.label}>
              <div className={`relative rounded-2xl border ${s.card} p-6 lg:p-8 overflow-hidden transition-shadow hover:shadow-lg`}>
                <div className="flex flex-col lg:flex-row lg:items-start gap-6 lg:gap-10">

                  {/* LEFT — year */}
                  <div className="lg:w-[160px] shrink-0">
                    <span className={`${s.badge} text-white text-[10px] font-body font-bold uppercase tracking-widest px-3 py-1 rounded-full`}>
                      {h.label}
                    </span>
                    <div
                      className={`font-satoshi font-black text-5xl lg:text-6xl !leading-none mt-3 ${s.year}`}
                      style={{ letterSpacing: '-0.04em' }}
                    >
                      {h.year}
                    </div>
                  </div>

                  {/* RIGHT */}
                  <div className="flex-1 min-w-0">

                    {/* Deltas */}
                    <div className="flex flex-wrap gap-3 mb-4">
                      <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl ${s.delta}`}>
                        <span className="font-satoshi font-black text-lg !leading-none">+{h.deltaDays}</span>
                        <span className="text-sm font-body font-semibold opacity-70">jours {'>'} 30 {'\u00b0'}C</span>
                      </div>
                      <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl ${s.delta}`}>
                        <span className="font-satoshi font-black text-lg !leading-none">+{frDec(h.deltaTemp)}</span>
                        <span className="text-sm font-body font-semibold opacity-70">{'\u00b0'}C moy. {'\u00e9'}t{'\u00e9'}</span>
                      </div>
                    </div>

                    {/* Gains cool roof */}
                    <div className="flex flex-wrap gap-3 mb-4">
                      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary/[0.07] border border-primary/[0.10]">
                        <span className="font-satoshi font-black text-primary text-base !leading-none">{'\u2212'}{h.gainPct} %</span>
                        <span className="text-xs font-body font-semibold text-primary/60">facture clim</span>
                      </div>
                      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary/[0.07] border border-primary/[0.10]">
                        <span className="font-satoshi font-black text-primary text-base !leading-none">{'\u2212'}{h.gainDeg} {'\u00b0'}C</span>
                        <span className="text-xs font-body font-semibold text-primary/60">sous toiture</span>
                      </div>
                    </div>

                    {/* Description */}
                    <p className="text-foreground/55 text-base font-body leading-relaxed">
                      {h.desc}
                    </p>
                  </div>
                </div>
              </div>
            </ScrollReveal>
          );
        })}
      </div>
    </div>
  );
};

export default ClimateProjectionBlocks;