/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { useAuthStore } from '@/store/auth.store';
import {
  ChefHat,
  Clock,
  Lock,
  Utensils,
  Search,
  ArrowRight,
} from 'lucide-react';

import { RECIPES } from './data';

// ── Components ─────────────────────────────────────────────────────────
function RecipeCard({ recipe, index }: { recipe: any; index: number }) {
  return (
    <Link href={`/recipes/${recipe.id}`}>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: index * 0.05, duration: 0.4 }}
        className="group bg-white/60 backdrop-blur-xl border border-white/50 rounded-[20px] md:rounded-3xl overflow-hidden shadow-[0_8px_32px_0_rgba(31,38,135,0.05)] hover:border-yellow-400 hover:shadow-xl transition-all duration-300 flex flex-col h-full cursor-pointer"
      >
        {/* Image Banner */}
        <div className="relative h-48 md:h-56 bg-gray-200 overflow-hidden">
          <Image
            src={recipe.imageBanner}
            alt={recipe.title}
            fill
            className="object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div className="absolute inset-0 bg-linear-to-t from-black/50 to-transparent" />
          <div className="absolute bottom-3 md:bottom-4 left-3 md:left-4 right-3 md:right-4 flex justify-between items-end">
            <span className="flex items-center gap-1.5 bg-black/40 backdrop-blur-md text-white text-[9px] md:text-[10px] font-bold px-2.5 py-1 md:px-3 md:py-1.5 rounded-lg border border-white/20">
              <Clock className="w-3 h-3" /> {recipe.time}
            </span>
          </div>
        </div>

        {/* Content */}
        <div className="p-5 md:p-6 flex-1 flex flex-col">
          <h3 className="text-lg md:text-xl font-black text-gray-900 mb-2 leading-tight group-hover:text-yellow-600 transition-colors line-clamp-2">
            {recipe.title}
          </h3>
          <p className="text-xs md:text-sm text-gray-600 line-clamp-2 leading-relaxed mb-4 flex-1">
            {recipe.description}
          </p>

          <div className="flex items-center justify-between pt-4 border-t border-gray-200/50 mt-auto">
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 md:w-8 md:h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 overflow-hidden">
                <Image
                  src="/mascots/saltu-happy.avif"
                  alt="Author"
                  width={32}
                  height={32}
                  className="object-cover"
                />
              </div>
              <span className="text-[10px] md:text-xs font-bold text-gray-500">
                {recipe.author}
              </span>
            </div>
            <button className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-gray-50 border border-gray-200 flex items-center justify-center text-gray-500 group-hover:bg-yellow-400 group-hover:border-yellow-400 group-hover:text-gray-900 transition-all">
              <ArrowRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      </motion.div>
    </Link>
  );
}

// ── Main Page ──────────────────────────────────────────────────────────
export default function ResepPage() {
  const [mounted, setMounted] = useState(false);
  const { isAuthenticated, isInitialized } = useAuthStore();
  const [searchQuery, setSearchQuery] = useState('');

  // Mount effect to prevent hydration mismatch
  useEffect(() => {
    const timer = setTimeout(() => setMounted(true), 0);
    return () => clearTimeout(timer);
  }, []);

  // Filter recipes
  const filteredRecipes = RECIPES.filter((r) =>
    r.title.toLowerCase().includes(searchQuery.toLowerCase())
  );

  // ── 1. Not Mounted or Loading ──
  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>
    );
  }

  // ── 2. Unauthenticated View (Locked) ──
  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-gray-50 text-gray-900 relative overflow-hidden flex items-center justify-center py-20 md:pb-52 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>
    );
  }

  // ── 3. Authenticated View ──
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 relative overflow-hidden pb-16 md:pb-60">
      {/* 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>

      <div className="relative z-10 max-w-6xl mx-auto pt-24 md:pt-32 px-4 sm:px-6">
        {/* ── Header ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-8 md:mb-12 text-center"
        >
          <div className="w-12 h-12 md:w-16 md:h-16 bg-yellow-50 border border-yellow-200 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-4 md:mb-6 shadow-sm">
            <ChefHat className="w-6 h-6 md:w-8 md:h-8 text-yellow-600" />
          </div>
          <h1 className="text-3xl sm:text-5xl font-black text-gray-900 tracking-tight leading-none mb-3 md:mb-4">
            Inspirasi <span className="text-yellow-600">Resep</span> Pilihan
          </h1>
          <p className="text-[13px] sm:text-base font-medium text-gray-600 max-w-xl mx-auto leading-relaxed">
            Eksplorasi berbagai masakan Nusantara dan dunia yang disempurnakan
            dengan cita rasa gurih khas Garam Cap Kapal.
          </p>
        </motion.div>

        {/* ── Search Bar ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white/60 backdrop-blur-xl border border-white/50 rounded-[20px] md:rounded-3xl p-4 sm:p-6 shadow-sm max-w-2xl mx-auto mb-10 md:mb-16"
        >
          <div className="relative bg-white/40 border border-white/50 rounded-2xl focus-within:border-yellow-400 focus-within:ring-1 focus-within:ring-yellow-400 transition-all shadow-sm">
            <Search className="absolute left-4 md:left-5 top-1/2 -translate-y-1/2 w-4 h-4 md:w-5 md:h-5 text-gray-500" />
            <input
              type="text"
              placeholder="Cari resep favorit Anda..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-11 pr-4 py-3 md:pl-14 md:pr-6 md:py-4 bg-transparent text-gray-900 text-sm md:text-base font-medium placeholder:text-gray-500 focus:outline-none tracking-wide"
            />
          </div>
        </motion.div>

        {/* ── Content Grid ── */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
        >
          {filteredRecipes.length === 0 ? (
            <div className="bg-white/60 backdrop-blur-md border border-white/50 rounded-3xl py-16 md:py-24 flex flex-col items-center justify-center text-center shadow-sm px-4">
              <div className="w-16 h-16 md:w-20 md:h-20 bg-white/50 rounded-full flex items-center justify-center mb-4 md:mb-6 border border-white/50 shadow-inner">
                <Utensils className="w-8 h-8 md:w-10 md:h-10 text-gray-500" />
              </div>
              <h3 className="font-black text-gray-900 text-xl md:text-2xl tracking-tight mb-2">
                Resep Tidak Ditemukan
              </h3>
              <p className="text-[13px] md:text-sm font-medium text-gray-600 max-w-md">
                Coba gunakan kata kunci lain untuk mencari resep masakan yang
                Anda inginkan.
              </p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-8">
              {filteredRecipes.map((recipe, index) => (
                <RecipeCard key={recipe.id} recipe={recipe} index={index} />
              ))}
            </div>
          )}
        </motion.div>
      </div>
    </div>
  );
}