import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet";
import "bootstrap/dist/css/bootstrap.min.css";

const Home = () => {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useState({
    origin: "",
    destination: "",
    date: "",
    passengers: 1,
    tripType: "one-way"
  });

  const handleSearch = () => {
    if (!searchParams.origin || !searchParams.destination || !searchParams.date) {
      alert("Please fill all fields");
      return;
    }
    navigate(`/flights/results?origin=${searchParams.origin}&destination=${searchParams.destination}&date=${searchParams.date}&passengers=${searchParams.passengers}&tripType=${searchParams.tripType}`);
  };

  return (
    <div>
      <Helmet>
        <title>hlafly - Home</title>
        <meta name="description" content="Explore the best travel deals and vacation packages." />
        <link rel="icon" type="image/png" href="/favicon.png" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
      </Helmet>

      {/* Hero Section */}
      <div className="hero-section text-center text-white d-flex align-items-center justify-content-center">
        <div>
          <h1 className="display-4 fw-bold">Find Your Next Adventure</h1>
          <p className="lead">Book flights, hotels, and packages at the best prices.</p>

          {/* Search Box */}
          <div className="search-box p-4 bg-white rounded shadow mt-4">
            <div className="row mb-3">
              <div className="col-md-12 d-flex justify-content-center">
                <button className={`btn ${searchParams.tripType === "one-way" ? "btn-primary" : "btn-outline-primary"} me-2`} onClick={() => setSearchParams({ ...searchParams, tripType: "one-way" })}>One-way</button>
                <button className={`btn ${searchParams.tripType === "round-trip" ? "btn-primary" : "btn-outline-primary"} me-2`} onClick={() => setSearchParams({ ...searchParams, tripType: "round-trip" })}>Round-trip</button>
                <button className={`btn ${searchParams.tripType === "multi-city" ? "btn-primary" : "btn-outline-primary"}`} onClick={() => setSearchParams({ ...searchParams, tripType: "multi-city" })}>Multi-city</button>
              </div>
            </div>
            <div className="row">
              <div className="col-md-3">
                <label>From</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Enter origin"
                  value={searchParams.origin}
                  onChange={(e) => setSearchParams({ ...searchParams, origin: e.target.value })}
                />
              </div>
              <div className="col-md-3">
                <label>To</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Enter destination"
                  value={searchParams.destination}
                  onChange={(e) => setSearchParams({ ...searchParams, destination: e.target.value })}
                />
              </div>
              <div className="col-md-3">
                <label>Date</label>
                <input
                  type="date"
                  className="form-control"
                  value={searchParams.date}
                  onChange={(e) => setSearchParams({ ...searchParams, date: e.target.value })}
                />
              </div>
              <div className="col-md-2">
                <label>Passengers</label>
                <input
                  type="number"
                  className="form-control"
                  min="1"
                  value={searchParams.passengers}
                  onChange={(e) => setSearchParams({ ...searchParams, passengers: e.target.value })}
                />
              </div>
              <div className="col-md-1 d-flex align-items-end">
                <button className="btn btn-primary w-100" onClick={handleSearch}>Search</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Popular Destinations */}
      <div className="container mt-5">
        <h2 className="text-center mb-4">Popular Destinations</h2>
        <div className="row">
          <div className="col-md-4">
            <img src="/images/dubai.jpeg" className="img-fluid rounded" alt="Dubai" />
            <h5 className="mt-2 text-center">Dubai</h5>
          </div>
          <div className="col-md-4">
            <img src="/images/Paris.jpeg" className="img-fluid rounded" alt="Paris" />
            <h5 className="mt-2 text-center">Paris</h5>
          </div>
          <div className="col-md-4">
            <img src="/images/Bali.jpeg" className="img-fluid rounded" alt="Bali" />
            <h5 className="mt-2 text-center">Bali</h5>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;