import Link from 'next/link';
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import { BASE, bulunma, ilBySlug, ilceIndexable, ilceler, statsByIlce, type BolgeStat } 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 }> };
export async function generateMetadata({ params }: P): Promise<Metadata> {
  const il = ilBySlug((await params).il); if (!il) return { title: 'Bulunamadı' };
  return {
    title: `${il.ad} arsa ve tarla ilan videosu`,
    description: `${bulunma(il.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}/${il.slug}` },
  };
}

export default async function IlSayfa({ params }: P) {
  const il = ilBySlug((await params).il); if (!il) notFound();
  const list = ilceler(il); const stats = await statsByIlce();
  const tot = list.reduce<BolgeStat>((a, x) => { const s = stats.get(x.id); if (!s) return a; const n = a.videos + s.videos; return { videos: n, avgArea: s.avgArea && a.avgArea ? Math.round((a.avgArea * a.videos + s.avgArea * s.videos) / n) : s.avgArea ?? a.avgArea, topNitelik: a.topNitelik ?? s.topNitelik }; }, { videos: 0, avgArea: null, topNitelik: null });
  const crumbs: [string, string][] = [...crumbBase, [`${BASE}/${il.slug}`, il.ad]];
  return (
    <>
      <CrumbLd crumbs={crumbs} />
      <BolgeHero crumbs={crumbs} title={`${il.ad} arsa ve tarla ilan videosu`}
        lead={`${bulunma(il.ad)} satışa çıkardığınız parselin ada ve parsel numarasını yazın; 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)} />
      </BolgeHero>
      <div className="space-y-4 bg-paper-2 px-3 py-6 md:px-6 md:py-10">
        <StatStrip yer={il.ad} s={tot} />
        <section className="bg-white p-4 md:p-6">
          <h2 className="text-[22px] font-extrabold">{il.ad} ilçeleri</h2>
          <p className="mt-1 text-[13.5px] text-ink-soft">İlçenizi seçin; ilçe sayfasında mahalle ve köy listesi ile ilçe önceden seçili parsel sorgusu bulunur.</p>
          <ul className="mt-3 grid grid-cols-2 border-l border-t border-ink/10 bg-white sm:grid-cols-3 md:grid-cols-4">
            {list.map((x) => { const s = stats.get(x.id); return (
              <li key={x.id}><Link href={`${BASE}/${il.slug}/${x.slug}`} className="flex items-baseline justify-between gap-2 border-b border-r border-ink/10 bg-white px-3 py-2 text-[14px] font-semibold hover:bg-signal-soft">
                <span>{x.ad}</span>{ilceIndexable(s) && <span className="num text-[11.5px] font-normal text-ink-soft">{s!.videos} video</span>}</Link></li>
            ); })}
          </ul>
        </section>
        <SampleBlock yer={il.ad} />
        <BolgeFaq yer={il.ad} />
      </div>
    </>
  );
}