import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { itemAPI } from "../services/api";
import { Item } from "../types";
import ItemCard from "../components/ItemCard";
import AuthButton from "../components/AuthButton";

const Home: React.FC = () => {
  const { user } = useAuth();
  const [featuredItems, setFeaturedItems] = useState<Item[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchFeaturedItems = async () => {
      try {
        const response = await itemAPI.getItems({ limit: 8 });
        setFeaturedItems(response.data.items);
      } catch (error) {
        console.error("Error fetching items:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchFeaturedItems();
  }, []);

  return (
    <div>
      {/* Featured Items Section */}
      <div className="py-4" style={{ backgroundColor: "#2C3E50" }}>
        <div className="container-fluid" style={{ maxWidth: "1800px" }}>
          {loading ? (
            <div className="text-center py-4">
              <div
                className="spinner-border"
                role="status"
                style={{ color: "#4A90E2" }}
              >
                <span className="visually-hidden">Loading...</span>
              </div>
            </div>
          ) : (
            <>
              <div className="row g-4">
                {featuredItems.map((item) => (
                  <div key={item.id} className="col-md-6 col-lg-4 col-xl-3">
                    <ItemCard item={item} variant="compact" />
                  </div>
                ))}
              </div>
              {featuredItems.length > 0 && (
                <div className="text-center mt-4">
                  <Link
                    to="/items"
                    className="btn btn-link"
                    style={{ color: "#4A90E2" }}
                  >
                    View All <i className="bi bi-arrow-right"></i>
                  </Link>
                </div>
              )}
            </>
          )}

          {!loading && featuredItems.length === 0 && (
            <div className="text-center py-5">
              <p style={{ color: "rgba(255, 255, 255, 0.7)" }}>
                No items available for rent yet.
              </p>
              <Link
                to="/create-item"
                className="btn"
                style={{
                  backgroundColor: "#4A90E2",
                  color: "white",
                  borderColor: "#4A90E2",
                }}
              >
                Be the first to list an item!
              </Link>
            </div>
          )}
        </div>
      </div>

      {/* Benefits Section */}
      <div className="py-5" style={{ backgroundColor: "#34495e" }}>
        <div className="container-fluid" style={{ maxWidth: "1800px" }}>
          <div className="row align-items-center">
            <div className="col-lg-6">
              <h2 className="mb-4" style={{ color: "white" }}>
                Why Choose Village Share?
              </h2>
              <div className="d-flex mb-3">
                <i
                  className="bi bi-check-circle-fill me-3"
                  style={{ fontSize: "1.5rem", color: "#7FB069" }}
                ></i>
                <div>
                  <h5 style={{ color: "white" }}>Save Money</h5>
                  <p style={{ color: "rgba(255, 255, 255, 0.8)" }}>
                    Why buy when you can rent? Access items for a fraction of
                    the purchase price.
                  </p>
                </div>
              </div>
              <div className="d-flex mb-3">
                <i
                  className="bi bi-check-circle-fill me-3"
                  style={{ fontSize: "1.5rem", color: "#7FB069" }}
                ></i>
                <div>
                  <h5 style={{ color: "white" }}>Earn Extra Income</h5>
                  <p style={{ color: "rgba(255, 255, 255, 0.8)" }}>
                    Turn your unused items into a revenue stream. Your garage
                    could be a goldmine.
                  </p>
                </div>
              </div>
              <div className="d-flex mb-3">
                <i
                  className="bi bi-check-circle-fill me-3"
                  style={{ fontSize: "1.5rem", color: "#7FB069" }}
                ></i>
                <div>
                  <h5 style={{ color: "white" }}>Build Community</h5>
                  <p style={{ color: "rgba(255, 255, 255, 0.8)" }}>
                    Connect with neighbors and help each other. Sharing builds
                    stronger communities.
                  </p>
                </div>
              </div>
              <div className="d-flex">
                <i
                  className="bi bi-check-circle-fill me-3"
                  style={{ fontSize: "1.5rem", color: "#7FB069" }}
                ></i>
                <div>
                  <h5 style={{ color: "white" }}>Reduce Waste</h5>
                  <p style={{ color: "rgba(255, 255, 255, 0.8)" }}>
                    Share instead of everyone buying. It's better for your
                    wallet and the planet.
                  </p>
                </div>
              </div>
            </div>
            <div className="col-lg-6 text-center">
              <h2 className="mb-4" style={{ color: "white" }}>
                Ready to Get Started?
              </h2>
              <p
                className="lead mb-4"
                style={{ color: "rgba(255, 255, 255, 0.9)" }}
              >
                Join thousands of people sharing and renting in your community
              </p>
              <div className="d-flex gap-3 justify-content-center flex-wrap">
                {user ? (
                  <Link
                    to="/create-item"
                    className="btn btn-lg"
                    style={{
                      backgroundColor: "#7FB069",
                      color: "white",
                      borderColor: "#7FB069",
                    }}
                  >
                    Start Earning
                  </Link>
                ) : (
                  <AuthButton
                    mode="signup"
                    className="btn btn-lg"
                    style={{
                      backgroundColor: "#7FB069",
                      color: "white",
                      borderColor: "#7FB069",
                    }}
                  >
                    Start Earning
                  </AuthButton>
                )}
                <Link
                  to="/items"
                  className="btn btn-lg"
                  style={{
                    backgroundColor: "#4A90E2",
                    color: "white",
                    borderColor: "#4A90E2",
                  }}
                >
                  Browse Rentals
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* How It Works - For Renters */}
      <div className="py-5">
        <div className="container-fluid" style={{ maxWidth: "1800px" }}>
          <h2 className="text-center mb-5">
            For Renters: Get What You Need, When You Need It
          </h2>
          <div className="row g-4">
            <div className="col-md-4 text-center">
              <div className="mb-3">
                <i
                  className="bi bi-search"
                  style={{ fontSize: "3rem", color: "#4A90E2" }}
                ></i>
              </div>
              <h4>1. Find What You Need</h4>
              <p className="text-muted">
                Browse our marketplace for tools, equipment, electronics, and
                more. Filter by location, price, and availability.
              </p>
            </div>
            <div className="col-md-4 text-center">
              <div className="mb-3">
                <i
                  className="bi bi-calendar-check"
                  style={{ fontSize: "3rem", color: "#4A90E2" }}
                ></i>
              </div>
              <h4>2. Book Your Rental</h4>
              <p className="text-muted">
                Select your rental dates, choose delivery or pickup, and pay
                securely. Your payment is held until the owner confirms.
              </p>
            </div>
            <div className="col-md-4 text-center">
              <div className="mb-3">
                <i
                  className="bi bi-box-arrow-right"
                  style={{ fontSize: "3rem", color: "#4A90E2" }}
                ></i>
              </div>
              <h4>3. Enjoy & Return</h4>
              <p className="text-muted">
                Use the item for your project or event, then return it as
                agreed. Rate your experience to help the community.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* How It Works - For Owners */}
      <div className="py-5" style={{ backgroundColor: "#F7F9FB" }}>
        <div className="container-fluid" style={{ maxWidth: "1800px" }}>
          <h2 className="text-center mb-5">
            For Owners: Turn Your Idle Items Into Income
          </h2>
          <div className="row g-4">
            <div className="col-md-4 text-center">
              <div className="mb-3">
                <i
                  className="bi bi-camera"
                  style={{ fontSize: "3rem", color: "#7FB069" }}
                ></i>
              </div>
              <h4>1. List Your Items</h4>
              <p className="text-muted">
                Take photos, set your price, and choose when your items are
                available. List anything from power tools to party supplies.
              </p>
            </div>
            <div className="col-md-4 text-center">
              <div className="mb-3">
                <i
                  className="bi bi-bell"
                  style={{ fontSize: "3rem", color: "#7FB069" }}
                ></i>
              </div>
              <h4>2. Accept Requests</h4>
              <p className="text-muted">
                Review rental requests and accept the ones that work for you.
                Set your own rules and requirements.
              </p>
            </div>
            <div className="col-md-4 text-center">
              <div className="mb-3">
                <i
                  className="bi bi-cash-stack"
                  style={{ fontSize: "3rem", color: "#7FB069" }}
                ></i>
              </div>
              <h4>3. Get Paid</h4>
              <p className="text-muted">
                Earn money from items sitting in your garage. Payments are
                processed securely after each rental.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;
