import Image from "next/image";
import { ScrollReveal } from "@/components/ScrollReveal";

export type QuickReviewItem = { name: string; rating: number };
export type TestimonialItem = {
  authorName: string;
  // Echter Name, optional — steht vor dem authorName in Anführungszeichen
  // (z. B. Max „Zoneks"), etwa bei Cosplay-Handles statt Klarnamen.
  realName: string;
  quote: string;
  context: string;
  imagePath: string;
  source: "manual" | "google";
  rating: number;
};

// Unter dieser Anzahl wirkt das Verdoppeln für den Fließband-Loop nicht mehr
// wie ein nahtloser Strom, sondern wie derselbe Eintrag zweimal hintereinander
// — sieht dann eher nach Bug als nach Deko aus. Erst ab genug Einträgen lohnt
// sich die Lauf-Animation, darunter reicht eine einfache, statische Reihe.
const MIN_ITEMS_FOR_MARQUEE = 5;

// Baut die Fließband-Spur: der Loop funktioniert über eine verdoppelte Spur,
// die per CSS um exakt -50% verschoben wird (siehe .rk-marquee-track in
// globals.css) — das ist nur nahtlos, wenn schon die EINFACHE (noch
// unverdoppelte) Spur mindestens so breit ist wie der sichtbarste Bereich
// (auch auf sehr breiten Monitoren). Bei wenigen Einträgen wiederholt sich
// die Ausgangsliste sonst nicht oft genug, die verdoppelte Spur bleibt
// schmaler als der Bildschirm, und während der Animation entstehen kurz
// sichtbare Lücken (einfach leerer Hintergrund statt durchgehender Karten).
// `minUnitItems` ist pro Widget so gewählt, dass die einfache Spur selbst
// auf einem sehr breiten Monitor komfortabel die volle Breite füllt.
// Gibt den Wiederholungsfaktor mit zurück, nicht nur die fertige Spur — die
// CSS-Animation läuft über eine feste DAUER (nicht Geschwindigkeit in px/s),
// eine breitere Spur (mehr Wiederholungen) legt in derselben Zeit also mehr
// Strecke zurück und wirkt dadurch schneller. Die Aufrufer skalieren die
// Animationsdauer mit diesem Faktor, damit das Tempo unabhängig von der
// tatsächlichen Eintragsanzahl gleich bleibt.
function buildSeamlessTrack<T>(items: T[], minUnitItems: number): { track: T[]; repeatCount: number } {
  const repeatCount = Math.max(1, Math.ceil(minUnitItems / items.length));
  const unit = Array.from({ length: repeatCount }, () => items).flat();
  return { track: [...unit, ...unit], repeatCount };
}

function TestimonialCard({ item }: { item: TestimonialItem }) {
  const isGoogle = item.source === "google";
  // Bei Handles (Cosplay-Namen etc.) steht der echte Name davor, das Handle
  // selbst bleibt in Anführungszeichen erkennbar — z. B. Max „Zoneks".
  const displayName = item.realName ? `${item.realName} „${item.authorName}"` : item.authorName;

  return (
    <div className="relative w-[20rem] shrink-0 border border-white/10 rounded-xl pt-10 pb-6 px-6 bg-[var(--rk-bg)]">
      {/* Profilbild ragt zur Hälfte über den oberen Kartenrand hinaus */}
      <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
        {isGoogle ? (
          <div
            className="w-16 h-16 rounded-full border-2 border-[var(--rk-bg)] ring-1 ring-white/15 bg-white/5 flex items-center justify-center text-lg"
            style={{ color: "#f5c518" }}
          >
            {item.authorName[0]?.toUpperCase()}
          </div>
        ) : item.imagePath ? (
          <Image
            src={item.imagePath}
            alt=""
            width={64}
            height={64}
            className="w-16 h-16 rounded-full object-cover border-2 border-[var(--rk-bg)] ring-1 ring-white/15"
          />
        ) : (
          <div className="w-16 h-16 rounded-full border-2 border-[var(--rk-bg)] ring-1 ring-white/15 bg-white/5 flex items-center justify-center text-lg text-[var(--rk-ink-muted)]">
            {item.authorName[0]?.toUpperCase()}
          </div>
        )}
      </div>

      <div className="text-center">
        <p className="flex flex-wrap items-center justify-center gap-x-2 text-xs uppercase tracking-[0.1em]">
          <span>{displayName}</span>
          {item.rating > 0 && (
            <span style={{ color: "#f5c518" }}>
              {"★".repeat(item.rating)}
              <span className="text-[var(--rk-ink-muted)]">{"★".repeat(5 - item.rating)}</span>
            </span>
          )}
        </p>
        {(item.context || isGoogle) && (
          <p className="mt-1 text-[0.65rem] text-[var(--rk-ink-muted)]">
            {item.context}
            {item.context && isGoogle && " · "}
            {isGoogle && "Google"}
          </p>
        )}
      </div>

      <p className="mt-4 text-sm leading-relaxed text-[var(--rk-ink-muted)] line-clamp-4 text-center">„{item.quote}"</p>
    </div>
  );
}

