"use client";

import { useTranslation } from '@/lib/i18n/context';

// Vollstaendig ueberarbeitete Spielregeln-Erklaerung: echte SVG-Icons 1:1 aus
// components/kokonutui/swipe-card-stack.tsx uebernommen (identische Formen +
// Farben wie die echten Buttons im Stack), damit das Tutorial optisch exakt
// zeigt, was man in der App sieht.
//
// i18n-Schritt 8: Alle sichtbaren Texte jetzt uebersetzt. Die vier Aktions-
// Titel (Zuruecknehmen/Nein/Veto/Ja) werden bewusst aus t.swipeCard.* wieder-
// verwendet statt in t.tutorial.* dupliziert zu werden - identische Woerter
// wie auf den echten Buttons, nur EINE Stelle zum Pflegen.
function UndoIcon({ className = 'w-5 h-5' }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
      <path
        d="M9 8L4 12l5 4M4 12h11a5 5 0 0 0 0-10h-1"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function NeinIcon({ className = 'w-6 h-6' }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
      <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
      <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
    </svg>
  );
}

function VetoShieldIcon({ className = 'w-5 h-5' }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
      <path d="m9 9 6 6" />
      <path d="m15 9-6 6" />
    </svg>
  );
}

function JaIcon({ className = 'w-6 h-6' }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
      <path
        d="M6 13l4 4 8-9"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

// Fester Icon-Kreis, analog zur Button-Optik im Swipe-Stack (dunkler
// Kreis-Hintergrund + farbiger Rahmen + farbiges Icon).
function RuleIcon({
  children,
  colorClass,
  borderClass,
}: {
  children: React.ReactNode;
  colorClass: string;
  borderClass: string;
}) {
  return (
    <div
      className={`shrink-0 w-10 h-10 rounded-full bg-neutral-900 border-2 ${borderClass} ${colorClass} flex items-center justify-center`}
    >
      {children}
    </div>
  );
}

function RuleRow({
  icon,
  title,
  description,
}: {
  icon: React.ReactNode;
  title: string;
  description: React.ReactNode;
}) {
  return (
    <li className="flex items-start gap-3">
      {icon}
      <div className="flex-1">
        <p className="text-sm font-semibold text-white leading-snug">{title}</p>
        <p className="text-xs text-neutral-400 leading-relaxed mt-0.5">{description}</p>
      </div>
    </li>
  );
}

// Kompakte Erklaerung des Yumder-Spielablaufs. Wird ausschliesslich im
// TutorialOverlay verwendet.
export function GameRulesInfo() {
  const { t } = useTranslation();
  return (
    <div className="bg-neutral-800/60 rounded-lg p-4">
      <p className="font-semibold text-yumder-pink text-sm mb-3">{t.tutorial.rulesHeading}</p>
      <ul className="space-y-3.5 list-none">
        <RuleRow
          icon={
            <RuleIcon colorClass="text-violet-400" borderClass="border-violet-400/70">
              <UndoIcon className="w-4 h-4" />
            </RuleIcon>
          }
          title={t.swipeCard.undoAriaLabel}
          description={t.tutorial.undoDescription}
        />
        <RuleRow
          icon={
            <RuleIcon colorClass="text-red-400" borderClass="border-red-400/60">
              <NeinIcon className="w-4 h-4" />
            </RuleIcon>
          }
          title={t.swipeCard.noAriaLabel}
          description={t.tutorial.noDescription}
        />
        <RuleRow
          icon={
            <RuleIcon colorClass="text-amber-500" borderClass="border-amber-500/80">
              <VetoShieldIcon className="w-4 h-4" />
            </RuleIcon>
          }
          title={t.swipeCard.vetoAriaLabel}
          description={
            <>
              {t.tutorial.vetoDescriptionPart1}{' '}
              {t.tutorial.vetoDescriptionPart2}
            </>
          }
        />
        <RuleRow
          icon={
            <RuleIcon colorClass="text-green-400" borderClass="border-green-400/80">
              <JaIcon className="w-4 h-4" />
            </RuleIcon>
          }
          title={t.swipeCard.yesAriaLabel}
          description={t.tutorial.yesDescription}
        />
        <RuleRow
          icon={
            <RuleIcon colorClass="text-neutral-300" borderClass="border-white/20">
              <span className="text-xs font-bold">i</span>
            </RuleIcon>
          }
          title={t.tutorial.detailsTitle}
          description={t.tutorial.detailsDescription}
        />
        <RuleRow
          icon={
            <RuleIcon colorClass="text-yumder-pink" borderClass="border-yumder-pink/60">
              <span className="text-xs font-bold">%</span>
            </RuleIcon>
          }
          title={t.tutorial.matchTitle}
          description={t.tutorial.matchDescription}
        />
        <RuleRow
          icon={
            <RuleIcon colorClass="text-amber-500" borderClass="border-amber-400/60">
              <span className="text-xs font-bold">J</span>
            </RuleIcon>
          }
          title={t.tutorial.jokerTitle}
          description={t.tutorial.jokerDescription}
        />
      </ul>
    </div>
  );
}