import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import WischReihe from "@/components/WischReihe";
import { DesktopFenster, HandyRahmen, RahmenBild, type RahmenBildDaten } from "@/components/GeraeteRahmen";
import "./kundenportal.css";

/**
 * Abschnitt Kundenportal (Spezifikation 7.2).
 * Ab 900 px: festgepinnte Bühne mit Funktionsliste links und Desktop-Fenster plus Handy-Rahmen rechts.
 * Darunter (unter 900 px): keine Bühne, sondern eine Wisch-Reihe mit je einem Handy-Screenshot.
 * Danach die Schrittzeile (ersetzt "So arbeiten wir").
 */

const EINLEITUNG =
  "Sie sehen, was wir zuletzt erledigt haben, öffnen die Live-Vorschau Ihrer Website und schreiben uns im Chat – mit Fotos, Dateien oder Sprachnachricht. Ihre Rechnungen liegen ebenfalls dort, und aufs Handy installieren Sie das Portal wie eine App.";

// ── Bilder (erzeugt von scripts/relaunch-bilder.py nach public/relaunch/portal/) ──────────────────────────

const BILDER = "/relaunch/portal";
const DESKTOP_BREITEN = [800, 1200, 1600];
const HANDY_BREITEN = [390, 780];

const srcSet = (name: string, breiten: number[]) =>
  breiten.map((b) => `${BILDER}/${name}-${b}.webp ${b}w`).join(", ");

/** Desktop-Bild: Rohformat 3024 x 1786 (MacBook-Safari-Fläche 1512 x 893 @2x), ausgeliefert in 800 / 1200 / 1600 px. */
const desktopBild = (name: string, alt: string): RahmenBildDaten => ({
  src: `${BILDER}/${name}-1200.webp`,
  srcSet: srcSet(name, DESKTOP_BREITEN),
  sizes: "(min-width: 1200px) 692px, 50vw",
  width: 1600,
  height: 945,
  alt,
});

/** Handy-Bild: Rohformat 804 x 1748 = iPhone 16 Pro @2x (das lange Bild 804 x 5131), ausgeliefert in 390 / 780 px;
 * width/height geben das Seitenverhältnis bei 780 px an. */
const handyBild = (name: string, alt: string, sizes: string, hoehe = 1696): RahmenBildDaten => ({
  src: `${BILDER}/${name}-780.webp`,
  srcSet: srcSet(name, HANDY_BREITEN),
  sizes,
  width: 780,
  height: hoehe,
  alt,
});

type Funktion = {
  id: string;
  titel: string;
  unterschrift: string;
  /** Desktop-Bild; Schritt 6 hat keines, dort blendet das Fenster aus. */
  desktop?: { name: string; alt: string };
  handy: { name: string; alt: string };
  /** Der lange Screenshot, der sich im Handy-Rahmen nach oben schiebt. */
  lang?: boolean;
};

// Reihenfolge und Texte laut Spezifikation 7.2. Platzhalter des Portals ("kommt bald") werden nicht beworben,
// weitere Ansichten nur nach Freigabe des Inhabers (O9 = nein).
const FUNKTIONEN: Funktion[] = [
  {
    id: "live-vorschau",
    titel: "Live-Vorschau",
    unterschrift: "Ihre Website, noch während wir daran bauen.",
    desktop: { name: "desktop-1-projekte", alt: "Kundenportal: Projektübersicht mit Live-Vorschau der Website" },
    handy: { name: "phone-1-projekte", alt: "Kundenportal auf dem Handy: Projektübersicht mit Live-Vorschau der Website" },
  },
  {
    id: "fortschritt",
    titel: "Fortschritt",
    unterschrift: "Was wir zuletzt erledigt haben – in einfachen Sätzen.",
    desktop: {
      name: "desktop-2-fortschritt",
      alt: "Kundenportal: zuletzt erledigte Arbeiten am Auftrag, in einfachen Sätzen beschrieben",
    },
    handy: {
      name: "phone-3-projektdetails",
      alt: "Kundenportal auf dem Handy: Projektdetails mit den letzten Änderungen",
    },
  },
  {
    id: "chat",
    titel: "Chat",
    unterschrift: "Frage, Foto oder Sprachnachricht direkt ans Team.",
    desktop: { name: "desktop-3b-chat-foto", alt: "Kundenportal: Chat mit dem Team, im Verlauf ein Foto" },
    handy: { name: "phone-4b-chat-foto", alt: "Kundenportal auf dem Handy: Chat mit Foto" },
  },
  {
    id: "rechnungen",
    titel: "Rechnungen",
    unterschrift: "Ansehen, bezahlen, herunterladen.",
    desktop: { name: "desktop-4-rechnungen", alt: "Kundenportal: Rechnungen mit Betrag und Status" },
    handy: { name: "phone-5-rechnungen", alt: "Kundenportal auf dem Handy: Rechnungen zum Ansehen, Bezahlen und Herunterladen" },
  },
  {
    id: "funktionen",
    titel: "Funktionen",
    unterschrift: "Bausteine zum Dazubuchen, zum Beispiel eine News-Pinnwand für Ihre Website.",
    desktop: {
      name: "desktop-7-news-pinnwand",
      alt: "Kundenportal: News-Pinnwand mit Vorschau, wie die Meldung auf der Website aussieht",
    },
    handy: {
      name: "phone-8-news-vorschau",
      alt: "Kundenportal auf dem Handy: Vorschau der News-Pinnwand für die Website",
    },
  },
  {
    id: "als-app",
    titel: "Als App",
    unterschrift: "Aufs Handy installieren, fertig.",
    handy: {
      name: "phone-2-projekte-lang",
      alt: "Kundenportal als App auf dem Handy: lange Projektseite mit Vorschau, Status und letzten Änderungen",
    },
    lang: true,
  },
];

