import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Link from 'next/link';
import { prisma } from '@/lib/db';
import { Logo } from '@/components/Logo';
import { StaticDeskMap } from '@/components/StaticDeskMap';
import { TourButton } from '@/components/TourButton';
import { apLong, hasAda } from '@/lib/ap';

async function load(token: string) {
  if (!/^[\w-]{8,24}$/.test(token)) return null;
  const o = await prisma.order.findUnique({ where: { shareToken: token } });
  return o && o.status === 'DELIVERED' ? o : null;
}
const title = (o: { ada: string; parsel: string; mahalle: string; ilce: string; il: string; nitelik: string | null }) => `${o.mahalle}, ${o.ilce} · ${apLong(o.ada, o.parsel)}${o.nitelik ? ` · ${o.nitelik}` : ''}`;
export async function generateMetadata({ params }: { params: Promise<{ token: string }> }): Promise<Metadata> {
  const o = await load((await params).token); if (!o) return { title: 'Video bulunamadı' };
  const t = title(o); const d = `${o.il} · ${o.areaM2 ? `${Math.round(o.areaM2).toLocaleString('tr-TR')} m²` : ''} ${o.headline || ''}`.trim();
  const img = `/api/izle/${o.shareToken}?f=poster`;
  return { title: t, description: d, robots: { index: false }, openGraph: { title: t, description: d, images: [img], type: 'video.other', videos: [{ url: `/api/izle/${o.shareToken}`, type: 'video/mp4', width: 1080, height: 1920 }] }, twitter: { card: 'summary_large_image', title: t, images: [img] } };
}
export default async function Izle({ params }: { params: Promise<{ token: string }> }) {
  const { token } = await params;
  const o = await load(token); if (!o) notFound();
  // izlenme: sayfa açılışında bir artış (bot/önizleme ayıklaması yok; kaba gösterge)
  prisma.order.update({ where: { id: o.id }, data: { views: { increment: 1 } } }).catch(() => {});
  const tel = (o.contactPhone || '').replace(/[^\d+]/g, '');
  const wa = tel ? `https://wa.me/${tel.replace(/^\+/, '').replace(/^0/, '90')}?text=${encodeURIComponent(`Merhaba, ${o.mahalle} ${apLong(o.ada, o.parsel)} hakkında bilgi almak istiyorum.`)}` : null;
  const facts: [string, string | null][] = [['Konum', `${o.mahalle}, ${o.ilce} / ${o.il}`], hasAda(o.ada) ? ['Ada / parsel', `${o.ada} / ${o.parsel}`] : ['Parsel', o.parsel], ['Yüzölçümü', o.areaM2 ? `${Math.round(o.areaM2).toLocaleString('tr-TR')} m²` : null], ['Nitelik', o.nitelik], ['İmar', [o.imarDurum, o.emsal && `Emsal ${o.emsal}`, o.taks && `TAKS ${o.taks}`, o.gabari && `Gabari ${o.gabari}`].filter(Boolean).join(' · ') || null]];
  const area = o.areaM2 ? `${Math.round(o.areaM2).toLocaleString('tr-TR')} m²` : null;
  return (
    <div className="bg-ink md:relative md:h-[100svh] md:overflow-hidden">
      <div className="relative h-[55svh] md:absolute md:inset-0 md:h-auto">
        {o.geometry ? <StaticDeskMap geometry={o.geometry as never} label={area || undefined} pad={{ left: 470, right: 380, top: 90, bottom: 140 }} /> : <div className="h-full bg-[#2a2f28]" />}
      </div>
      <div className="absolute left-3 top-3 bg-white px-3 py-2 md:left-auto md:right-[60px] md:top-6"><Logo /></div>
      <section className="relative z-10 bg-ink text-white md:absolute md:bottom-6 md:left-6 md:top-6 md:flex md:w-[400px] md:flex-col">
        <video src={`/api/izle/${o.shareToken}`} poster={`/api/izle/${o.shareToken}?f=poster`} controls playsInline preload="metadata" className="mx-auto block aspect-[9/16] max-h-[78svh] w-full bg-black object-contain md:max-h-none md:min-h-0 md:flex-1" />
        <div className="p-4">
          <div className="tag-light">Satılık {o.nitelik?.toLocaleLowerCase('tr-TR') || 'parsel'}</div>
          <h1 className="mt-0.5 text-[22px] font-extrabold leading-tight">{o.headline || `${o.mahalle}, ${apLong(o.ada, o.parsel)}`}</h1>
        </div>
      </section>
      <dl className="relative z-10 bg-white md:absolute md:right-[60px] md:top-[84px] md:w-[320px]">
        {facts.filter(([, v]) => v).map(([k, v]) => <div key={k} className="grid grid-cols-[96px_1fr] gap-2 border-b border-ink/10 px-4 py-2"><dt className="tag pt-0.5">{k}</dt><dd className="text-[14px]">{v}</dd></div>)}
        {o.highlights.length > 0 && <div className="px-4 py-2 text-[13.5px]">{o.highlights.join(' · ')}</div>}
      </dl>
      {o.tourKey && (
        <div className="relative z-10 border-t border-white/10 bg-ink px-4 py-3 md:absolute md:bottom-[88px] md:left-[440px] md:right-6 md:border-0 md:bg-transparent md:p-0">
          <TourButton src={`/api/izle/${o.shareToken}/tour`} className="w-full bg-signal px-4 py-3 text-[15px] font-bold text-ink" />
        </div>
      )}
      {(o.contactName || tel) && (
        <div className="cells sticky bottom-0 z-20 grid-cols-2 md:absolute md:bottom-6 md:left-[440px] md:right-6 md:grid-cols-[1fr_auto_auto]">
          <div className="cell col-span-2 border-b md:col-span-1 md:border-b-0 md:border-r"><span className="tag">İlan sahibi</span><span className="truncate text-[17px] font-bold">{o.contactName || o.contactPhone}</span></div>
          {tel && <a href={`tel:${tel}`} className="flex items-center justify-center bg-ink px-5 py-3 text-[15px] font-bold text-white">Ara{o.contactPhone ? ` · ${o.contactPhone}` : ''}</a>}
          {wa && <a href={wa} target="_blank" rel="noopener" className="flex items-center justify-center bg-signal px-5 py-3 text-[15px] font-bold text-ink">WhatsApp</a>}
        </div>
      )}
      <p className="relative z-10 bg-ink px-4 py-3 text-[11.5px] text-white/60 md:absolute md:bottom-1 md:left-[440px] md:bg-transparent md:p-0 md:[text-shadow:0_1px_2px_#000]">Parsel sınırı TKGM kaydından alınmıştır. Video <Link href="/" className="underline">ParselStüdyo</Link> ile hazırlandı.</p>
    </div>
  );
}