"use client";

import CategoryIcon from "@/lib/category-icons";
import LocationButton from "@/components/LocationButton";
import { useLocation } from "@/context/LocationContext";
import type { Category } from "@/data/categories";
import type { City } from "@/data/cities";
import { getCategoryStrategy } from "@/data/category-strategy";

interface SearchHeroProps {
  category: Category;
  city?: City;
  resultCount: number;
}

export default function SearchHero({
  category,
  city,
  resultCount,
}: SearchHeroProps) {
  const { shortLabel } = useLocation();
  const isOnDuty = category.slug === "nobetci-eczane";
  const strategy = getCategoryStrategy(category.slug);

  return (
    <section
      className={`relative overflow-hidden border-b border-white/5 pb-8 pt-4 ${
        isOnDuty ? "bg-gradient-to-b from-amber-950/20 to-transparent" : ""
      }`}
    >
      <div className="hero-glow pointer-events-none absolute inset-0 opacity-60" />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <div
              className={`mb-4 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br ${category.color} shadow-lg`}
            >
              <CategoryIcon name={category.icon} className="h-7 w-7 text-white" />
            </div>

            <h1 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl lg:text-5xl">
              {city ? `${city.name} — ` : ""}
              <span className={isOnDuty ? "text-gradient-warm" : "text-gradient"}>
                {category.searchTitle}
              </span>
            </h1>

            <p className="mt-3 max-w-2xl text-base text-slate-400 sm:text-lg">
              {category.description}.{" "}
              <span className="text-slate-300">
                {resultCount} sonuç
                {shortLabel ? ` · ${shortLabel}` : city ? ` · ${city.name}` : ""}
              </span>
            </p>

            {strategy.mapsGap === "high" && (
              <span className="mt-3 mr-2 inline-flex rounded-full border border-amber-500/30 bg-amber-500/15 px-2.5 py-0.5 text-[10px] font-bold uppercase text-amber-300">
                Maps&apos;te güvenilir değil
              </span>
            )}
            {category.hot && (
              <span className="mt-3 inline-flex rounded-full bg-amber-500 px-2.5 py-0.5 text-[10px] font-bold uppercase text-black">
                Google Top {category.rank ?? 1} Arama
              </span>
            )}
          </div>

          <div className="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center">
            <LocationButton variant="header" />
            <div className="rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-center text-sm">
              <span className="block text-xs text-slate-500">Aylık arama</span>
              <span className="font-bold text-emerald-400">{category.searches}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}