import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import api from '../api'
import ProductCard from '../components/ProductCard'
import CategoryCard from '../components/CategoryCard'
import '../styles/global.css'

export default function Home() {
  const [featured, setFeatured] = useState([])
  const [newArrivals, setNewArrivals] = useState([])
  const [onSale, setOnSale] = useState([])
  const [categories, setCategories] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchData()
  }, [])

  const fetchData = async () => {
    try {
      const [featuredRes, newRes, saleRes, catRes] = await Promise.all([
        api.get('/products?featured=true&limit=8'),
        api.get('/products?limit=8'),
        api.get('/products?on_sale=true&limit=8'),
        api.get('/categories'),
      ])

      setFeatured(featuredRes?.data || [])
      setNewArrivals(newRes?.data || [])
      setOnSale(saleRes?.data || [])
      setCategories(catRes?.data || [])
    } catch (error) {
      console.error('Error fetching data:', error)
      // Set empty arrays on error to prevent crashes
      setFeatured([])
      setNewArrivals([])
      setOnSale([])
      setCategories([])
    } finally {
      setLoading(false)
    }
  }

  if (loading) return <div className="loading">Loading...</div>

  return (
    <div className="home">
      {/* Hero Section */}
      <section className="hero">
        <div className="hero-content">
          <h1>Welcome to Brand Master</h1>
          <p>Discover the latest in fashion and footwear</p>
          <Link to="/products" className="btn btn-large">
            Shop Now
          </Link>
        </div>
      </section>

      {/* Category Highlights */}
      <section className="section">
        <h2>Shop by Category</h2>
        <div className="grid">
          {categories.map((cat) => (
            <CategoryCard key={cat.id} category={cat} />
          ))}
        </div>
      </section>

      {/* Featured Products */}
      <section className="section">
        <h2>Featured Products</h2>
        <div className="grid">
          {featured.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>

      {/* New Arrivals */}
      <section className="section">
        <h2>New Arrivals</h2>
        <div className="grid">
          {newArrivals.slice(0, 4).map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>

      {/* On Sale */}
      <section className="section sale-banner">
        <h2>🔥 Limited Time Offers</h2>
        <p>Up to 50% off on selected items</p>
        <Link to="/sales" className="btn btn-large">
          View All Sales
        </Link>
      </section>

      {/* Best Sellers */}
      <section className="section">
        <h2>Best Sellers</h2>
        <div className="grid">
          {onSale.slice(0, 4).map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>

      {/* Promo Banner */}
      <section className="promo-banner">
        <h3>Subscribe to Our Newsletter</h3>
        <p>Get exclusive deals and updates</p>
        <input type="email" placeholder="Enter your email" />
        <button className="btn">Subscribe</button>
      </section>
    </div>
  )
}
