import Header from "@/components/Header";
import Link from "next/link";
import Footer from "@/components/Footer";
import Breadcrumb from "@/components/search/Breadcrumb";
import SearchFilters from "@/components/search/SearchFilters";
import ResultCard from "@/components/search/ResultCard";
import MapPlaceholder from "@/components/search/MapPlaceholder";
import RelatedCategories from "@/components/search/RelatedCategories";
import CityLinks from "@/components/search/CityLinks";
import SearchHero from "@/components/search/SearchHero";
import OfficialDataBanner from "@/components/search/OfficialDataBanner";
import type { Category } from "@/data/categories";
import type { City } from "@/data/cities";
import { getRelatedCategories } from "@/data/categories";
import { getCategoryStrategy } from "@/data/category-strategy";
import { getGuidesByCategory } from "@/data/guides";
import { searchLocations, getLocationStats } from "@/db/repositories/locations";

interface SearchPageProps {
  category: Category;
  city?: City;
}

export default async function SearchPage({ category, city }: SearchPageProps) {
  const results = searchLocations({
    categorySlug: category.slug,
    provinceSlug: city?.slug,
    lat: city ? undefined : 41.0082,
    lng: city ? undefined : 28.9784,
    limit: 12,
  });
  const dbStats = getLocationStats();
  const usingDb = dbStats.locations > 0;
  const related = getRelatedCategories(category.slug);
  const relatedGuides = getGuidesByCategory(category.slug);
  const accent = category.slug === "nobetci-eczane" ? "amber" : "emerald";

  const breadcrumbItems = city
    ? [
        { label: category.title, href: `/${category.slug}` },
        { label: city.name },
      ]
    : [{ label: category.title }];

  return (
    <>
      <Header />
      <main className="min-h-screen pt-20">
        <SearchHero category={category} city={city} resultCount={results.length} />

        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="py-4">
            <Breadcrumb
              items={[
                { label: "Kategoriler", href: "/kategoriler" },
                ...breadcrumbItems,
              ]}
            />
          </div>
          <div className="-mx-4 sm:-mx-6 lg:-mx-8">
            <SearchFilters />
          </div>

          <div className="mt-6 grid gap-6 lg:grid-cols-5 lg:gap-8">
            <div className="lg:col-span-3">
              <OfficialDataBanner category={category} />

              <div className="mb-4 flex items-center justify-between">
                <p className="text-sm text-slate-400">
                  <span className="font-semibold text-white">{results.length} sonuç</span>
                  {city ? ` · ${city.name}` : " · Konumunuza göre"}
                </p>
                <span className="rounded-full bg-emerald-500/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-emerald-400">
                  {usingDb ? "SQLite DB" : "Fallback veri"}
                </span>
              </div>

              <div className="space-y-3">
                {results.map((result, i) => (
                  <ResultCard
                    key={result.id}
                    result={result}
                    category={category}
                    rank={i + 1}
                  />
                ))}
              </div>

              <RelatedCategories categories={related} citySlug={city?.slug} />
              {!city && <CityLinks category={category} />}
            </div>

            <div className="lg:col-span-2">
              <MapPlaceholder results={results} accent={accent} />
            </div>
          </div>

          {/* SEO content block */}
          <section className="mt-12 border-t border-white/5 py-10">
            <h2 className="text-xl font-bold text-white">
              {city
                ? `${city.name} ${category.searchTitle}`
                : category.searchTitle}
            </h2>
            <p className="mt-3 max-w-3xl leading-relaxed text-slate-400">
              {category.seoDescription}{" "}
              {getCategoryStrategy(category.slug).mapsGap === "high" && (
                <span className="text-slate-300">
                  Google Maps bu kategoride güvenilir sonuç vermez; resmi kaynak
                  tabanlı listemizi kullanın.
                </span>
              )}{" "}
              {city &&
                `${city.name} ve çevresinde ${category.title.toLowerCase()} arayanlar için mesafe, puan ve iletişim bilgileriyle sıralı liste.`}
            </p>
            <div className="mt-4 flex flex-wrap gap-2">
              {category.keywords.map((kw) => (
                <span
                  key={kw}
                  className="rounded-full border border-white/8 bg-white/3 px-3 py-1 text-xs text-slate-500"
                >
                  {kw}
                </span>
              ))}
            </div>
            {relatedGuides.length > 0 && (
              <div className="mt-6">
                <p className="text-sm font-semibold text-slate-300">İlgili rehberler</p>
                <ul className="mt-2 space-y-2">
                  {relatedGuides.map((g) => (
                    <li key={g.slug}>
                      <Link
                        href={`/rehber/${g.slug}`}
                        className="text-sm text-emerald-400 hover:text-emerald-300"
                      >
                        {g.title}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </section>
        </div>
      </main>
      <Footer />
    </>
  );
}