"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import { AnimatedLoader } from "@/components/AnimatedLoader";
import { useAuth } from "@/lib/auth/auth-provider";
import { useTranslation } from "@/lib/i18n/LanguageProvider";
import { hasCompletedOnboarding } from "@/lib/onboarding";

export default function SplashPage() {
  const router = useRouter();
  const { user, loading } = useAuth();
  const { t } = useTranslation();
  const [minTimeElapsed, setMinTimeElapsed] = useState(false);

  useEffect(() => {
    const t = setTimeout(() => setMinTimeElapsed(true), 2200);
    return () => clearTimeout(t);
  }, []);

  useEffect(() => {
    if (minTimeElapsed && !loading) {
      if (!hasCompletedOnboarding()) {
        router.replace("/onboarding");
        return;
      }
      router.replace(user ? "/home" : "/welcome");
    }
  }, [minTimeElapsed, loading, user, router]);

  return (
    <div className="relative flex min-h-dvh flex-1 flex-col items-center justify-center overflow-hidden bg-ink">
      {/* ambient glow */}
      <div className="pointer-events-none absolute -top-24 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-gold/20 blur-3xl" />
      <div className="pointer-events-none absolute bottom-0 left-1/2 h-64 w-64 -translate-x-1/2 rounded-full bg-teal/10 blur-3xl" />

      <motion.div
        initial={{ opacity: 0, scale: 0.85 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
        className="relative flex flex-col items-center gap-5"
      >
        <div className="flex h-24 w-24 items-center justify-center rounded-[2rem] bg-gradient-to-br from-gold-bright to-gold-dim shadow-glow-gold">
          <span className="font-display text-4xl font-bold text-ink">S</span>
        </div>
        <div className="text-center">
          <h1 className="font-display text-2xl font-semibold tracking-tight text-paper">
            SharedNet
          </h1>
          <p className="mt-1 text-sm text-paper/60">
            {t("splash.tagline")}
          </p>
        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.5, duration: 0.4 }}
        className="absolute bottom-20"
      >
        <AnimatedLoader variant="signal" />
      </motion.div>
    </div>
  );
}