import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { mockListings } from '@/services/mockApi';
import { Star, Heart, MapPin, Shield, Users, Wifi, Car } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import { useCart } from '@/contexts/CartContext';
import { useToast } from '@/hooks/use-toast';
import CartSidebar from '@/components/CartSidebar';
import BookingSidebar from '@/components/BookingSidebar';

const OfferDetails = () => {
  const { slug } = useParams();
  const navigate = useNavigate();
  const { addToCart } = useCart();
  const { toast } = useToast();
  const [isBookmarked, setIsBookmarked] = useState(false);

  // Find offer by slug
  const offer = mockListings.find(listing => listing.id === slug);

  if (!offer) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Oferta no encontrada</h1>
          <Button onClick={() => navigate('/explore')}>Volver a explorar</Button>
        </div>
      </div>
    );
  }

  const amenities = [
    { icon: <Wifi className="w-5 h-5" />, name: "WiFi Gratis" },
    { icon: <Car className="w-5 h-5" />, name: "Estacionamiento" },
    { icon: <Users className="w-5 h-5" />, name: "Accesible" },
    { icon: <Shield className="w-5 h-5" />, name: "Seguro" },
  ];

  const galleryImages = [
    offer.images[0],
    "https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400",
    "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400",
    "https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=400",
  ];

  const handleAddToCart = (date: Date | undefined, guests: number, timeSlot?: string) => {
    const cartItem = {
      id: offer.id,
      title: offer.title,
      price: offer.price,
      image: offer.images[0],
      category: offer.category,
      location: offer.location.address,
      selectedDate: date?.toISOString().split('T')[0] || '',
      guests: guests || undefined,
      timeSlot
    };

    addToCart(cartItem);
    toast({
      title: "¡Agregado al carrito!",
      description: `${offer.title} se ha agregado a tu carrito.`,
    });
  };

  const handleBookNow = (date: Date | undefined, guests: number, timeSlot?: string) => {
    handleAddToCart(date, guests, timeSlot);
    navigate('/checkout');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      
      <div className="container mx-auto px-4 pt-24 pb-12">
        {/* Header with Cart */}
        <div className="flex justify-between items-start mb-8">
          <div className="flex-1">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
              <div>
                <h1 className="text-3xl font-bold text-gray-900 mb-2">{offer.title}</h1>
                <div className="flex items-center text-gray-600 mb-2">
                  <MapPin className="w-4 h-4 mr-1" />
                  <span>{offer.location.address}</span>
                </div>
                <div className="flex items-center gap-4">
                  <div className="flex items-center">
                    <Star className="w-5 h-5 fill-yellow-400 text-yellow-400 mr-1" />
                    <span className="font-semibold">{offer.rating}</span>
                    <span className="text-gray-600 ml-1">(124 reviews)</span>
                  </div>
                </div>
              </div>
              <div className="mt-4 md:mt-0 flex gap-2">
                <Button
                  variant="outline"
                  onClick={() => setIsBookmarked(!isBookmarked)}
                >
                  <Heart className={`w-4 h-4 mr-2 ${isBookmarked ? 'fill-red-500 text-red-500' : ''}`} />
                  Guardar
                </Button>
                <CartSidebar />
              </div>
            </div>
          </div>
        </div>

        {/* Gallery */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
          <div className="md:col-span-2">
            <img
              src={galleryImages[0]}
              alt={offer.title}
              className="w-full h-96 object-cover rounded-lg"
            />
          </div>
          <div className="grid grid-cols-2 gap-4 md:col-span-2">
            {galleryImages.slice(1).map((image, index) => (
              <img
                key={index}
                src={image}
                alt={`${offer.title} ${index + 2}`}
                className="w-full h-32 md:h-[188px] object-cover rounded-lg"
              />
            ))}
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2">
            {/* Description */}
            <div className="bg-white rounded-lg p-6 mb-6">
              <h2 className="text-xl font-semibold mb-4">Descripción</h2>
              <p className="text-gray-700 leading-relaxed">
                {offer.description}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                esse cillum dolore eu fugiat nulla pariatur.
              </p>
            </div>

            {/* Amenities */}
            <div className="bg-white rounded-lg p-6 mb-6">
              <h2 className="text-xl font-semibold mb-4">Servicios disponibles</h2>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {amenities.map((amenity, index) => (
                  <div key={index} className="flex items-center p-3 bg-gray-50 rounded-lg">
                    <div className="text-primary mr-3">{amenity.icon}</div>
                    <span className="text-sm font-medium">{amenity.name}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Location */}
            <div className="bg-white rounded-lg p-6">
              <h2 className="text-xl font-semibold mb-4">Ubicación</h2>
              <div className="bg-gray-200 h-64 rounded-lg flex items-center justify-center">
                <p className="text-gray-600">Mapa interactivo - {offer.location.address}</p>
              </div>
            </div>
          </div>

          {/* Booking Sidebar */}
          <div className="lg:col-span-1">
            <BookingSidebar 
              offer={offer} 
              onBookNow={handleBookNow}
              onAddToCart={handleAddToCart}
            />
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default OfferDetails;