'use client';

// Die mystische Joker-Tarot-Karte (Vorderseite). Wird sowohl als Peek-Karte
// am Ende des Swipe-Stapels als auch als Front im Joker-Reveal-Flipper genutzt.
// Reine Optik, keine Interaktion - die Steuerung uebernimmt der jeweilige Aufrufer.

function CrownIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true">
      <path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm14 3a1 1 0 01-1 1H6a1 1 0 01-1-1v-1h14v1z" />
    </svg>
  );
}

function HeartIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </svg>
  );
}

function MoonIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
    </svg>
  );
}

export function JokerCard({ compact = false }: { compact?: boolean }) {
  return (
    <div className="w-full h-full p-1 rounded-3xl bg-gradient-to-br from-yellow-200 via-amber-500 to-amber-700 shadow-2xl">
      <div className="w-full h-full bg-[#11121c] rounded-[22px] border border-amber-400/50 p-4 flex flex-col justify-between items-center relative overflow-hidden">
        {/* Verzierungs-Linien */}
        <div className="absolute inset-2 border border-amber-500/25 rounded-2xl pointer-events-none" />
        <div className="absolute inset-3.5 border border-dashed border-amber-400/20 rounded-xl pointer-events-none" />

        {/* Ecken-Filigran */}
        <span className="absolute top-3 left-3 text-[10px] text-amber-400/70">✦</span>
        <span className="absolute top-3 right-3 text-[10px] text-amber-400/70">✦</span>
        <span className="absolute bottom-3 left-3 text-[10px] text-amber-400/70">✦</span>
        <span className="absolute bottom-3 right-3 text-[10px] text-amber-400/70">✦</span>

        {/* Header: Mond/Sonne + Arcanum */}
        <div className="flex items-center justify-between w-full px-1 z-10">
          <MoonIcon className="w-3.5 h-3.5 text-amber-400/80" />
          <span className="text-[9px] font-black tracking-widest text-amber-300 uppercase">
            Fatum · Oraculum
          </span>
          <span className="text-[11px] text-amber-400/80">☀</span>
        </div>

        {/* Zentrales Emblem */}
        <div className="flex flex-col items-center justify-center space-y-2 z-10 my-auto">
          <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-amber-300 via-amber-500 to-amber-700 p-0.5 shadow-xl flex items-center justify-center">
            <div className="w-full h-full bg-[#151724] rounded-[22px] flex flex-col items-center justify-center relative overflow-hidden border border-amber-400/40">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(245,158,11,0.25)_0%,transparent_70%)] pointer-events-none" />
              <CrownIcon className="w-4 h-4 text-amber-300 mb-1" />
              <HeartIcon className="w-8 h-8 text-amber-400 drop-shadow-[0_0_12px_rgba(245,158,11,0.9)]" />
            </div>
          </div>

          <div className="text-center pt-1">
            <h2 className={`${compact ? 'text-sm' : 'text-lg'} font-black tracking-widest text-white uppercase`}>
              Yumder
            </h2>
            <div className="flex items-center justify-center gap-1.5 mt-0.5">
              <span className="h-px w-3 bg-amber-400/50" />
              <p className="text-[10px] font-black tracking-widest text-amber-300 uppercase">Joker</p>
              <span className="h-px w-3 bg-amber-400/50" />
            </div>
          </div>
        </div>

        {/* Fuss-Rune */}
        <div className="z-10 text-center w-full">
          <span className="text-[8px] font-black tracking-widest text-amber-400/60 uppercase">
            ✦ Arcanum VIII ✦
          </span>
        </div>
      </div>
    </div>
  );
}