'use client';
/**
 * Globe orchestrator (client-only; loaded through `LazyGlobe`). Owns filters, selection, focus and the overlay UI;
 * the WebGL scene lives in `globe-scene.tsx`. Two variants: `hero` (compact, homepage) and `full` (/explore).
 */
import { Info, SlidersHorizontal } from 'lucide-react';
import { Component, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';
import { activeFilterCount, computeVisibility, DEFAULT_FILTERS, toggleIn, type GlobeFilters } from './filters';
import { FocusSearch, type FocusTarget } from './focus-search';
import { hasWebGL } from './geo';
import { GlobeSkeleton, GlobeUnavailable } from './globe-fallback';
import { GlobeFilterChips } from './globe-filters';
import { GlobeLegend } from './globe-legend';
import { GlobeScene } from './globe-scene';
import { SatPanel } from './sat-panel';
import { lerpFactor, type PickResult } from './satellite-points';
import { usePositions } from './use-positions';

export interface GlobeProps {
  variant?: 'hero' | 'full';
  className?: string;
  /** NORAD to focus once positions are loaded (e.g. `/explore?focus=25544`). */
  initialFocus?: number | null;
}

class SceneBoundary extends Component<{ children: ReactNode; fallback: ReactNode }, { failed: boolean }> {
  state = { failed: false };
  static getDerivedStateFromError() {
    return { failed: true };
  }
  render() {
    return this.state.failed ? this.props.fallback : this.props.children;
  }
}

const ALT_NOTE = 'Altitude scale is compressed for legibility: r = 1 + 0.06 + ln(1 + alt/400 km) × 0.12. Low orbits are exaggerated, MEO/GEO compressed; the GEO ring still reads as a ring.';

function utcClock(ms: number): string {
  const d = new Date(ms);
  return `${String(d.getUTCHours()).padStart(2, '0')}:${String(d.getUTCMinutes()).padStart(2, '0')}:${String(d.getUTCSeconds()).padStart(2, '0')} UTC`;
}

export default function Globe({ variant = 'full', className, initialFocus = null }: GlobeProps) {
  const [webgl] = useState(() => hasWebGL());
  const { data, error, loading } = usePositions(webgl);
  const [filters, setFilters] = useState<GlobeFilters>(DEFAULT_FILTERS);
  const [selected, setSelected] = useState<number | null>(null); // NORAD
  const [focus, setFocus] = useState<FocusTarget | null>(null);
  const [focusRequest, setFocusRequest] = useState(0);
  const [focusMissing, setFocusMissing] = useState<string | null>(null);
  const [filtersOpen, setFiltersOpen] = useState(() => typeof window !== 'undefined' && window.innerWidth >= 1024);
  const initialDone = useRef(false);

  const { flags, visible, flagsVersion } = useMemo(() => {
    if (!data) return { flags: new Float32Array(0), visible: 0, flagsVersion: 0 };
    const f = new Float32Array(data.n);
    const v = computeVisibility(data, filters, f);
    return { flags: f, visible: v, flagsVersion: Date.now() };
  }, [data, filters]);

  const highlightIndex = useMemo(() => {
    if (!data || selected === null) return null;
    const i = data.norad.indexOf(selected);
    return i >= 0 ? i : null;
  }, [data, selected]);

  const isSmall = () => typeof window !== 'undefined' && window.innerWidth < 768;

  // On phones the selection sheet and the filters sheet share the bottom of the screen: keep only one open.
  const select = useCallback((norad: number | null) => {
    setSelected(norad);
    if (norad !== null && isSmall()) setFiltersOpen(false);
  }, []);
  const toggleFilters = () => {
    if (!filtersOpen && isSmall()) setSelected(null);
    setFiltersOpen(!filtersOpen);
  };

  const onPick = useCallback(
    (r: PickResult | null) => {
      if (r) {
        select(r.norad);
        setFocusMissing(null);
      } else select(null);
    },
    [select],
  );

  const focusOn = useCallback(
    (t: FocusTarget) => {
      setFocus(t);
      select(t.norad);
      if (data && data.norad.indexOf(t.norad) < 0) {
        setFocusMissing(`${t.name} is not in the live snapshot (no current element set${data.capped ? ' or hidden by the device cap' : ''}).`);
      } else {
        setFocusMissing(null);
        setFocusRequest((n) => n + 1);
      }
    },
    [data, select],
  );

  useEffect(() => {
    if (!data || initialDone.current || initialFocus === null) return;
    initialDone.current = true;
    focusOn({ norad: initialFocus, name: `NORAD ${initialFocus}`, slug: String(initialFocus) });
  }, [data, initialFocus, focusOn]);

  const clearFocus = () => {
    setFocus(null);
    setSelected(null);
    setFocusMissing(null);
  };

  const panelSnapshot = useMemo(() => {
    if (!data || highlightIndex === null) return { altitudeKm: null, velocityKmS: null, orbitClass: null, active: null };
    const f = Math.min(1, lerpFactor(data, Date.now()));
    const alt = (data.alt0[highlightIndex] ?? 0) + ((data.alt1[highlightIndex] ?? 0) - (data.alt0[highlightIndex] ?? 0)) * f;
    return { altitudeKm: alt, velocityKmS: data.vel[highlightIndex] ?? null, orbitClass: data.legend.cls[data.cls[highlightIndex] ?? 0] ?? null, active: data.active[highlightIndex] === 1 };
  }, [data, highlightIndex]);

  if (!webgl) return <GlobeUnavailable className={className} />;

  const nFilters = activeFilterCount(filters);
  const isHero = variant === 'hero';

  return (
    <div className={cn('relative h-full w-full overflow-hidden', className)}>
      <div className="absolute inset-0">
        <SceneBoundary fallback={<GlobeUnavailable reason="The 3D renderer failed to start on this device." />}>
          <GlobeScene data={data} flags={flags} flagsVersion={flagsVersion} highlight={highlightIndex} focusRequest={focusRequest} focusNorad={isHero ? null : focus?.norad ?? selected} onPick={onPick} variant={variant} />
        </SceneBoundary>
      </div>
      {loading && !data && <GlobeSkeleton className="pointer-events-none absolute inset-0 opacity-70" label="Loading live positions…" />}

      {/* ---- overlays -------------------------------------------------------------------------------------- */}
      {!isHero && (
        <div className="pointer-events-none absolute inset-x-0 top-0 p-3 md:p-4">
          <div className="pointer-events-auto flex flex-wrap items-start gap-2">
            <FocusSearch onPick={focusOn} current={focus} onClear={clearFocus} className="w-full md:w-[380px]" />
            <div className="flex flex-wrap items-center gap-2">
              <button type="button" onClick={toggleFilters} aria-expanded={filtersOpen} aria-controls="globe-filters" className={cn('inline-flex h-11 items-center gap-2 rounded-md border px-3 text-sm backdrop-blur-md', filtersOpen ? 'border-rule-strong bg-plane-3 text-ink' : 'border-rule bg-plane/85 text-ink-2 hover:text-ink')}>
                <SlidersHorizontal className="size-4" aria-hidden /> Filters {nFilters > 0 && <span className="mono rounded bg-accent px-1.5 text-2xs text-accent-ink">{nFilters}</span>}
              </button>
              <div className="mono inline-flex h-11 items-center rounded-md border border-rule bg-plane/85 text-2xs backdrop-blur-md" role="group" aria-label="Time">
                <button type="button" disabled className="h-full px-2.5 text-ink-3 disabled:cursor-not-allowed" title="Time travel is coming soon" aria-label="Minus one hour (soon)">−1h</button>
                <span className="inline-flex h-full items-center gap-1.5 border-x border-rule bg-plane-3 px-3 text-ink"><span className="dot pulse text-active" aria-hidden />Now</span>
                <button type="button" disabled className="h-full px-2.5 text-ink-3 disabled:cursor-not-allowed" title="Time travel is coming soon" aria-label="Plus one hour (soon)">+1h</button>
                <span className="pr-2.5 text-ink-3">soon</span>
              </div>
            </div>
          </div>
          {focusMissing && <p className="pointer-events-auto mt-2 inline-block rounded-md border border-warn/40 bg-warn-soft px-3 py-2 text-xs text-warn">{focusMissing}</p>}
        </div>
      )}

      {!isHero && filtersOpen && (
        <div id="globe-filters" className="panel absolute inset-x-3 bottom-[58px] z-10 max-h-[55%] overflow-y-auto p-4 md:inset-x-auto md:bottom-auto md:left-4 md:top-[124px] md:w-[360px] md:max-h-[calc(100%-190px)]">
          <div className="mb-2 flex items-center justify-between">
            <p className="text-sm font-medium text-ink">Filters</p>
            <button type="button" onClick={() => setFiltersOpen(false)} className="min-h-[36px] px-2 text-xs text-ink-3 hover:text-ink">Close</button>
          </div>
          <GlobeFilterChips data={data} filters={filters} onChange={setFilters} />
        </div>
      )}

      {/* status bar (both variants) */}
      <div className={cn('pointer-events-none absolute inset-x-0 bottom-0 flex flex-wrap items-end justify-between gap-x-3 gap-y-1.5', isHero ? 'bg-gradient-to-t from-space via-space/70 to-transparent px-3 pb-3 pt-10' : 'border-t border-rule bg-space/60 px-3 py-2 backdrop-blur-md md:px-4')}>
        <GlobeLegend data={data} filters={filters} onToggle={(c) => setFilters((f) => ({ ...f, cls: toggleIn(f.cls, c) }))} className="pointer-events-auto" dense={isHero} />
        <div className="mono pointer-events-auto min-w-0 text-2xs leading-4 text-ink-3">
          {data ? (
            <>
              <span className="text-ink-2">{fmtInt(data.total)} objects</span>
              {data.capped && <span> · {fmtInt(data.n)} rendered on this device</span>}
              {nFilters > 0 && <span> · {fmtInt(visible)} shown</span>}
              <span> · positions as of {utcClock(data.t0)}</span>
              {!isHero && <span> · SGP4 from public element sets · refresh 30 s</span>}
              <span className="inline-flex items-center align-middle" title={ALT_NOTE}>
                <Info className="ml-1 size-3.5" aria-hidden />
                <span className="sr-only">{ALT_NOTE}</span>
              </span>
            </>
          ) : error ? (
            <span className="text-warn">{error}</span>
          ) : (
            <span>Loading positions…</span>
          )}
          {!isHero && <p className="mt-0.5 max-w-[60ch] text-ink-3/80">Indicative positions from public element sets; not for operational or safety-critical use.</p>}
        </div>
      </div>

      {selected !== null && (
        <SatPanel norad={selected} snapshot={panelSnapshot} onClose={() => setSelected(null)} className={cn('absolute inset-x-0 bottom-0 z-20 rounded-b-none md:inset-x-auto md:bottom-auto md:right-3 md:top-3 md:w-[340px] md:rounded-xl', isHero ? 'md:top-3' : 'md:top-[76px]')} />
      )}
    </div>
  );
}