const LETZTER = FUNKTIONEN.length - 1;

const SCHRITTE = [
  { nr: 1, text: "Kennenlernen" },
  { nr: 2, text: "Angebot mit Preis" },
  { nr: 3, text: "Bauen mit Vorschau und Ihrer Freigabe" },
  { nr: 4, text: "Online – Hosting und Pflege auf Wunsch im Abo" },
];

// ── Hilfsfunktionen ───────────────────────────────────────────────────────────

/** Medienabfrage als Wert. Ohne matchMedia (SSR) gilt `standard`. */
const useMedia = (abfrage: string, standard = false) =>
  useSyncExternalStore(
    (melden) => {
      if (typeof window === "undefined" || !window.matchMedia) return () => {};
      const mq = window.matchMedia(abfrage);
      mq.addEventListener?.("change", melden);
      return () => mq.removeEventListener?.("change", melden);
    },
    () => (typeof window !== "undefined" && window.matchMedia ? window.matchMedia(abfrage).matches : standard),
    () => standard,
  );

const begrenze = (wert: number, min: number, max: number) => Math.min(max, Math.max(min, wert));

// ── Desktop: festgepinnte Bühne ─────────────────────────────────────────────

/**
 * Die Hülle ist hoch (Scrollstrecke), darin klebt die Bühne (position: sticky).
 * Hinter der Bühne liegt eine unsichtbare Spur aus Markern, eine Marke je Funktion. Der IntersectionObserver
 * meldet, welche Marke gerade die Bildschirmmitte kreuzt: das ist die aktive Funktion, das Bild blendet über.
 * Beim letzten Schritt wird der Scrollfortschritt als CSS-Variable --kp-q (0 bis 1) an die Bühne geschrieben,
 * und das CSS schiebt den langen Screenshot per translateY nach oben (nur transform).
 */