function QuickReviewCard({ item }: { item: QuickReviewItem }) {
  return (
    <div className="flex items-center gap-3 shrink-0 border border-white/10 rounded-full pl-3 pr-4 py-2 bg-[var(--rk-bg)]">
      <span className="text-sm" style={{ color: "#f5c518" }}>
        {"★".repeat(item.rating)}
        <span className="text-[var(--rk-ink-muted)]">{"★".repeat(5 - item.rating)}</span>
      </span>
      <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">{item.name}</span>
    </div>
  );
}

// Extrahiert aus der Startseite, damit dieselbe Fließband-/Kartenlogik auch
// auf anderen Seiten (z. B. /angebote, Convention-Landingpages) eingebettet
// werden kann, ohne Code zu duplizieren — Verhalten/Optik bleiben exakt wie
// vorher, nur eyebrow/title kommen jetzt als Props statt aus dem festen
// "home"-Übersetzungs-Namespace.
export function QuickReviewsMarquee({ items }: { items: QuickReviewItem[] }) {
  if (items.length === 0) return null;

  if (items.length < MIN_ITEMS_FOR_MARQUEE) {
    return (
      <section className="pt-[5rem] pb-[1.25rem]">
        <div className="flex flex-wrap justify-center gap-3 px-6">
          {items.map((item, i) => (
            <QuickReviewCard key={`${item.name}-${i}`} item={item} />
          ))}
        </div>
      </section>
    );
  }

  const { track, repeatCount } = buildSeamlessTrack(items, 20);

  return (
    <section className="pt-[5rem] pb-[1.25rem]">
      <div
        className="overflow-hidden"
        style={{ maskImage: "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)" }}
      >
        <div
          className="rk-marquee-track flex gap-3 w-max"
          style={{ animationDuration: `${45 * repeatCount}s` }}
        >
          {track.map((item, i) => (
            <QuickReviewCard key={`${item.name}-${i}`} item={item} />
          ))}
        </div>
      </div>
    </section>
  );
}

export function TestimonialsMarquee({
  items,
  eyebrow,
  title,
}: {
  items: TestimonialItem[];
  eyebrow: string;
  title: string;
}) {
  if (items.length === 0) return null;

  if (items.length < MIN_ITEMS_FOR_MARQUEE) {
    return (
      <section className="py-[7.5rem]">
        <ScrollReveal className="max-w-2xl mx-auto px-6 text-center">
          <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">{eyebrow}</p>
          <h2 className="rk-wordmark mt-4 text-xl sm:text-3xl">{title}</h2>
        </ScrollReveal>
        <div className="mt-14 pt-8 flex flex-wrap justify-center gap-4 px-6">
          {items.map((item, i) => (
            <TestimonialCard key={`${item.authorName}-${i}`} item={item} />
          ))}
        </div>
      </section>
    );
  }

  const { track, repeatCount } = buildSeamlessTrack(items, 12);

  return (
    <section className="py-[7.5rem]">
      <ScrollReveal className="max-w-2xl mx-auto px-6 text-center">
        <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">{eyebrow}</p>
        <h2 className="rk-wordmark mt-4 text-xl sm:text-3xl">{title}</h2>
      </ScrollReveal>

      <div
        className="mt-14 pt-8 overflow-hidden"
        style={{ maskImage: "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)" }}
      >
        <div
          className="rk-marquee-track flex gap-4 w-max"
          style={{ animationDuration: `${50 * repeatCount}s` }}
        >
          {track.map((item, i) => (
            <TestimonialCard key={`${item.authorName}-${i}`} item={item} />
          ))}
        </div>
      </div>
    </section>
  );
}

// Kompaktes, einbettbares Widget für Seiten außerhalb der Startseite (z. B.
// /angebote, Convention-Landingpages) — fasst Testimonials und
// Kurzbewertungen zu EINEM Durchschnitt/EINER Zahl zusammen, statt beide
// Systeme dort erneut getrennt aufzuführen. Zeigt absichtlich keine
// einzelnen Zitate (die bleiben der Startseite vorbehalten), nur die
// verdichtete Vertrauens-Kennzahl.
export function CombinedReviewsBadge({
  testimonials,
  quickReviews,
  label,
  countLabel,
}: {
  testimonials: { rating: number }[];
  quickReviews: { rating: number }[];
  label: string;
  countLabel: string;
}) {
  const allRatings = [...testimonials.map((t) => t.rating), ...quickReviews.map((q) => q.rating)].filter((r) => r > 0);
  if (allRatings.length === 0) return null;

  const avg = allRatings.reduce((a, b) => a + b, 0) / allRatings.length;
  const rounded = Math.round(avg * 10) / 10;

  return (
    <div className="inline-flex items-center gap-3 border border-white/10 rounded-full pl-4 pr-5 py-2.5 bg-[var(--rk-surface)]">
      <span className="text-base" style={{ color: "#f5c518" }}>
        {"★".repeat(Math.round(avg))}
        <span className="text-[var(--rk-ink-muted)]">{"★".repeat(5 - Math.round(avg))}</span>
      </span>
      <span className="text-sm text-[var(--rk-ink)]">
        {rounded.toLocaleString("de-DE")} <span className="text-[var(--rk-ink-muted)]">· {label}</span>
      </span>
      <span className="text-xs text-[var(--rk-ink-muted)]">
        ({allRatings.length} {countLabel})
      </span>
    </div>
  );
}