'use client';

import React, { useSyncExternalStore } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight, Lock } from 'lucide-react';
import { motion } from 'framer-motion';
import { useAuthStore } from '@/store/auth.store';

const emptySubscribe = () => () => {};

export function RecipeDetailClient({
  children,
}: {
  children: React.ReactNode;
}) {
  const { isAuthenticated, isInitialized } = useAuthStore();
  const mounted = useSyncExternalStore(
    emptySubscribe,
    () => true,
    () => false
  );

  if (!mounted || !isInitialized) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="w-10 h-10 border-4 border-yellow-200 border-t-yellow-500 rounded-full animate-spin" />
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-gray-50 text-gray-900 relative overflow-hidden flex items-center justify-center py-20 px-4 sm:px-6">
        {/* Background Blobs */}
        <div className="fixed inset-0 z-[-1] pointer-events-none">
          <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-yellow-300/30 rounded-full blur-[120px] -translate-y-1/3 translate-x-1/3 opacity-50" />
          <div className="absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-300/30 rounded-full blur-[120px] opacity-50" />
        </div>

        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          className="bg-white/60 backdrop-blur-xl border border-white/50 rounded-3xl p-8 md:p-12 max-w-lg w-full text-center shadow-[0_8px_32px_0_rgba(31,38,135,0.05)] relative overflow-hidden group"
        >
          {/* Subtle Glow */}
          <div className="absolute -top-24 -right-24 w-48 h-48 bg-yellow-400/20 rounded-full blur-3xl" />

          {/* Icon / Mascot */}
          <div className="relative w-32 h-32 mx-auto mb-6">
            <Image
              src="/mascots/salta-happy.avif"
              alt="Mascot"
              fill
              className="object-contain drop-shadow-xl"
            />
            <div className="absolute -bottom-2 -right-2 w-10 h-10 bg-rose-100 border-2 border-white rounded-full flex items-center justify-center shadow-sm">
              <Lock className="w-4 h-4 text-rose-500" />
            </div>
          </div>

          <h2 className="text-2xl md:text-3xl font-black text-gray-900 mb-3 tracking-tight">
            Konten Eksklusif
          </h2>
          <p className="text-sm md:text-base text-gray-600 mb-8 leading-relaxed font-medium max-w-sm mx-auto">
            Masuk ke akun Anda untuk melihat berbagai resep rahasia yang lezat
            menggunakan Garam Cap Kapal.
          </p>

          <Link
            href="/auth/login"
            className="inline-flex w-full items-center justify-center gap-2 py-3.5 md:py-4 bg-yellow-400 hover:bg-yellow-500 text-gray-900 text-sm md:text-base font-bold rounded-xl transition-all shadow-md shadow-yellow-400/20"
          >
            Masuk Sekarang <ArrowRight className="w-4 h-4" />
          </Link>
          <p className="text-xs text-gray-500 mt-6 font-medium">
            Belum punya akun?{' '}
            <Link
              href="/auth/register"
              className="text-yellow-600 font-bold hover:underline"
            >
              Daftar disini
            </Link>
          </p>
        </motion.div>
      </div>
    );
  }

  return <>{children}</>;
}