"use client";

import { useCallback, useState } from "react";

export type ProductPageHeroProps = {
  title?: string;
  titleBold?: string;
  description?: string;
  searchPlaceholder?: string;
  backgroundImage?: string;
  mobileBackgroundImage?: string;
};

function IconSearch() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.3-4.3" />
    </svg>
  );
}

const DEFAULT_TITLE = "Organic";
const DEFAULT_TITLE_BOLD = "Waste Marketplace";
const DEFAULT_DESCRIPTION = "Browse verified organic waste products from producers across Europe.";
const DEFAULT_PLACEHOLDER = "Search...";

export default function ProductPageHero({
  title = DEFAULT_TITLE,
  titleBold = DEFAULT_TITLE_BOLD,
  description = DEFAULT_DESCRIPTION,
  searchPlaceholder = DEFAULT_PLACEHOLDER,
  backgroundImage,
  mobileBackgroundImage,
}: ProductPageHeroProps) {
  const [searchQuery, setSearchQuery] = useState("");

  const handleSearch = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();
    },
    [searchQuery]
  );

  const hasBgImage = Boolean(backgroundImage || mobileBackgroundImage);
  const desktopBg = backgroundImage ?? "";
  const mobileBg = mobileBackgroundImage ?? backgroundImage ?? "";

  return (
    <section className="relative w-full overflow-hidden rounded-b-2xl md:rounded-b-3xl min-h-[320px] md:min-h-[420px]">
      {hasBgImage ? (
        <>
          <img
            src={mobileBg}
            alt=""
            className="absolute inset-0 block w-full object-cover object-top md:hidden"
            style={{ height: "100%", minHeight: "400px" }}
            aria-hidden
          />
          <img
            src={desktopBg}
            alt=""
            className="absolute inset-0 hidden w-full object-cover object-top md:block"
            style={{ height: "100%", minHeight: "449px" }}
            aria-hidden
          />
        </>
      ) : (
        <div
          className="absolute inset-0 bg-[#053F31] product-page-hero-pattern"
          aria-hidden
        />
      )}

      <div className="relative z-10 flex min-h-[400px] md:min-h-[449px] flex-col items-center justify-center px-4 py-12 text-center sm:px-6 md:py-16">
        <h1 className="mb-3 font-light tracking-wide text-white md:mb-4 md:max-w-[640px]">
          {title}
          {titleBold ? <span className="font-bold"> {titleBold}</span> : null}
        </h1>
        <p className="mb-6 max-w-[320px] text-base font-light leading-relaxed text-white/95 sm:max-w-[480px] md:mb-8 md:max-w-[560px] md:text-lg">
          {description}
        </p>

        <form onSubmit={handleSearch} className="w-full max-w-[560px]">
          <div className="flex items-center overflow-hidden rounded-full border border-white/30 bg-white/10 backdrop-blur-sm">
            <input
              type="search"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={searchPlaceholder}
              className="min-w-0 flex-1 bg-transparent px-5 py-3.5 text-white placeholder:text-white/60 focus:outline-none md:px-6 md:py-4"
              aria-label="Search products"
            />
            <button
              type="submit"
              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#053F31] text-white transition-opacity hover:opacity-90 md:h-12 md:w-12"
              aria-label="Search"
            >
              <IconSearch />
            </button>
          </div>
        </form>

        <div className="absolute bottom-8 left-1/2 hidden -translate-x-1/2 flex-col items-center gap-1 md:flex" aria-hidden>
          {[12, 18, 14, 20, 16].map((h, i) => (
            <div
              key={i}
              className="w-px bg-white/30"
              style={{ height: `${h}px` }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}