"use client";

import { useState } from 'react';
import { ArrowRight, ExternalLink, Filter } from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import StickyMobileCTA from '@/components/StickyMobileCTA';
import { Badge } from '@/components/ui/badge';
import {
  getGridReferencesBySector,
  gridReferences,
  referenceSectors,
  sectorSlugs,
} from '@/data/references';
import { referenceCanonicalPath } from '@/lib/frProdRoutes';

const sectors = ['Tous', ...referenceSectors] as const;
type ActiveSector = (typeof sectors)[number];

export interface ReferencesProps {
  heroBadge?: string;
  heroTitre?: string;
  heroIntro?: string;
  heroCtaLabel?: string;
  heroCtaHref?: string;
  heroSecondaireLabel?: string;
  heroSecondaireHref?: string;
  grilleBadge?: string;
  grilleTitre?: string;
  grilleIntro?: string;
  ctaTitre?: string;
  ctaTexte?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const References = ({
  heroBadge = 'Références',
  heroTitre = 'Nos réalisations cool roof.',
  heroIntro = 'Découvrez comment les revêtements cool roof Covalba sont déployés sur des bâtiments professionnels : distribution, tertiaire, logistique, industrie et territoires. La page reprend les cas publiés sur le site Covalba.',
  heroCtaLabel = 'Obtenir un devis',
  heroCtaHref = '/diagnostic',
  heroSecondaireLabel = 'Nous contacter',
  heroSecondaireHref = '/contact',
  grilleBadge = 'Cas clients',
  grilleTitre = 'Des références représentatives.',
  grilleIntro = 'Filtrez les réalisations par secteur et retrouvez les chantiers publiés sur la page actuelle.',
  ctaTitre = 'Nos équipes sont prêtes à vous accompagner.',
  ctaTexte = 'Choix du système, applicateur agréé et accompagnement chantier.',
  ctaLabel = 'Obtenir un devis',
  ctaHref = '/diagnostic',
}: ReferencesProps = {}) => {
  const requestedSector =
    typeof window === 'undefined' ? '' : new URLSearchParams(window.location.search).get('secteur') ?? '';
  const [activeSector, setActiveSector] = useState<ActiveSector>(
    () => sectors.find((sector) => sectorSlugs[sector] === requestedSector) ?? 'Tous'
  );
  const filteredReferences = getGridReferencesBySector(activeSector);
  const sectorCounts = gridReferences.reduce<Record<string, number>>(
    (acc, reference) => ({ ...acc, [reference.sector]: (acc[reference.sector] ?? 0) + 1 }),
    { Tous: gridReferences.length }
  );
  const selectSector = (sector: ActiveSector) => {
    setActiveSector(sector);
    if (typeof window !== 'undefined') {
      const href = sector === 'Tous' ? '/references' : `/references?secteur=${sectorSlugs[sector]}`;
      window.history.replaceState(null, '', href);
    }
  };

  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <main>
        <section className="bg-navy pb-16 pt-28 text-white lg:pb-20 lg:pt-32">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="max-w-4xl">
                <Badge className="mb-5 border-white/12 bg-white/10 text-white">{heroBadge}</Badge>
                <h1 className="max-w-4xl font-satoshi text-4xl font-black leading-tight tracking-tight md:text-6xl">
                  {heroTitre}
                </h1>
                <p className="mt-6 max-w-3xl font-body text-lg leading-relaxed text-white/68">
                  {heroIntro}
                </p>
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href={heroCtaHref} className="group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white">
                    <span className="text-sm">{heroCtaLabel}</span>
                    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform group-hover:translate-x-0.5">
                      <ArrowRight className="h-4 w-4" />
                    </span>
                  </a>
                  <a href={heroSecondaireHref} className="inline-flex items-center justify-center rounded-full border border-white/15 px-5 py-3 font-body text-sm font-bold text-white/78 hover:bg-white/10">
                    {heroSecondaireLabel}
                  </a>
                </div>
            </div>
          </div>
        </section>

        <section className="bg-offwhite py-8">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="flex flex-wrap items-center gap-3">
              <span className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 font-body text-sm font-bold text-foreground/55">
                <Filter className="h-4 w-4 text-primary" />
                Secteurs
              </span>
              {sectors.map((sector) => (
                <button
                  key={sector}
                  type="button"
                  onClick={() => selectSector(sector)}
                  onPointerDown={() => selectSector(sector)}
                  onKeyDown={(event) => {
                    if (event.key === 'Enter' || event.key === ' ') {
                      event.preventDefault();
                      selectSector(sector);
                    }
                  }}
                  className={`rounded-full px-4 py-2 font-body text-sm font-semibold transition-colors ${
                    activeSector === sector ? 'bg-primary text-white' : 'bg-card text-foreground/62 hover:bg-primary/8 hover:text-primary'
                  }`}
                >
                  {sector} <span className="opacity-60">{sectorCounts[sector] ?? 0}</span>
                </button>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-background py-16 lg:py-24">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="mb-10 max-w-3xl">
              <Badge className="mb-4 bg-teal-light text-primary">{grilleBadge}</Badge>
              <h2 className="font-satoshi text-3xl font-black tracking-tight text-foreground lg:text-5xl">
                {grilleTitre}
              </h2>
              <p className="mt-4 font-body text-lg leading-relaxed text-foreground/62">
                {grilleIntro}
              </p>
            </div>
            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
              {filteredReferences.map((reference) => (
                <article key={reference.id} className="group flex overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg">
                  <div className="flex w-full flex-col">
                  <div className="relative aspect-[16/10] overflow-hidden bg-navy">
                    <img
                      src={reference.image ?? '/placeholder.svg'}
                      alt={reference.title}
                      loading="lazy"
                      className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-navy/78 via-transparent to-transparent" />
                    <div className="absolute bottom-5 left-5">
                      <span className="rounded-full bg-white px-3 py-1 font-body text-xs font-bold text-primary">{reference.sector}</span>
                    </div>
                  </div>
                  <div className="flex flex-1 flex-col p-6 lg:p-7">
                    <h3 className="font-satoshi text-2xl font-black leading-tight tracking-tight text-foreground">
                      {reference.title}
                    </h3>
                    <p className="mt-4 font-body text-sm leading-relaxed text-foreground/62">
                      {reference.description}
                    </p>
                    {reference.metrics?.length ? (
                      <div className="mt-5 grid grid-cols-2 gap-2">
                        {reference.metrics.slice(0, 2).map((metric) => (
                          <span key={`${reference.id}-${metric.value}`} className="rounded-lg border border-primary/12 bg-primary/6 px-3 py-2 text-primary">
                            <span className="block font-satoshi text-lg font-bold leading-none">{metric.value}</span>
                            <span className="mt-1 block font-body text-[11px] leading-tight opacity-75">{metric.label}</span>
                          </span>
                        ))}
                      </div>
                    ) : null}
                    {reference.detailSlug ? (
                      <a
                        href={referenceCanonicalPath(reference.detailSlug)}
                        className="group/link mt-auto inline-flex items-center gap-2 pt-6 font-body text-sm font-bold text-primary transition-all hover:gap-3"
                      >
                        Voir le cas <ArrowRight className="h-4 w-4" />
                      </a>
                    ) : reference.sourceUrls?.[0] ? (
                      <a
                        href={reference.sourceUrls[0]}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="group/link mt-auto inline-flex items-center gap-2 pt-6 font-body text-sm font-bold text-primary transition-all hover:gap-3"
                      >
                        Source publique <ExternalLink className="h-4 w-4" />
                      </a>
                    ) : null}
                  </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-navy py-16 text-white">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
              <div>
                <Badge className="mb-4 border-white/12 bg-white/10 text-white">Votre projet</Badge>
                <h2 className="font-satoshi text-3xl font-black tracking-tight lg:text-5xl">
                  {ctaTitre}
                </h2>
                <p className="mt-4 max-w-2xl font-body text-lg leading-relaxed text-white/62">
                  {ctaTexte}
                </p>
              </div>
              <a href={ctaHref} className="group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white">
                <span className="text-sm">{ctaLabel}</span>
                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform group-hover:translate-x-0.5">
                  <ArrowRight className="h-4 w-4" />
                </span>
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <StickyMobileCTA label="Obtenir un devis" href="/diagnostic" phoneHref="tel:+33238775708" />
    </div>
  );
};

export default References;