import { motion } from 'motion/react';
import { SeyarMascot } from '@/mascots/SeyarMascot';
import { BrandMark } from '@/components/BrandMark';

/** نمادهای ریاضی که آرام از پایینِ صفحه بالا می‌روند؛ فقط CSS (transform/opacity)، بی‌بارِ اضافه. */
const GLYPHS = [
  { c: 'π', x: 12, d: 0 }, { c: '+', x: 28, d: 2.6 }, { c: '√', x: 46, d: 1.2 },
  { c: '÷', x: 64, d: 3.8 }, { c: '∑', x: 80, d: 0.6 }, { c: '×', x: 90, d: 4.6 },
];

/**
 * تا وقتی نشستِ قبلی بررسی می‌شود نمایش داده می‌شود. `showContent=false` فقط پس‌زمینه است؛ App
 * محتوا را فقط وقتی روشن می‌کند که پاسخِ سرور دیر کرده باشد.
 */
export function SplashScreen({ showContent }: { showContent: boolean }) {
  if (!showContent) return <div className="h-full bg-rose" />;
  return (
    <div className="relative flex h-full flex-col items-center justify-center overflow-hidden bg-rose">
      <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2">
        {GLYPHS.map((g) => (
          <span key={g.c} className="rise absolute bottom-0 text-3xl font-black text-white/60" style={{ left: `${g.x}%`, animationDelay: `${g.d}s` }}>
            {g.c}
          </span>
        ))}
      </div>
      <motion.div
        initial={{ scale: 0.5, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ type: 'spring', stiffness: 220, damping: 18 }}
        className="relative flex flex-col items-center gap-4"
      >
        <div className="rounded-[32px] bg-white/15 p-6 backdrop-blur-sm">
          <SeyarMascot char="sigma" mood="happy" size={130} />
        </div>
        <BrandMark size={44} />
        <p className="text-sm text-white/80">ریاضی، قدم‌به‌قدم، از روی کتابِ درسی</p>
      </motion.div>
      <motion.div
        animate={{ rotate: 360 }}
        transition={{ duration: 1.8, repeat: Infinity, ease: 'linear' }}
        className="absolute bottom-20 h-6 w-6 rounded-full border-2 border-white/25 border-t-white"
      />
    </div>
  );
}