"use client";

import { useEffect, useState, Suspense } from "react";
import Link from "next/link";
import { motion } from "framer-motion";
import { Bot, UtensilsCrossed, Sparkles, ArrowRight, Star } from "lucide-react";
import { productApi, settingsApi } from "@/lib/api";
import BottomNav from "@/components/menu/BottomNav";
import ProductCard from "@/components/menu/ProductCard";
import { useSearchParams } from "next/navigation";
import { useCartStore } from "@/lib/store";

interface Product {
  id: number; name: string; description: string; price: number;
  image_url: string; stock_quantity: number; category_name: string; is_featured: number;
}

function HomeContent() {
  const [featured, setFeatured] = useState<Product[]>([]);
  const [settings, setSettings] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(true);
  const searchParams = useSearchParams();
  const setTableNumber = useCartStore((s) => s.setTableNumber);
  const setTableToken = useCartStore((s) => s.setTableToken);

  useEffect(() => {
    const masa = searchParams.get("masa");
    const token = searchParams.get("token");
    if (masa) setTableNumber(parseInt(masa));
    if (token) setTableToken(token);

    Promise.all([
      productApi.getFeatured().catch(() => ({ data: [] })),
      settingsApi.getPublic().catch(() => ({ data: {} })),
    ]).then(([prodRes, setRes]) => {
      setFeatured(prodRes.data || []);
      setSettings(setRes.data || {});
      setLoading(false);
    });
  }, [searchParams, setTableNumber]);

  const restaurantName = settings.restaurant_name || "Lezzet Sarayı";
  const slogan = settings.restaurant_slogan || "Geleneksel Tatlar, Modern Sunum";

  return (
    <div className="min-h-screen pb-20">
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-accent/10" />
        <div className="absolute top-10 right-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl" />
        <div className="absolute bottom-10 left-10 w-56 h-56 bg-chart-3/10 rounded-full blur-3xl" />

        <div className="relative max-w-lg mx-auto px-6 pt-12 pb-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center"
          >
            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-1.5 rounded-full text-xs font-semibold mb-4">
              <Sparkles className="w-3.5 h-3.5" />
              AI Garson Destekli
            </div>

            <h1 className="text-4xl font-bold tracking-tight mb-2">
              <span className="bg-gradient-to-r from-primary via-amber to-primary bg-clip-text text-transparent">
                {restaurantName}
              </span>
            </h1>
            <p className="text-muted-foreground text-sm">{slogan}</p>
          </motion.div>

          {/* Quick Actions */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.5 }}
            className="grid grid-cols-2 gap-3 mt-8"
          >
            <Link
              href="/menu"
              className="group flex items-center gap-3 bg-card border border-border/50 rounded-2xl p-4 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all duration-300"
            >
              <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                <UtensilsCrossed className="w-5 h-5 text-primary" />
              </div>
              <div>
                <p className="text-sm font-semibold">Menüyü Gör</p>
                <p className="text-[10px] text-muted-foreground">Tüm lezzetler</p>
              </div>
            </Link>

            <Link
              href="/ai-garson"
              className="group relative flex items-center gap-3 bg-card border border-border/50 rounded-2xl p-4 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all duration-300 overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-primary/10 to-transparent rounded-bl-full" />
              <div className="w-10 h-10 rounded-xl bg-emerald/10 flex items-center justify-center group-hover:bg-emerald/20 transition-colors">
                <Bot className="w-5 h-5 text-emerald" />
              </div>
              <div className="relative">
                <p className="text-sm font-semibold">AI Garson</p>
                <p className="text-[10px] text-muted-foreground">Öneri al</p>
              </div>
            </Link>
          </motion.div>
        </div>
      </section>

      {/* Featured Products */}
      <section className="max-w-lg mx-auto px-6 mt-4">
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.3 }}
        >
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-2">
              <Star className="w-4 h-4 text-primary fill-primary" />
              <h2 className="text-lg font-bold">Öne Çıkanlar</h2>
            </div>
            <Link href="/menu" className="flex items-center gap-1 text-xs text-primary font-medium hover:underline">
              Tümü <ArrowRight className="w-3 h-3" />
            </Link>
          </div>

          {loading ? (
            <div className="grid grid-cols-2 gap-3">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="bg-card rounded-2xl border border-border/50 overflow-hidden animate-pulse">
                  <div className="h-40 bg-muted" />
                  <div className="p-4 space-y-2">
                    <div className="h-4 bg-muted rounded w-3/4" />
                    <div className="h-3 bg-muted rounded w-full" />
                    <div className="h-8 bg-muted rounded-full w-20 ml-auto" />
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-2 gap-3">
              {featured.slice(0, 6).map((product, idx) => (
                <motion.div
                  key={product.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 * idx }}
                >
                  <ProductCard {...product} />
                </motion.div>
              ))}
            </div>
          )}
        </motion.div>
      </section>

      <BottomNav />
    </div>
  );
}

export default function HomePage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center">
        <div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
      </div>
    }>
      <HomeContent />
    </Suspense>
  );
}