'use client';
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import type { DeskParcel, PickCfg } from '../DeskMap';
import { RenderStrip, type Active } from './RenderStrip';
import { LogoMark, Wordmark } from '../Logo';
const DeskMap = dynamic(() => import('../DeskMap').then((m) => m.DeskMap), { ssr: false, loading: () => <div className="h-full w-full bg-[#2a2f28]" /> });

type Focus = { parcels: DeskParcel[]; compare?: boolean } | null;
const Ctx = createContext<{ setFocus: (f: Focus) => void; setPick: (p: PickCfg | null) => void }>({ setFocus: () => {}, setPick: () => {} });
export const useDesk = () => useContext(Ctx);
/** Sayfa açıkken haritanın neyi göstereceğini belirler; sayfadan çıkınca kullanıcının tüm parsellerine döner. */
export function DeskFocus({ parcels, compare }: { parcels: DeskParcel[]; compare?: boolean }) {
  const { setFocus } = useDesk();
  const key = parcels.map((p) => p.key + (p.label || '')).join('|') + compare;
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => { setFocus({ parcels, compare }); return () => setFocus(null); }, [key]);
  return null;
}
/** Haritada yapı seçme kipi. Odağı (parselleri) değiştirmez; seçim her değiştiğinde harita yeniden konumlanmaz. */
export function DeskPick({ pick }: { pick: PickCfg | null }) {
  const { setPick } = useDesk();
  useEffect(() => { setPick(pick); }, [pick, setPick]);
  useEffect(() => () => setPick(null), [setPick]);
  return null;
}

const NAV: [string, string][] = [['/panel', 'Parsellerim'], ['/panel/yeni', 'Yeni video'], ['/panel/musteriler', 'Müşteriler'], ['/panel/odemeler', 'Kredi'], ['/panel/davet', 'Davet'], ['/panel/ayarlar', 'Hesap']];

/**
 * Panel = harita masası. Masaüstünde harita tüm ekranı kaplar, içerik soldaki düz beyaz panelde akar,
 * üretimdeki videolar alttaki şeritte izlenir. Telefonda harita üstte, panel altında.
 */
// adminHref sunucudan yalnızca yöneticiye gelir: gizli yönetim adresi istemci koduna gömülmez
export function Desk({ all, active, credits, adminHref, banner, children }: { all: DeskParcel[]; active: Active[]; credits: number; adminHref?: string; banner?: React.ReactNode; children: React.ReactNode }) {
  const [focus, setFocusState] = useState<Focus>(null);
  const setFocus = useCallback((f: Focus) => setFocusState(f), []);
  const [pick, setPickState] = useState<PickCfg | null>(null);
  const setPick = useCallback((p: PickCfg | null) => setPickState(p), []);
  const path = usePathname(); const router = useRouter();
  const wide = path.startsWith('/panel/yeni') || path.startsWith('/panel/siparisler');
  const parcels = focus?.parcels ?? all;
  const onSelect = useCallback((k: string) => router.push(`/panel/siparisler/${k}`), [router]);
  const ctx = useMemo(() => ({ setFocus, setPick }), [setFocus, setPick]);
  const W = wide ? 520 : 420;
  return (
    <Ctx.Provider value={ctx}>
      <div className="md:h-[100svh] md:overflow-hidden">
        <div className="relative h-[42svh] min-h-[260px] md:fixed md:inset-0 md:h-auto">
          <DeskMap parcels={parcels} pick={focus ? pick : null} compare={!!focus?.compare} onSelect={focus ? undefined : onSelect} pad={{ left: W + 70, right: 70, top: 70, bottom: active.length ? 170 : 70 }} />
          {!all.length && !focus && <div className="pointer-events-none absolute inset-x-0 bottom-3 text-center md:bottom-auto md:left-[460px] md:right-auto md:top-6 md:text-left"><span className="bg-ink px-2 py-1 text-[12.5px] font-semibold text-white">Parselleriniz burada, sınırlarıyla görünecek.</span></div>}
        </div>
        <aside data-desk className="relative z-10 flex flex-col bg-white md:absolute md:bottom-4 md:left-4 md:top-4 md:overflow-hidden">
          <style>{`@media (min-width:768px){aside[data-desk]{width:${W}px}}`}</style>
          <header className="flex items-center justify-between gap-3 border-b border-ink/15 px-4 py-3">
            <Link href="/panel" className="inline-flex items-center gap-2" aria-label="ParselStüdyo panel">
              <LogoMark size={22} />
              <Wordmark className="text-[17px]" />
            </Link>
            <Link href="/panel/odemeler" className="flex items-baseline gap-1.5 bg-ink px-2.5 py-1 text-white"><b className="num text-[16px]">{credits}</b><span className="text-[12px] text-white/70">kredi</span></Link>
          </header>
          <nav className="flex overflow-x-auto border-b border-ink/15 px-2">
            {[...NAV, ...(adminHref ? [[adminHref, 'Yönetim'] as [string, string]] : [])].map(([h, l]) => {
              const on = h === '/panel' ? path === '/panel' || path.startsWith('/panel/siparisler') : path.startsWith(h);
              return <Link key={h} href={h} className={`shrink-0 border-b-2 px-2.5 py-2.5 font-narrow text-[12.5px] font-semibold uppercase tracking-[0.06em] ${on ? 'border-signal text-ink' : 'border-transparent text-ink-soft hover:text-ink'}`}>{l}</Link>;
            })}
          </nav>
          {banner}
          <div className="min-h-0 flex-1 md:overflow-y-auto">{children}</div>
        </aside>
        {active.length > 0 && <RenderStrip items={active} left={W + 32} />}
      </div>
    </Ctx.Provider>
  );
}