import Link from 'next/link';
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import { BASE, bulunma, ilBySlug, ilceBySlug, ilceIndexable, ilceler, mahalleler, statsByIlce } from '@/lib/bolge';
import { BolgeFaq, BolgeHero, CrumbLd, SampleBlock, StatStrip, crumbBase } from '@/components/landing/Bolge';
import { RegionBar } from '@/components/landing/RegionBar';
export const dynamic = 'force-dynamic';

type P = { params: Promise<{ il: string; ilce: string }> };
async function load(p: P['params']) {
  const { il: a, ilce: b } = await p; const il = ilBySlug(a); if (!il) return null;
  const ilce = ilceBySlug(il, b); return ilce ? { il, ilce } : null;
}

export async function generateMetadata({ params }: P): Promise<Metadata> {
  const x = await load(params); if (!x) return { title: 'Bulunamadı' };
  const s = (await statsByIlce()).get(x.ilce.id);
  return {
    title: `${x.ilce.ad} (${x.il.ad}) arsa ve tarla ilan videosu`,
    description: `${x.il.ad} ${bulunma(x.ilce.ad)} arsa, tarla ve bağ-bahçe ilanları için ada ve parselden, tapudaki sınırı uydu görüntüsünde gösteren Türkçe seslendirmeli dikey video.`,
    alternates: { canonical: `${BASE}/${x.il.slug}/${x.ilce.slug}` },
    // ilçede gerçek bir video üretilene kadar dizine eklenmez (bağlantıları yine izlenir)
    ...(ilceIndexable(s) ? {} : { robots: { index: false, follow: true } }),
  };
}

export default async function IlceSayfa({ params }: P) {
  const x = await load(params); if (!x) notFound();
  const { il, ilce } = x;
  const stats = await statsByIlce(); const s = stats.get(ilce.id);
  const mah = mahalleler(ilce); const komsu = ilceler(il).filter((y) => y.id !== ilce.id);
  const crumbs: [string, string][] = [...crumbBase, [`${BASE}/${il.slug}`, il.ad], [`${BASE}/${il.slug}/${ilce.slug}`, ilce.ad]];
  return (
    <>
      <CrumbLd crumbs={crumbs} />
      <BolgeHero crumbs={crumbs} title={`${ilce.ad} arsa ve tarla ilan videosu`}
        lead={`${il.ad} ${bulunma(ilce.ad)} satışa çıkardığınız parselin mahallesini, ada ve parsel numarasını seçin; Tapu Kadastro kaydındaki sınırı uydu görüntüsünde çizer, yakın çevre ve ulaşım bilgisiyle Türkçe seslendirmeli dikey ilan videosu hazırlarız.`}>
        <RegionBar il={String(il.id)} ilce={String(ilce.id)} />
      </BolgeHero>
      <div className="space-y-4 bg-paper-2 px-3 py-6 md:px-6 md:py-10">
        <StatStrip yer={ilce.ad} s={s} />
        {mah.length > 0 && (
          <section className="bg-white p-4 md:p-6">
            <h2 className="text-[22px] font-extrabold">{ilce.ad} mahalle ve köyleri</h2>
            <p className="mt-1 text-[13.5px] text-ink-soft">Tapu Kadastro kaydında {bulunma(ilce.ad)} {mah.length} mahalle ve köy bulunuyor. Parselinizin mahallesini yukarıdaki sorgudan seçebilirsiniz.</p>
            <ul className="mt-3 columns-2 gap-6 text-[13.5px] sm:columns-3 md:columns-4 lg:columns-5">
              {mah.map((m) => <li key={m} className="break-inside-avoid py-0.5">{m}</li>)}
            </ul>
          </section>
        )}
        <SampleBlock yer={ilce.ad} />
        <BolgeFaq yer={ilce.ad} />
        {komsu.length > 0 && (
          <section className="bg-white p-4 md:p-6">
            <h2 className="text-[18px] font-extrabold">{il.ad} ilçeleri</h2>
            <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[14px]">
              {komsu.map((y) => <li key={y.id}><Link href={`${BASE}/${il.slug}/${y.slug}`} className="underline-offset-2 hover:underline">{y.ad}</Link></li>)}
            </ul>
          </section>
        )}
      </div>
    </>
  );
}