import { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import { api } from '../../api/client.js';
import usePageMeta from '../../hooks/usePageMeta.js';
import MaintenanceNotice from '../../components/MaintenanceNotice.jsx';
import MaintenanceBypassBanner from '../../components/MaintenanceBypassBanner.jsx';
import DynamicIcon from '../../components/DynamicIcon.jsx';
import { useMaintenance } from '../../context/MaintenanceContext.jsx';
import { useLanguage } from '../../context/LanguageContext.jsx';
import { useSiteSettings } from '../../context/SiteSettingsContext.jsx';
import roadGlowTexture from '../../assets/textures/road-glow.webp';
// Die 8 fertigen "Straßen"-Glow-Bilder aus dem Kunden-Referenzdesign (Kacheln.html) -
// je Preisstufe ein eigenes Bild (Grau -> Petrol -> Gruen -> Gold). Wurden 1:1 aus der
// Referenzdatei extrahiert und nur PNG->WebP optimiert (Motiv unveraendert).
import roadBase from '../../assets/roads/base.webp';
import roadClear from '../../assets/roads/clear.webp';
import roadDrive from '../../assets/roads/drive.webp';
import roadPrime from '../../assets/roads/prime.webp';
import roadEliteR from '../../assets/roads/elite_r.webp';
import roadApex from '../../assets/roads/apex.webp';
import roadStatement from '../../assets/roads/statement.webp';
import roadLimitless from '../../assets/roads/limitless.webp';

const hslToRgb = (h, s, l) => {
  s /= 100;
  l /= 100;
  const k = (n) => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
};
const hslCss = (h, s, l) => `rgb(${hslToRgb(h, s, l).join(', ')})`;
// Baut aus [bgH,bgS,bgL, acH,acS,acL]-Zeilen eine Stufenliste ohne eigenes Straßenbild
// (fuer die beiden nicht im Referenzdesign enthaltenen Themes) - Rahmenfarbe = Flaeche
// etwas heller, wie im Referenzdesign.
const gen = (rows) =>
  rows.map(([bh, bs, bl, ah, as, al]) => ({
    bgTop: hslCss(bh, bs, bl),
    border: hslCss(bh, bs, bl + 8),
    accent: hslCss(ah, as, al),
    img: null,
  }));

// "graphite" = exakt die 8 Referenz-Kacheln (Farben + Straßenbild) aus Kacheln.html:
// Base / Clear / Drive / Prime / Elite R / Apex / The Statement / Limitless. Jede Stufe
// hat eine Flaechenfarbe oben im Verlauf (bgTop), eine Rahmenfarbe (border) und eine
// Akzentfarbe (Name + Trennlinie). Welche Stufe ein Paket bekommt, ergibt sich aus seinem
// Preis-Rang (siehe tierOf). Die beiden anderen Themes sind eigene Farbfamilien im selben
// Aufbau, nutzen aber (mangels eigener Referenzbilder) das neutrale, umfaerbbare Glow-Motiv.
const PACKAGE_THEMES = {
  graphite: [
    { accent: '#b6b6b6', border: '#2a2a2a', bgTop: '#1c1c1c', img: roadBase },
    { accent: '#d3d3d3', border: '#2e2e2e', bgTop: '#212121', img: roadClear },
    { accent: '#8fb8bd', border: '#26383b', bgTop: '#16282b', img: roadDrive },
    { accent: '#6fbf73', border: '#1f3a24', bgTop: '#122916', img: roadPrime },
    { accent: '#63d34f', border: '#204a1c', bgTop: '#123312', img: roadEliteR },
    { accent: '#8bea3c', border: '#2b5518', bgTop: '#173a0f', img: roadApex },
    { accent: '#d9a83c', border: '#4a3a16', bgTop: '#33270d', img: roadStatement },
    { accent: '#f2c14e', border: '#5a4718', bgTop: '#3d2f0c', img: roadLimitless },
  ],
  'deep-blue': gen([
    [215, 18, 11, 210, 15, 60],
    [212, 25, 11, 208, 32, 60],
    [210, 38, 12, 206, 46, 60],
    [212, 46, 12, 205, 56, 61],
    [214, 52, 12, 205, 63, 62],
    [216, 58, 12, 205, 68, 63],
    [220, 62, 12, 212, 73, 65],
    [226, 66, 12, 216, 78, 68],
  ]),
  'warm-bronze': gen([
    [30, 15, 11, 34, 22, 60],
    [34, 32, 11, 34, 46, 60],
    [32, 46, 12, 30, 58, 60],
    [26, 52, 12, 24, 65, 60],
    [20, 55, 12, 18, 68, 60],
    [14, 55, 12, 12, 68, 61],
    [8, 52, 12, 6, 64, 62],
    [2, 50, 12, 358, 60, 63],
  ]),
};

// Referenz-Werte fuer die Preis-Sektion (unabhaengig von der Preisstufe, wie im Design):
const PRICE_COLOR = '#f2f2f2';
const LABEL_COLOR = '#8a8a8a';
const BULLET_COLOR = '#c4c4c4';

// Mehr sichtbare Stichpunkte wuerden das Straßenbild verdraengen - gerade bei den teuren
// Paketen (die laut Kunde die laengsten Listen haben) soll die Kachel ruhig bleiben. Der
// Rest steckt hinter einem "+X weitere Leistungen"-Toggle, dessen Zaehler selbst als
// Wertigkeitssignal wirkt.
const VISIBLE_BULLETS = 5;

function PackageCard({ pkg, tier, tierT, isStripLayout, bullets, formatPrice, contactUrl, t }) {
  const [expanded, setExpanded] = useState(false);
  const hiddenCount = bullets.length - VISIBLE_BULLETS;
  const shownBullets = expanded ? bullets : bullets.slice(0, VISIBLE_BULLETS);

  // Fuer die Themes ohne eigenes Straßenbild: neutrales Glow-Motiv, per Maske
  // in die Akzentfarbe eingefaerbt (zwei Ebenen: weicher Halo + scharfe Kontur).
  const glowMask = tier.img
    ? null
    : {
        backgroundColor: tier.accent,
        WebkitMaskImage: `url(${roadGlowTexture})`,
        maskImage: `url(${roadGlowTexture})`,
        maskMode: 'luminance',
        WebkitMaskSize: 'cover',
        maskSize: 'cover',
        WebkitMaskPosition: 'center',
        maskPosition: 'center',
        WebkitMaskRepeat: 'no-repeat',
        maskRepeat: 'no-repeat',
      };

  return (
    <div
      style={{
        borderColor: tier.border,
        background: `linear-gradient(180deg, ${tier.bgTop} 0%, #0b0b0b 55%, #080808 100%)`,
      }}
      className={
        isStripLayout
          ? 'relative flex min-h-[640px] grow shrink basis-[190px] min-w-[190px] max-w-[240px] snap-start flex-col overflow-hidden rounded-[18px] border shadow-xl shadow-neutral-900/20 dark:shadow-black/40 sm:basis-[210px]'
          : 'relative flex min-h-[640px] flex-col overflow-hidden rounded-[18px] border shadow-xl shadow-neutral-900/20 dark:shadow-black/40'
      }
    >
      {/* Vollflaechiges Straßen-Glow-Bild der Preisstufe (Referenzdesign). */}
      {tier.img ? (
        <img
          src={tier.img}
          alt=""
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 h-full w-full object-cover"
        />
      ) : (
        <>
          <div
            className="pointer-events-none absolute inset-0"
            style={{ ...glowMask, opacity: 0.2 + tierT * 0.45, filter: 'blur(18px)' }}
            aria-hidden="true"
          />
          <div
            className="pointer-events-none absolute inset-0"
            style={{ ...glowMask, opacity: 0.55 + tierT * 0.45 }}
            aria-hidden="true"
          />
        </>
      )}

      {pkg.is_featured && (
        <span className="absolute -top-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white shadow">
          {t('modelPage.featuredBadge')}
        </span>
      )}

      {/* Kopf: Name + Trennlinie (exakt Referenz). */}
      <div className="relative z-10 text-center" style={{ padding: '34px 20px 0' }}>
        <div
          style={{
            fontFamily: "'Barlow Condensed', sans-serif",
            fontSize: '30px',
            letterSpacing: '3px',
            fontWeight: 600,
            color: tier.accent,
            textTransform: 'uppercase',
            lineHeight: 1.1,
          }}
        >
          {pkg.name}
        </div>
        <div
          style={{
            width: '44px',
            height: '2px',
            margin: '14px auto 0',
            background: `linear-gradient(90deg, rgba(255,255,255,0) 0%, ${tier.accent} 50%, rgba(255,255,255,0) 100%)`,
          }}
        />
      </div>

      {/* Stichpunkte direkt unter dem Kopf, leicht abgedunkelter Hintergrund fuer
          Lesbarkeit ueber dem Straßenbild - aufgeklappt deckender, da die Liste dann
          weiter ins helle Bildzentrum hineinreicht. */}
      {bullets.length > 0 && (
        <div
          className="relative z-10"
          style={{
            padding: '18px 20px 14px',
            background: expanded
              ? 'linear-gradient(180deg, rgba(8,8,8,0.7) 0%, rgba(8,8,8,0.62) 94%, rgba(8,8,8,0) 100%)'
              : 'linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.48) 92%, rgba(8,8,8,0) 100%)',
          }}
        >
          <ul className="space-y-1.5 text-left">
            {shownBullets.map((line, i) => (
              <li key={i} className="flex items-start gap-2" style={{ fontSize: '13px', color: BULLET_COLOR }}>
                <DynamicIcon name="check" className="mt-0.5 h-3.5 w-3.5 shrink-0" style={{ color: tier.accent }} />
                <span className="leading-snug">{line}</span>
              </li>
            ))}
          </ul>
          {hiddenCount > 0 && (
            <button
              type="button"
              onClick={() => setExpanded((e) => !e)}
              className="mt-2.5 flex items-center gap-1 hover:opacity-80"
              style={{ fontSize: '13px', color: tier.accent }}
            >
              {expanded ? t('modelPage.lessBullets') : t('modelPage.moreBullets')(hiddenCount)}
              <DynamicIcon name={expanded ? 'chevron-up' : 'chevron-down'} className="h-3.5 w-3.5" />
            </button>
          )}
        </div>
      )}

      {/* Freiraum, damit das Straßenbild zur Geltung kommt. */}
      <div className="relative z-10 flex-1" />

      {/* Preis-Sektion mit dunklem Verlauf (Referenz): "ab ca." + Preis + CTA. */}
      <div
        className="relative z-10"
        style={{
          padding: '20px 20px 28px',
          background: 'linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,0.85) 45%, rgba(8,8,8,0.95) 100%)',
        }}
      >
        <div className="text-center">
          <div style={{ fontSize: '13px', color: LABEL_COLOR }}>{t('modelPage.totalPrice')}</div>
          <div
            style={{
              marginTop: '4px',
              fontFamily: "'Barlow Condensed', sans-serif",
              fontSize: '30px',
              fontWeight: 600,
              letterSpacing: '1px',
              color: PRICE_COLOR,
            }}
          >
            {formatPrice(pkg.total_price)}
          </div>
          <Link
            to={contactUrl(pkg)}
            className="mt-4 inline-block rounded-md bg-brand-500 px-4 py-2 text-center text-sm font-semibold text-white shadow-lg shadow-brand-500/30 hover:bg-brand-400"
          >
            {t('modelPage.requestContact')}
          </Link>
        </div>
      </div>
    </div>
  );
}

export default function ModelPage() {
  const { brandSlug, modelSlug } = useParams();
  const [data, setData] = useState(null);
  const [error, setError] = useState('');
  const maintenance = useMaintenance();
  const { t, language } = useLanguage();
  const { package_card_theme: packageCardTheme, package_card_layout: packageCardLayout } = useSiteSettings();
  const TIERS = PACKAGE_THEMES[packageCardTheme] || PACKAGE_THEMES.graphite;
  const isStripLayout = packageCardLayout !== 'grid';
  const formatPrice = (value) =>
    new Intl.NumberFormat(language === 'de' ? 'de-DE' : 'en-US', { style: 'currency', currency: 'EUR' }).format(value);

  useEffect(() => {
    if (maintenance.vehicles.enabled && !maintenance.bypass) return;
    api
      .get(`/models/${brandSlug}/${modelSlug}/packages`)
      .then(setData)
      .catch((e) => setError(e.message));
  }, [brandSlug, modelSlug, maintenance.vehicles.enabled, maintenance.bypass]);

  usePageMeta({
    title: data ? t('modelPage.metaTitle')(data.model.brand_name, data.model.name) : t('modelPage.metaTitleFallback'),
    description: data ? t('modelPage.metaDescription')(data.model.brand_name, data.model.name) : undefined,
    path: `/fahrzeuge/${brandSlug}/${modelSlug}`,
  });

  if (maintenance.vehicles.enabled && !maintenance.bypass) {
    return <MaintenanceNotice message={maintenance.vehicles.message} />;
  }

  if (error) {
    return <p className="mx-auto max-w-6xl px-4 py-12 text-red-600 sm:px-6">{error}</p>;
  }

  if (!data) {
    return <p className="mx-auto max-w-6xl px-4 py-12 text-neutral-500 sm:px-6">{t('modelPage.loading')}</p>;
  }

  const { model, packages } = data;

  // Preis-Rang innerhalb dieses Modells waehlt die Referenz-Stufe: die guenstigste Option
  // bekommt die erste Kachel (Base), die teuerste die letzte (Limitless), der Rest wird
  // gleichmaessig auf die dazwischenliegenden Stufen verteilt. Da jede Stufe ihr eigenes
  // Straßenbild hat (und Bilder sich nicht mischen lassen), wird die naechstgelegene Stufe
  // gewaehlt statt zwischen zwei Stufen zu interpolieren - so passen Bild und Farbe immer
  // exakt zur Referenz, egal ob ein Modell 2, 8 oder 12 Pakete hat.
  const rankById = new Map(
    [...packages].sort((a, b) => a.total_price - b.total_price).map((p, i) => [p.id, i])
  );
  const tierOf = (pkg) => {
    const n = packages.length;
    const rank = rankById.get(pkg.id) ?? 0;
    const tierT = n <= 1 ? 0 : rank / (n - 1);
    const idx = Math.round(tierT * (TIERS.length - 1));
    return { tier: TIERS[idx], tierT };
  };

  // Stichpunkte einer Kachel = die Produkte des Pakets plus die Freitext-Zeilen der
  // Beschreibung (je Zeile ein Punkt). Das ist der einzige Zusatz zum Referenzdesign.
  const bulletsOf = (pkg) => [
    ...pkg.products.map((p) => p.name_override || p.scraped_name || t('modelPage.productLoading')),
    ...(pkg.description || '')
      .split('\n')
      .map((line) => line.trim())
      .filter(Boolean),
  ];

  const contactUrl = (pkg) => {
    const params = new URLSearchParams({
      brand: model.brand_name,
      model: model.name,
      package: pkg.name,
      packageId: pkg.id,
      total: pkg.total_price,
    });
    return `/kontakt?${params.toString()}`;
  };

  return (
    <>
      <div className="mx-auto max-w-6xl px-4 pt-12 sm:px-6">
        {maintenance.vehicles.enabled && maintenance.bypass && <MaintenanceBypassBanner inline />}
        <p className="mb-1 text-sm text-neutral-500 dark:text-neutral-400">
          <Link to="/fahrzeuge" className="hover:text-brand-500">{t('modelPage.breadcrumbVehicles')}</Link> /{' '}
          <Link to={`/fahrzeuge/${brandSlug}`} className="hover:text-brand-500">{model.brand_name}</Link> / {model.name}
        </p>
        <h1 className={`text-2xl font-bold text-neutral-900 dark:text-white sm:text-3xl ${packages.length ? 'mb-2' : 'mb-8'}`}>
          {model.brand_name} {model.name} – {t('modelPage.titleSuffix')}
        </h1>

        {packages.length === 0 && (
          <p className="pb-12 text-neutral-500 dark:text-neutral-400">{t('modelPage.empty')}</p>
        )}
      </div>

      {packages.length > 0 && (
        // Die Sektion folgt dem hellen/dunklen Seiten-Theme - nur die Kacheln selbst
        // bleiben dunkel (Referenzdesign), wodurch sie auf heller Flaeche als eigenstaendige
        // "Karten" wirken. Der Scrollbalken-Stil unten passt sich per dark: mit an.
        <section className="py-10 sm:py-14" style={{ fontFamily: "'Barlow', sans-serif" }}>
          <div className={isStripLayout ? 'mx-auto max-w-[1880px] px-4 sm:px-6' : 'mx-auto max-w-6xl px-4 sm:px-6'}>
            <div
              className={
                isStripLayout
                  ? // items-start statt items-stretch: klappt jemand eine Kachel auf, waechst
                    // nur DIESE in die Hoehe - die Nachbarn behalten ihre Referenzhoehe.
                    'flex items-start gap-[18px] overflow-x-auto pb-3 snap-x snap-mandatory [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.3)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.25)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/30 dark:[&::-webkit-scrollbar-thumb]:bg-white/25'
                  : 'grid items-start gap-[18px] sm:grid-cols-2 xl:grid-cols-3'
              }
            >
              {packages.map((pkg) => {
                const { tier, tierT } = tierOf(pkg);
                return (
                  <PackageCard
                    key={pkg.id}
                    pkg={pkg}
                    tier={tier}
                    tierT={tierT}
                    isStripLayout={isStripLayout}
                    bullets={bulletsOf(pkg)}
                    formatPrice={formatPrice}
                    contactUrl={contactUrl}
                    t={t}
                  />
                );
              })}
            </div>
          </div>
        </section>
      )}
    </>
  );
}