<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Navbar -->
    <Navbar />

    <!-- Hero Section -->
    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white">
      <div class="max-w-7xl mx-auto px-4 py-12 md:py-20">
        <div class="text-center max-w-3xl mx-auto">
          <h2 class="text-3xl md:text-5xl font-bold mb-4">Hungry? Order Now!</h2>
          <p class="text-lg md:text-xl mb-8 text-orange-100">Delicious food from the best restaurants, delivered to your door</p>
          
          <!-- Search Bar -->
          <div class="relative max-w-2xl mx-auto">
            <svg class="w-6 h-6 absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <input v-model="search" type="text" placeholder="Search for restaurants, cuisines, or dishes..." class="w-full pl-14 pr-4 py-4 md:py-5 text-gray-900 bg-white rounded-2xl focus:outline-none focus:ring-4 focus:ring-orange-300 shadow-lg text-base md:text-lg">
          </div>
        </div>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 py-6 md:py-8">
      
      <!-- Offers & Deals Banner -->
      <div class="mb-8">
        <div class="bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl p-6 md:p-8 text-white relative overflow-hidden">
          <div class="absolute top-0 right-0 opacity-20">
            <svg class="w-48 h-48" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
            </svg>
          </div>
          <div class="relative z-10">
            <div class="flex items-center gap-2 mb-2">
              <span class="bg-yellow-400 text-red-600 px-3 py-1 rounded-full text-sm font-bold">🔥 HOT DEAL</span>
            </div>
            <h3 class="text-2xl md:text-3xl font-bold mb-2">Get 50% OFF on your first order!</h3>
            <p class="text-lg mb-4">Use code: <span class="bg-white text-red-600 px-3 py-1 rounded font-bold">FIRST50</span></p>
            <button class="bg-white text-red-600 px-6 py-3 rounded-xl font-bold hover:bg-gray-100 transition">Order Now →</button>
          </div>
        </div>
      </div>

      <!-- Meal Types -->
      <div class="mb-8">
        <h3 class="text-xl md:text-2xl font-bold mb-4">What are you craving?</h3>
        <div class="grid grid-cols-3 md:grid-cols-6 gap-4">
          <div v-for="cuisine in cuisines" :key="cuisine.name" @click="filterByCuisine(cuisine.name)" class="bg-white rounded-xl p-4 text-center hover:shadow-lg transition cursor-pointer group">
            <div class="text-4xl mb-2 group-hover:scale-110 transition">{{ cuisine.icon }}</div>
            <p class="text-sm font-medium text-gray-700">{{ cuisine.name }}</p>
          </div>
        </div>
      </div>

      <!-- Browse Restaurants Button -->
      <div class="mb-8">
        <div class="bg-white rounded-2xl p-8 text-center shadow-lg">
          <div class="text-6xl mb-4">🍽️</div>
          <h3 class="text-2xl md:text-3xl font-bold mb-3">Browse All Restaurants</h3>
          <p class="text-gray-600 mb-6">Discover amazing restaurants near you</p>
          <button @click="goToRestaurantsPage" class="bg-orange-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-orange-700 transition shadow-lg hover:shadow-xl">
            View All Restaurants →
          </button>
        </div>
      </div>

      <!-- Featured Dishes -->
      <div class="mb-8">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl md:text-2xl font-bold">🔥 Featured Dishes</h3>
          <button class="text-orange-600 font-medium hover:underline">View All →</button>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div v-for="dish in featuredDishes" :key="dish.id" class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition cursor-pointer group">
            <div class="relative h-32 bg-gray-200">
              <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-orange-300 to-red-400">
                <span class="text-5xl">{{ dish.icon }}</span>
              </div>
              <div class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold">
                -{{ dish.discount }}%
              </div>
            </div>
            <div class="p-3">
              <h4 class="font-bold text-sm mb-1 group-hover:text-orange-600 transition">{{ dish.name }}</h4>
              <div class="flex items-center gap-2">
                <span class="text-gray-400 line-through text-xs">Rs {{ dish.originalPrice }}</span>
                <span class="text-orange-600 font-bold text-sm">Rs {{ dish.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>



      <!-- Customer Reviews -->
      <div class="mb-8">
        <h3 class="text-xl md:text-2xl font-bold mb-4">💬 What Our Customers Say</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div v-for="review in customerReviews" :key="review.id" class="bg-white rounded-xl p-6 shadow-sm">
            <div class="flex items-center gap-1 mb-3">
              <svg v-for="i in 5" :key="i" class="w-5 h-5" :class="i <= review.rating ? 'text-yellow-500' : 'text-gray-300'" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
            </div>
            <p class="text-gray-700 mb-4">"{{ review.comment }}"</p>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold">
                {{ review.name.charAt(0) }}
              </div>
              <div>
                <p class="font-semibold text-sm">{{ review.name }}</p>
                <p class="text-xs text-gray-500">{{ review.date }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Bottom Navigation (Mobile Only) -->
    <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 z-20">
      <div class="flex justify-around items-center">
        <button class="flex flex-col items-center gap-1 text-orange-600">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
          </svg>
          <span class="text-xs font-medium">Home</span>
        </button>
        <button class="flex flex-col items-center gap-1 text-gray-500">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
          <span class="text-xs font-medium">Search</span>
        </button>
        <button class="flex flex-col items-center gap-1 text-gray-500">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
          </svg>
          <span class="text-xs font-medium">Cart</span>
        </button>
        <button class="flex flex-col items-center gap-1 text-gray-500">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
          </svg>
          <span class="text-xs font-medium">Profile</span>
        </button>
      </div>
    </nav>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import Navbar from '../../components/Navbar.vue';

const router = useRouter();
const search = ref('');
const selectedCategory = ref('');
const restaurants = ref([]);
const categories = ref([]);
const loading = ref(true);

const cuisines = ref([
  { name: 'Breakfast', icon: '🍳' },
  { name: 'Lunch', icon: '🍱' },
  { name: 'Dinner', icon: '🍽️' },
  { name: 'Short Eats', icon: '🥟' },
  { name: 'Drinks', icon: '🥤' },
  { name: 'Other', icon: '🍴' }
]);

const featuredDishes = ref([
  { id: 1, name: 'Cheese Pizza', icon: '🍕', price: 1200, originalPrice: 1600, discount: 25 },
  { id: 2, name: 'Chicken Burger', icon: '🍔', price: 800, originalPrice: 1000, discount: 20 },
  { id: 3, name: 'Fried Rice', icon: '🍚', price: 600, originalPrice: 800, discount: 25 },
  { id: 4, name: 'Pasta', icon: '🍝', price: 900, originalPrice: 1200, discount: 25 }
]);

const customerReviews = ref([
  { id: 1, name: 'Kasun Perera', rating: 5, comment: 'Amazing food quality and super fast delivery! Highly recommended.', date: '2 days ago' },
  { id: 2, name: 'Nimal Silva', rating: 5, comment: 'Best food delivery service in Colombo. Always on time!', date: '1 week ago' },
  { id: 3, name: 'Saman Fernando', rating: 4, comment: 'Great variety of restaurants. Love the app interface.', date: '2 weeks ago' }
]);

const popularRestaurants = computed(() => {
  return restaurants.value.slice(0, 3);
});

const filteredRestaurants = computed(() => {
  let filtered = restaurants.value;
  
  if (search.value) {
    const searchLower = search.value.toLowerCase();
    filtered = filtered.filter(r => 
      r.name.toLowerCase().includes(searchLower) ||
      r.description?.toLowerCase().includes(searchLower)
    );
  }
  
  if (selectedCategory.value) {
    // Filter by category if needed
  }
  
  return filtered;
});

const loadRestaurants = async () => {
  try {
    loading.value = true;
    const res = await axios.get('/api/restaurants');
    restaurants.value = res.data.data || res.data;
  } catch (err) {
    console.error('Error loading restaurants:', err);
  } finally {
    loading.value = false;
  }
};

const loadCategories = async () => {
  try {
    const res = await axios.get('/api/manager/categories');
    categories.value = res.data;
  } catch (err) {
    console.error('Error loading categories:', err);
  }
};

const getCategoryIcon = (name) => {
  const icons = {
    'Pizza': '🍕',
    'Burger': '🍔',
    'Chinese': '🥡',
    'Desserts': '🍰',
    'Beverages': '🥤',
    'Rice': '🍚',
    'Noodles': '🍜',
    'Seafood': '🦞',
  };
  return icons[name] || '🍽️';
};

const filterByCuisine = (cuisine) => {
  search.value = cuisine;
};

const goToRestaurant = (id) => {
  router.push(`/restaurants/${id}`);
};

const goToRestaurantsPage = () => {
  router.push('/restaurants');
};

onMounted(() => {
  loadRestaurants();
  loadCategories();
});
</script>

<style scoped>
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>