const Buehne = () => {
  const [aktiv, setAktiv] = useState(0);
  // Bilder werden erst eingehängt, wenn ihr Schritt (oder der davor) erreicht ist: spart Daten beim ersten Erreichen
  const [hoechster, setHoechster] = useState(0);
  const huelle = useRef<HTMLDivElement>(null);
  const buehne = useRef<HTMLDivElement>(null);
  const marker = useRef<(HTMLDivElement | null)[]>([]);

  useEffect(() => {
    if (typeof IntersectionObserver === "undefined") return;
    const beobachter = new IntersectionObserver(
      (eintraege) => {
        for (const e of eintraege) {
          if (!e.isIntersecting) continue;
          const i = Number((e.target as HTMLElement).dataset.index);
          setAktiv(i);
          setHoechster((h) => Math.max(h, i));
        }
      },
      // Messlinie in der Bildschirmmitte: die Marke, die sie kreuzt, ist die aktive
      { rootMargin: "-50% 0px -50% 0px", threshold: 0 },
    );
    marker.current.forEach((m) => m && beobachter.observe(m));
    return () => beobachter.disconnect();
  }, []);

  // Scrollfortschritt des letzten Schritts (0 bis 1) für den langen Screenshot
  useEffect(() => {
    const el = buehne.current;
    const huellenEl = huelle.current;
    const letzterMarker = marker.current[LETZTER];
    if (!el || !huellenEl || !letzterMarker || !window.matchMedia) return;
    const ruhig = window.matchMedia("(prefers-reduced-motion: no-preference)");
    let raf = 0;

    const berechne = () => {
      raf = 0;
      if (!ruhig.matches) {
        el.style.setProperty("--kp-q", "0");
        return;
      }
      const vh = window.innerHeight;
      const huelleBox = huellenEl.getBoundingClientRect();
      if (huelleBox.bottom < -vh || huelleBox.top > 2 * vh) return;
      const oben = parseFloat(getComputedStyle(el).top) || 0;
      const gescrollt = oben - huelleBox.top; // Strecke seit dem Anheften
      const strecke = huelleBox.height - el.offsetHeight; // gesamte Pin-Strecke
      const seitSchritt6 = vh / 2 - letzterMarker.getBoundingClientRect().top;
      const laenge = strecke - (gescrollt - seitSchritt6); // Länge des letzten Schritts
      const vorlauf = 0.12 * vh; // erst bewegt sich der Rahmen, dann der Inhalt
      const halten = 0.2 * vh; // am Ende bleibt der lange Screenshot kurz stehen
      const q = begrenze((seitSchritt6 - vorlauf) / Math.max(1, laenge - vorlauf - halten), 0, 1);
      el.style.setProperty("--kp-q", q.toFixed(4));
    };
    const planen = () => {
      if (!raf) raf = requestAnimationFrame(berechne);
    };

    window.addEventListener("scroll", planen, { passive: true });
    window.addEventListener("resize", planen);
    ruhig.addEventListener?.("change", planen);
    berechne();
    return () => {
      window.removeEventListener("scroll", planen);
      window.removeEventListener("resize", planen);
      ruhig.removeEventListener?.("change", planen);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  /** Klick in der Liste: zur Marke dieser Funktion scrollen (weich oder sofort entscheidet das CSS der Seite). */
  const springe = (i: number) => {
    const huellenEl = huelle.current;
    const buehnenEl = buehne.current;
    const m = marker.current[i];
    if (!huellenEl || !buehnenEl || !m) return;
    const oben = parseFloat(getComputedStyle(buehnenEl).top) || 0;
    const huelleOben = huellenEl.getBoundingClientRect().top;
    // Marke knapp über die Messlinie legen, mindestens aber so weit scrollen, dass die Bühne angeheftet ist
    const zurMarke = huelleOben + m.offsetTop - (window.innerHeight / 2 - 1);
    const zurBuehne = huelleOben - oben;
    window.scrollTo({ top: window.scrollY + Math.max(zurMarke, zurBuehne) });
  };

  const app = aktiv === LETZTER;
  const eingehaengt = (i: number) => i <= hoechster + 1;

  return (
    <div className="kp-huelle" ref={huelle}>
      <div className="kp-spur" aria-hidden="true">
        {FUNKTIONEN.map((f, i) => (
          <div key={f.id} className="kp-marker" data-index={i} ref={(el) => (marker.current[i] = el)} />
        ))}
      </div>

      <div className="kp-buehne" ref={buehne} data-app={app ? "ja" : "nein"}>
        <div className="wk-container kp-buehne__innen">
          <ol className="kp-liste" aria-label="Funktionen des Kundenportals">
            {FUNKTIONEN.map((f, i) => (
              <li key={f.id}>
                <button
                  type="button"
                  className="kp-eintrag"
                  aria-current={i === aktiv ? "step" : undefined}
                  onClick={() => springe(i)}
                >
                  <span className="kp-eintrag__punkt" aria-hidden="true" />
                  <span className="kp-eintrag__titel">{f.titel}</span>
                  <span className="kp-eintrag__text">{f.unterschrift}</span>
                </button>
              </li>
            ))}
          </ol>

          <div className="kp-geraete">
            <DesktopFenster className="kp-fenster">
              <div className="kp-ebenen" aria-hidden={app || undefined}>
                {FUNKTIONEN.map((f, i) =>
                  f.desktop && eingehaengt(i) ? (
                    <div
                      key={f.id}
                      className={`kp-lage${i === aktiv ? " is-aktiv" : ""}`}
                      aria-hidden={i !== aktiv || undefined}
                    >
                      <RahmenBild bild={desktopBild(f.desktop.name, f.desktop.alt)} />
                    </div>
                  ) : null,
                )}
              </div>
            </DesktopFenster>

            <HandyRahmen className="kp-handy">
              {FUNKTIONEN.map((f, i) =>
                eingehaengt(i) ? (
                  <div
                    key={f.id}
                    className={`kp-lage${i === aktiv ? " is-aktiv" : ""}`}
                    aria-hidden={i !== aktiv || undefined}
                  >
                    {f.lang ? (
                      <div className="kp-lang">
                        <RahmenBild bild={handyBild(f.handy.name, f.handy.alt, "(min-width: 1200px) 340px, 30vw", 4978)} />
                      </div>
                    ) : (
                      <RahmenBild bild={handyBild(f.handy.name, f.handy.alt, "(min-width: 1200px) 230px, 20vw")} />
                    )}
                  </div>
                ) : null,
              )}
            </HandyRahmen>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Handy: Wisch-Reihe ───────────────────────────────────────────────────────

/** Karte "Als App": der lange Screenshot schiebt sich langsam nach oben, solange die Karte sichtbar ist. */
const LangeKarte = ({ f }: { f: Funktion }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [sichtbar, setSichtbar] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el || typeof IntersectionObserver === "undefined") return;
    const beobachter = new IntersectionObserver(([e]) => setSichtbar(e.isIntersecting), { threshold: 0.6 });
    beobachter.observe(el);
    return () => beobachter.disconnect();
  }, []);

  return (
    <div className="kp-karte" ref={ref} data-sichtbar={sichtbar ? "ja" : "nein"}>
      <HandyRahmen className="kp-karte__handy">
        <div className="kp-lang">
          <RahmenBild bild={handyBild(f.handy.name, f.handy.alt, "250px", 4978)} />
        </div>
      </HandyRahmen>
      <h3 className="wk-h3 kp-karte__titel">{f.titel}</h3>
      <p className="wk-muted kp-karte__text">{f.unterschrift}</p>
    </div>
  );
};

const HandyReihe = () => (
  <div className="kp-reihe">
    <WischReihe ariaLabel="Sechs Funktionen des Kundenportals, seitlich wischen">
      {FUNKTIONEN.map((f) =>
        f.lang ? (
          <LangeKarte key={f.id} f={f} />
        ) : (
          <div key={f.id} className="kp-karte">
            <HandyRahmen className="kp-karte__handy" bild={handyBild(f.handy.name, f.handy.alt, "250px")} />
            <h3 className="wk-h3 kp-karte__titel">{f.titel}</h3>
            <p className="wk-muted kp-karte__text">{f.unterschrift}</p>
          </div>
        ),
      )}
    </WischReihe>
  </div>
);

// ── Schrittzeile ──────────────────────────────────────────────────────────────

const Schrittzeile = ({ desktop }: { desktop: boolean }) =>
  desktop ? (
    <div className="wk-container">
      <ol className="kp-schritte wk-reveal" aria-label="Ablauf in vier Schritten">
        {SCHRITTE.map((s) => (
          <li key={s.nr} className="kp-schritt">
            <span className="kp-schritt__nr wk-num">{s.nr}</span>
            <span className="kp-schritt__text">{s.text}</span>
          </li>
        ))}
      </ol>
    </div>
  ) : (
    <div className="kp-schritte-handy">
      <WischReihe ariaLabel="Ablauf in vier Schritten, seitlich wischen" className="kp-schritte-reihe">
        {SCHRITTE.map((s) => (
          <div key={s.nr} className="kp-schritt-karte">
            <span className="kp-schritt__nr wk-num">{s.nr}</span>
            <span className="kp-schritt__text">{s.text}</span>
          </div>
        ))}
      </WischReihe>
    </div>
  );

// ── Abschnitt ─────────────────────────────────────────────────────────────────

const Kundenportal = () => {
  const desktop = useMedia("(min-width: 900px)");

  return (
    <section id="kundenportal" className="wk-section wk-section--alt kp" aria-labelledby="kundenportal-titel">
      <div className="wk-container kp__kopf wk-reveal">
        <h2 id="kundenportal-titel" className="wk-h2">
          {/* zwei Sätze, zwei Zeilen: der Umbruch soll nach "Projekt." fallen, nicht mitten im zweiten Satz */}
          <span className="kp-satz">Ihr Projekt.</span> <span className="kp-satz">Live im Kundenportal.</span>
        </h2>
        <p className="wk-lead">{EINLEITUNG}</p>
      </div>

      {desktop ? <Buehne /> : <HandyReihe />}
      <Schrittzeile desktop={desktop} />
    </section>
  );
};

export default Kundenportal;