import React, { useState, useEffect } from "react";
import {
  Search,
  MapPin,
  Clock,
  Star,
  ArrowRight,
  UtensilsCrossed,
} from "lucide-react";
import { Link } from "react-router-dom";
import axios from "axios";

const Home = () => {
  const [restaurants, setRestaurants] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchRestaurants = async () => {
      try {
        const { data } = await axios.get(
          "http://localhost:5000/api/restaurants",
        );
        setRestaurants(data);
      } catch (err) {
        console.error("Failed to fetch restaurants", err);
      } finally {
        setLoading(false);
      }
    };
    fetchRestaurants();
  }, []);

  return (
    <div className="pt-20">
      {/* Hero Section */}
      <section className="relative h-[70vh] flex items-center justify-center">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: "url('/hero-bg.png')" }}
        >
          <div className="absolute inset-0 bg-black/60"></div>
        </div>

        <div className="relative container mx-auto px-6 text-center text-white">
          <h1 className="text-5xl md:text-7xl font-bold font-outfit mb-6 animate-in slide-in-from-bottom-4 duration-700">
            Reserve Your{" "}
            <span className="text-primary italic">Perfect Table</span>
          </h1>
          <p className="text-xl text-gray-300 mb-10 max-w-2xl mx-auto animate-in slide-in-from-bottom-6 duration-700 delay-100">
            Explore premium dining spots and book instantly. No more waiting
            lines.
          </p>

          <div className="max-w-3xl mx-auto bg-white rounded-3xl p-3 flex flex-col md:flex-row gap-2 shadow-2xl animate-in fade-in duration-1000 delay-300">
            <div className="flex-1 flex items-center gap-3 px-6 py-3 border-b md:border-b-0 md:border-r border-gray-100">
              <Search className="text-primary" size={22} />
              <input
                type="text"
                placeholder="Find a restaurant..."
                className="w-full outline-none text-secondary font-medium"
              />
            </div>
            <div className="flex-1 flex items-center gap-3 px-6 py-3">
              <MapPin className="text-primary" size={22} />
              <input
                type="text"
                placeholder="Location..."
                className="w-full outline-none text-secondary font-medium"
              />
            </div>
            <button className="bg-secondary text-white px-10 py-4 rounded-2xl font-bold hover:bg-black transition-all hover:scale-[1.02] active:scale-95 shadow-lg">
              Explore
            </button>
          </div>
        </div>
      </section>

      {/* Featured Section */}
      <section className="py-24 bg-[#fcfbf7]">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
            <div className="max-w-xl">
              <span className="text-primary font-bold uppercase tracking-widest text-sm mb-4 block">
                Recommended for you
              </span>
              <h2 className="text-4xl md:text-5xl font-bold text-secondary mb-4 font-outfit">
                Featured Restaurants
              </h2>
              <p className="text-gray-500 text-lg">
                Discover the most sought-after dining spots, curated just for
                you.
              </p>
            </div>
            <Link
              to="/"
              className="bg-white border border-gray-200 px-8 py-3 rounded-2xl font-bold hover:bg-gray-50 transition-all flex items-center gap-2 group"
            >
              See All{" "}
              <span className="group-hover:translate-x-1 transition-transform">
                →
              </span>
            </Link>
          </div>

          {loading ? (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
              {[1, 2, 3].map((i) => (
                <div
                  key={i}
                  className="h-96 bg-gray-100 rounded-3xl animate-pulse"
                ></div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
              {restaurants.length > 0 ? (
                restaurants.map((res) => (
                  <RestaurantCard key={res._id} restaurant={res} />
                ))
              ) : (
                <div className="col-span-full py-20 text-center bg-gray-50 rounded-3xl border-2 border-dashed border-gray-200">
                  <UtensilsCrossed
                    size={50}
                    className="mx-auto text-gray-300 mb-4"
                  />
                  <p className="text-gray-400 font-medium italic">
                    No restaurants registered yet. Be the first!
                  </p>
                </div>
              )}
            </div>
          )}
        </div>
      </section>
    </div>
  );
};

const RestaurantCard = ({ restaurant }) => {
  return (
    <Link to={`/restaurant/${restaurant._id}`} className="group">
      <div className="bg-white rounded-[40px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 transform group-hover:-translate-y-3 border border-gray-50">
        <div className="relative h-72 overflow-hidden">
          <img
            src={
              restaurant.image 
              ? (restaurant.image.startsWith('http') ? restaurant.image : `http://localhost:5000/${restaurant.image}`)
              : "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800"
            }
            alt={restaurant.name}
            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60"></div>
          <div className="absolute top-6 right-6 bg-white/95 backdrop-blur px-4 py-1.5 rounded-full flex items-center gap-1.5 shadow-xl">
            <Star className="text-orange-400 fill-orange-400" size={16} />
            <span className="font-bold text-sm text-secondary">4.8</span>
          </div>
          <div className="absolute bottom-6 left-6">
            <span className="bg-primary text-white px-4 py-1.5 rounded-xl text-xs font-bold tracking-wider uppercase shadow-lg shadow-primary/20">
              {restaurant.cuisine || "Fine Dining"}
            </span>
          </div>
        </div>

        <div className="p-8">
          <h3 className="text-2xl font-bold text-secondary mb-2 font-outfit group-hover:text-primary transition-colors">
            {restaurant.name}
          </h3>

          <div className="space-y-3 mb-8">
            <div className="flex items-center gap-3 text-gray-500 text-sm font-medium">
              <MapPin size={18} className="text-gray-300" />
              <span>{restaurant.location}</span>
            </div>
            <div className="flex items-center gap-3 text-gray-500 text-sm font-medium">
              <Clock size={18} className="text-gray-300" />
              <span>
                {restaurant.openingTime} - {restaurant.closingTime}
              </span>
            </div>
          </div>

          <div className="flex justify-between items-center border-t border-gray-50 pt-6">
            <div className="flex flex-col">
              <span className="text-[10px] text-gray-400 font-bold uppercase tracking-wider mb-1">
                Price Range
              </span>
              <span className="text-primary font-bold text-lg">$$$</span>
            </div>
            <div className="bg-secondary group-hover:bg-primary text-white w-12 h-12 rounded-2xl flex items-center justify-center transition-all shadow-xl group-hover:shadow-primary/30">
              <ArrowRight
                size={20}
                className="group-hover:translate-x-1 transition-transform"
              />
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default Home;
