import { useState } from 'react';
import { AlertTriangle, Check, X } from 'lucide-react';
import type { ReactNode } from 'react';
import ScrollReveal from '@/components/ScrollReveal';

interface CompatibleRoof {
  type: string;
  detail: string;
  incompatible?: boolean;
  image?: string;
}

interface Props {
  productName: string;
  compatibleRoofs: CompatibleRoof[];
  intro?: ReactNode;
  coverageNote?: string;
  footerNote?: ReactNode;
}

/**
 * "Compatible substrates" section (English variant).
 * Desktop: clickable tab list (thumbnail + label) on the left, large image +
 * detail of the active selection on the right.
 * Mobile: horizontal scrollable thumbnail strip + active panel below.
 * Dedicated visual treatment (red + warning callout) for `incompatible: true`.
 */
const CompatibilityTabsEN = ({
  productName,
  compatibleRoofs,
  intro,
  coverageNote,
  footerNote,
}: Props) => {
  const [active, setActive] = useState(0);
  const current = compatibleRoofs[active];
  const currentCompatibleIndex = current.incompatible
    ? null
    : compatibleRoofs.slice(0, active + 1).filter((x) => !x.incompatible).length;

  return (
    <section className="relative py-16 lg:py-24 bg-teal-light overflow-hidden">
      {/* Header — shared */}
      <div className="relative container mx-auto px-4 lg:px-8 max-w-5xl">
        <ScrollReveal>
          <div className="max-w-2xl mb-8 lg:mb-14">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
              Compatibility
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05] mb-5"
              style={{ letterSpacing: '-0.03em' }}
            >
              Compatible substrates
              <br />
              <span className="text-foreground/45">with {productName}.</span>
            </h2>
            {intro && (
              <div className="text-sm text-foreground/75 font-body leading-relaxed space-y-3">
                {intro}
              </div>
            )}
            {coverageNote && (
              <p className="text-xs text-foreground/55 font-body italic mt-3">{coverageNote}</p>
            )}
          </div>
        </ScrollReveal>
      </div>

      {/* Mobile — full-width horizontal strip (lg:hidden) */}
      <div className="lg:hidden">
        <ScrollReveal>
          <div
            className="flex overflow-x-auto gap-2.5 px-4 pb-3 snap-x"
            style={{ scrollbarWidth: 'none' }}
          >
            {compatibleRoofs.map((r, i) => {
              const isActive = i === active;
              return (
                <button
                  key={i}
                  onClick={() => setActive(i)}
                  aria-pressed={isActive}
                  className={`group shrink-0 flex flex-col items-center snap-start transition-all ${
                    isActive ? '' : 'opacity-60'
                  }`}
                >
                  <div
                    className={`w-[72px] h-[72px] rounded-xl overflow-hidden relative border-2 ${
                      r.incompatible
                        ? isActive ? 'border-red-500' : 'border-red-200'
                        : isActive ? 'border-foreground' : 'border-transparent'
                    }`}
                  >
                    {r.image && (
                      <img
                        src={r.image}
                        alt={`${r.type} surface`}
                        className={`w-full h-full object-cover ${
                          r.incompatible ? 'saturate-50' : ''
                        }`}
                        loading="lazy"
                      />
                    )}
                    {r.incompatible && (
                      <div className="absolute inset-0 flex items-center justify-center bg-red-500/20">
                        <X className="w-5 h-5 text-red-600" strokeWidth={3} />
                      </div>
                    )}
                  </div>
                  <span
                    className={`mt-1.5 text-[11px] font-satoshi font-bold leading-tight max-w-[80px] text-center line-clamp-2 ${
                      r.incompatible
                        ? 'text-red-700'
                        : isActive
                        ? 'text-foreground'
                        : 'text-foreground/60'
                    }`}
                  >
                    {r.type}
                  </span>
                </button>
              );
            })}
          </div>
        </ScrollReveal>
      </div>

      {/* Container with active panel (mobile + desktop) + desktop tabs */}
      <div className="relative container mx-auto px-4 lg:px-8 max-w-5xl mt-4 lg:mt-0">
        <ScrollReveal>
          <div className="grid grid-cols-1 lg:grid-cols-[4fr_6fr] gap-6 lg:gap-10 items-start">
            {/* Desktop tabs — hidden on mobile */}
            <div className="hidden lg:flex flex-col gap-2">
              {compatibleRoofs.map((r, i) => {
                const isActive = i === active;
                const compatibleIndex = r.incompatible
                  ? null
                  : compatibleRoofs.slice(0, i + 1).filter((x) => !x.incompatible).length;
                return (
                  <button
                    key={i}
                    onClick={() => setActive(i)}
                    className={`group flex items-center gap-4 text-left rounded-xl p-3 border transition-all ${
                      r.incompatible
                        ? isActive
                          ? 'border-red-500 bg-red-50 shadow-[0_4px_20px_rgba(220,38,38,0.12)]'
                          : 'border-red-200 bg-red-50/30 hover:border-red-300 hover:bg-red-50/60'
                        : isActive
                        ? 'border-foreground bg-white shadow-[0_4px_20px_rgba(26,42,58,0.06)]'
                        : 'border-foreground/10 bg-white/60 hover:border-foreground/25 hover:bg-white'
                    }`}
                  >
                    <div className="shrink-0 w-14 h-14 rounded-lg overflow-hidden bg-foreground/5 relative">
                      {r.image && (
                        <img
                          src={r.image}
                          alt={`${r.type} surface`}
                          className={`w-full h-full object-cover ${
                            r.incompatible ? 'saturate-50 opacity-60' : ''
                          }`}
                          loading="lazy"
                        />
                      )}
                      {r.incompatible && (
                        <div className="absolute inset-0 flex items-center justify-center bg-red-500/20">
                          <X className="w-7 h-7 text-red-600" strokeWidth={3} />
                        </div>
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-0.5">
                        {r.incompatible ? (
                          <span className="inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-[0.15em] text-red-600">
                            <AlertTriangle className="w-2.5 h-2.5" strokeWidth={2.5} />
                            Not compatible
                          </span>
                        ) : (
                          <span className="text-[10px] font-mono font-bold tabular-nums text-foreground/45">
                            {String(compatibleIndex!).padStart(2, '0')}
                          </span>
                        )}
                      </div>
                      <p className={`text-sm font-satoshi font-bold leading-snug truncate ${
                        r.incompatible ? 'text-red-900' : 'text-foreground'
                      }`}>
                        {r.type}
                      </p>
                    </div>
                  </button>
                );
              })}
            </div>

            {/* Active panel — shared mobile + desktop */}
            <div>
              <div className={`relative aspect-[4/3] rounded-2xl overflow-hidden mb-4 lg:mb-5 ${
                current.incompatible
                  ? 'bg-red-50 ring-2 ring-red-500'
                  : 'bg-foreground/5'
              }`}>
                {current.image && (
                  <img
                    src={current.image}
                    alt={`${current.type} surface`}
                    className={`w-full h-full object-cover ${
                      current.incompatible ? 'saturate-50 opacity-70' : ''
                    }`}
                    loading="lazy"
                  />
                )}
                {current.incompatible && (
                  <>
                    <div className="absolute inset-0 bg-red-600/10" />
                    <div
                      aria-hidden="true"
                      className="absolute inset-0 opacity-[0.12] pointer-events-none"
                      style={{
                        backgroundImage:
                          'repeating-linear-gradient(45deg, rgb(220 38 38) 0, rgb(220 38 38) 12px, transparent 12px, transparent 28px)',
                      }}
                    />
                  </>
                )}
                <div className="absolute top-3 left-3 lg:top-4 lg:left-4">
                  {current.incompatible ? (
                    <span className="inline-flex items-center gap-1.5 bg-red-600 text-white text-[10px] lg:text-[11px] font-bold uppercase tracking-[0.15em] px-2.5 lg:px-3 py-1 lg:py-1.5 rounded-full shadow-[0_4px_16px_rgba(220,38,38,0.35)]">
                      <AlertTriangle className="w-3 h-3 lg:w-3.5 lg:h-3.5" strokeWidth={2.75} />
                      Not compatible
                    </span>
                  ) : (
                    <span className="inline-flex items-center gap-1.5 bg-teal-vivid text-white text-[10px] lg:text-[11px] font-bold uppercase tracking-[0.15em] px-2.5 lg:px-3 py-1 lg:py-1.5 rounded-full shadow-[0_4px_16px_rgba(58,173,173,0.30)]">
                      <Check className="w-3 h-3 lg:w-3.5 lg:h-3.5" strokeWidth={2.75} />
                      Compatible
                    </span>
                  )}
                </div>
                {!current.incompatible && currentCompatibleIndex !== null && (
                  <span className="absolute top-3 right-3 lg:top-4 lg:right-4 inline-flex items-center bg-white/90 backdrop-blur-sm text-foreground text-[10px] font-mono font-bold tabular-nums px-2.5 py-1 rounded-full">
                    {String(currentCompatibleIndex).padStart(2, '0')}
                  </span>
                )}
              </div>

              <h3 className={`font-satoshi text-xl lg:text-3xl font-black mb-2 lg:mb-3 !leading-[1.1] ${
                current.incompatible ? 'text-red-900' : 'text-foreground'
              }`} style={{ letterSpacing: '-0.02em' }}>
                {current.type}
              </h3>
              <p className={`text-sm lg:text-base font-body leading-relaxed ${
                current.incompatible ? 'text-red-900/75' : 'text-foreground/70'
              }`}>
                {current.detail}
              </p>

              {current.incompatible && (
                <div className="mt-4 lg:mt-5 rounded-xl border border-red-200 bg-red-50/70 p-3 lg:p-4 flex gap-2.5 lg:gap-3">
                  <AlertTriangle className="w-4 h-4 lg:w-5 lg:h-5 text-red-600 shrink-0 mt-0.5" strokeWidth={2.25} />
                  <div className="text-xs lg:text-sm text-red-900/85 font-body leading-relaxed">
                    <strong className="text-red-900">Do not apply {productName} on glazing.</strong>{' '}
                    On glass, skylights or verandas, an <strong>interior-applied solar film</strong> offers far better aesthetics and superior durability. For translucent polymers (polycarbonate, polyester), {productName} remains the right solution.
                  </div>
                </div>
              )}
            </div>
          </div>
          {footerNote && (
            <p className="text-xs text-foreground/70 font-body leading-relaxed mt-8 lg:mt-10 max-w-2xl">{footerNote}</p>
          )}
        </ScrollReveal>
      </div>
    </section>
  );
};

export default CompatibilityTabsEN;