'use client';
import { useMemo, useState } from 'react';
import dynamic from 'next/dynamic';
import type { ParcelResult } from '@/lib/tkgmClient';
import { ParcelBar, type Pick } from './ParcelBar';
const POSTER = '/kareler/gokova-z17.jpg';
// harita betiği gelene kadar da aynı uydu görüntüsü görünür (koyu boş ekran yok)
const DeskMap = dynamic(() => import('../DeskMap').then((m) => m.DeskMap), { ssr: false, loading: () => <img src={POSTER} alt="" aria-hidden className="h-full w-full object-cover" /> });

const m2 = (n: number) => `${n.toLocaleString('tr-TR', { maximumFractionDigits: 2 })} m²`;
/** Ana sayfa: tam ekran uydu, alt çubukta canlı TKGM sorgusu, köşede bu parselin gerçek videosu. */
export function HeroDesk({ demo, demoPick }: { demo: ParcelResult; demoPick: Pick }) {
  const [p, setP] = useState<ParcelResult>(demo); const [, setPick] = useState<Pick>(demoPick); const [isDemo, setIsDemo] = useState(true);
  const parcels = useMemo(() => [{ key: 'p', geometry: p.geometry }], [p]);
  const href = (x: ParcelResult, k: Pick) => `/panel/yeni?${new URLSearchParams({ il: k.il, ilce: k.ilce, mahalle: k.mahalle, ada: String(x.ada), parsel: String(x.parsel) })}`;
  return (
    <section className="relative flex h-[100svh] min-h-[640px] flex-col md:min-h-[720px]">
      <div className="relative min-h-0 flex-1">
        <DeskMap controls={false} poster={POSTER} parcels={parcels} pad={{ top: 120, bottom: 80, left: 560, right: 380 }} start={{ center: [28.367, 37.0515], zoom: 15 }} />
        <div className="pointer-events-none absolute inset-0 flex flex-col justify-end p-3 md:p-6 md:pb-[104px]">
          <div className="pointer-events-auto flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
            <div className="max-w-[540px] bg-ink p-4 text-white md:p-7">
              <h1 className="h-display text-[32px] md:text-[60px]">Ada, parsel.<br />Gerisi bizde.</h1>
              <p className="mt-3 hidden max-w-[440px] text-[16.5px] leading-relaxed text-white/85 md:block">Numarayı yazın; tapudaki sınır uydu görüntüsünün üzerine çizilir. Aynı sınırla, Türkçe seslendirmeli dikey bir ilan videosu hazırlarız.</p>
            </div>
            <figure className="hidden w-[190px] shrink-0 md:block">
              <figcaption className="mb-1 bg-ink px-2 py-1 text-[12px] font-semibold text-white">{isDemo ? 'Bu parselin videosu' : 'Örnek: Gökova 101/5'}</figcaption>
              <video src="/ornekler/minimal.mp4" poster="/ornekler/minimal.jpg" autoPlay muted loop playsInline className="block aspect-[9/16] w-full border-[3px] border-white bg-ink object-cover" />
            </figure>
          </div>
        </div>
        <div className="absolute left-3 right-3 top-[64px] bg-ink px-3 py-2 text-white md:left-auto md:right-6 md:top-[84px] md:w-[300px] md:p-4">
          <div className="tag-light hidden md:block">{isDemo ? 'Örnek parsel · TKGM kaydı' : 'TKGM kaydı'}</div>
          <div className="text-[15px] font-bold md:mt-1 md:text-[17px]">{p.mahalle} {p.ada} ada {p.parsel} parsel</div>
          <div className="text-[13px] text-white/80 md:hidden">{m2(p.alan)}{p.nitelik ? ` · ${p.nitelik}` : ''}</div>
          <dl className="mt-2 hidden grid-cols-[92px_1fr] gap-x-2 gap-y-1 text-[13.5px] md:grid">
            <dt className="text-white/55">Yüzölçümü</dt><dd className="num">{m2(p.alan)}</dd>
            {p.nitelik && <><dt className="text-white/55">Nitelik</dt><dd>{p.nitelik}</dd></>}
            {p.mevkii && <><dt className="text-white/55">Mevkii</dt><dd>{p.mevkii}</dd></>}
            <dt className="text-white/55">İl / ilçe</dt><dd>{p.il}, {p.ilce}</dd>
          </dl>
        </div>
      </div>
      <div className="relative z-10 md:absolute md:inset-x-6 md:bottom-6 md:translate-y-0">
        <ParcelBar initial={{ ...demoPick, ada: String(demo.ada), parsel: String(demo.parsel) }} onFound={(x, k) => { setP(x); setPick(k); setIsDemo(false); }} cta={href} />
      </div>
    </section>
  );
}