import { ArrowRight, PlayCircle } from 'lucide-react';
import {
  getReferenceFilterHref,
  getReferenceHighlights,
  type CustomerReference,
  type ReferenceSector,
  type ReferenceSectorSlug,
} from '@/data/references';
import { referenceCanonicalPath } from '@/lib/frProdRoutes';

type SectorReferenceHighlightsProps = {
  sector: ReferenceSectorSlug;
  referenceFilter?: ReferenceSector | 'Tous';
  title?: string;
  intro?: string;
  variant?: 'dark' | 'light';
  limit?: number;
};

const readinessLabel: Record<CustomerReference['readiness'], string> = {
  grid: 'Référence publiée',
  proof: 'Preuve terrain',
  'phase-2-ready': 'Cas détaillé',
  'needs-client-input': 'À enrichir',
};

const getYoutubeId = (url: string) => {
  const match = url.match(/(?:watch\?v=|embed\/|youtu\.be\/)([^&?/]+)/);
  return match?.[1];
};

const getReferenceImage = (reference: CustomerReference) => {
  if (reference.image) return reference.image;
  const videoId = reference.videoUrls?.map(getYoutubeId).find(Boolean);
  return videoId ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` : undefined;
};

const SectorReferenceHighlights = ({
  sector,
  referenceFilter = 'Tous',
  title = 'Cas clients à rapprocher de votre secteur.',
  intro,
  variant = 'light',
  limit,
}: SectorReferenceHighlightsProps) => {
  const references = getReferenceHighlights(sector, limit);

  if (!references.length) return null;

  const href = getReferenceFilterHref(referenceFilter);
  const wrapperClass = variant === 'dark' ? 'mb-12' : 'my-12';

  return (
    <section className={wrapperClass} aria-label="Cas clients du secteur">
      <div className="overflow-hidden rounded-lg border border-border bg-white text-foreground shadow-[0_18px_70px_rgba(25,42,58,0.10)]">
        <div className="flex flex-col gap-5 px-4 py-7 sm:px-6 lg:flex-row lg:items-end lg:justify-between lg:px-8 lg:py-9">
          <div>
            <p className="mb-3 font-body text-[10px] font-bold uppercase tracking-[0.22em] text-primary/60">
              Cas clients
            </p>
            <h3 className="max-w-2xl font-satoshi text-2xl font-bold leading-tight text-foreground lg:text-3xl">
              {title}
            </h3>
            {intro ? (
              <p className="mt-3 max-w-2xl font-body text-sm leading-relaxed text-foreground/62">{intro}</p>
            ) : null}
          </div>
          <a
            href={href}
            className="group inline-flex items-center gap-2 font-body text-sm font-bold text-primary transition-all hover:gap-3"
          >
            Voir les références filtrées
            <ArrowRight className="h-4 w-4" />
          </a>
        </div>

        <div className="border-t border-border bg-[#F6FAFB] py-5">
          <div className="overflow-x-auto scroll-px-4 px-4 pb-2 [scrollbar-width:thin] sm:scroll-px-6 sm:px-6 lg:scroll-px-8 lg:px-8">
            <div className="flex snap-x snap-mandatory gap-4 pr-4 sm:pr-6 lg:pr-8">
              {references.map((reference) => {
                const image = getReferenceImage(reference);
                const detailHref = reference.detailSlug ? referenceCanonicalPath(reference.detailSlug) : undefined;
                const sourceHref = reference.sourceUrls?.[0];
                const cardHref = detailHref ?? sourceHref ?? href;

                return (
                  <article
                    key={reference.id}
                    className="flex min-h-[438px] w-[calc(100vw-3rem)] max-w-[360px] shrink-0 snap-start flex-col overflow-hidden rounded-lg border border-border bg-white shadow-sm sm:w-[360px] lg:w-[388px]"
                  >
                    <div className="relative aspect-[16/10] overflow-hidden bg-navy">
                      {image ? (
                        <img
                          src={image}
                          alt={reference.title}
                          className="h-full w-full object-cover"
                          loading="lazy"
                          decoding="async"
                        />
                      ) : (
                        <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/14 to-teal-light">
                          <span className="font-satoshi text-5xl font-black text-primary/18">
                            {reference.clientName.slice(0, 1)}
                          </span>
                        </div>
                      )}
                      {reference.videoUrls?.length ? (
                        <span className="absolute bottom-4 right-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-white text-primary shadow-md">
                          <PlayCircle className="h-5 w-5" />
                        </span>
                      ) : null}
                      <span className="absolute left-4 top-4 rounded-full bg-white px-3 py-1 font-body text-[11px] font-bold uppercase tracking-[0.12em] text-primary">
                        {reference.sector}
                      </span>
                    </div>

                    <div className="flex flex-1 flex-col p-5">
                      <div className="mb-4 flex flex-wrap items-center gap-2">
                        <span className="rounded-full border border-primary/15 bg-primary/8 px-3 py-1 font-body text-[11px] font-bold uppercase tracking-[0.12em] text-primary">
                          {readinessLabel[reference.readiness]}
                        </span>
                      </div>
                      <h4 className="font-satoshi text-xl font-bold leading-tight text-foreground">{reference.title}</h4>
                      <p className="mt-3 line-clamp-3 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, 4).map((metric) => (
                            <span
                              key={`${reference.id}-${metric.value}-${metric.label}`}
                              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}

                      <a
                        href={cardHref}
                        target={detailHref ? undefined : sourceHref ? '_blank' : undefined}
                        rel={detailHref ? undefined : sourceHref ? 'noopener noreferrer' : undefined}
                        className="group mt-auto inline-flex items-center gap-2 pt-6 font-body text-sm font-bold text-primary transition-all hover:gap-3"
                      >
                        {detailHref ? 'Voir le cas' : sourceHref ? 'Voir la source' : 'Voir les références'}
                        <ArrowRight className="h-4 w-4" />
                      </a>
                    </div>
                  </article>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SectorReferenceHighlights;