"use client";

import dynamic from "next/dynamic";
import Image from "next/image";
import Link from "next/link";
import type { PointerEvent } from "react";
import { useCallback, useEffect, useId, useRef, useState } from "react";
import type { HeroSystemLayer, HeroSystemSceneProps } from "./HeroSystemScene";

const DynamicScene = dynamic<HeroSystemSceneProps>(
  () => import("./HeroSystemScene"),
  { ssr: false },
);

const LAYERS: { id: HeroSystemLayer; label: string; description: string }[] = [
  {
    id: "overview",
    label: "Visão geral",
    description:
      "Da tela ao que acontece por trás: interface, integrações e dados trabalhando juntos.",
  },
  {
    id: "interface",
    label: "Interface",
    description:
      "A parte que as pessoas usam. Aqui, uma tela real do NutriScan, projeto do portfólio.",
  },
  {
    id: "integrations",
    label: "Integrações",
    description:
      "Conexões entre sistemas para levar informações de uma etapa da operação à próxima.",
  },
  {
    id: "data",
    label: "Dados",
    description:
      "A base que organiza e guarda as informações de que a operação precisa.",
  },
];

const REST_POSE = { x: 0, y: 0 };
type Gesture = {
  id: number;
  x: number;
  y: number;
  startPose: number;
  width: number;
  dragging: boolean;
};

export default function HeroSystem() {
  const descriptionId = useId();
  const viewportRef = useRef<HTMLDivElement>(null);
  const frameRef = useRef<number | null>(null);
  const nextPoseRef = useRef(REST_POSE);
  const gestureRef = useRef<Gesture | null>(null);
  const suppressClickRef = useRef(false);
  const [activeLayer, setActiveLayer] = useState<HeroSystemLayer>("overview");
  const [pose, setPose] = useState(REST_POSE);
  const [canRender, setCanRender] = useState(false);
  const [ready, setReady] = useState(false);
  const [failed, setFailed] = useState(false);
  const [visible, setVisible] = useState(false);
  const renderScene = canRender && !failed;
  const sceneActive = renderScene && ready;

  useEffect(() => {
    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
    let supported: boolean | undefined;
    const updateCapability = () => {
      if (preference.matches) {
        setCanRender(false);
        setReady(false);
        return;
      }
      if (supported === undefined) {
        if (typeof window.WebGL2RenderingContext === "undefined") {
          supported = false;
        } else {
          try {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("webgl2");
            supported = context !== null;
            context?.getExtension("WEBGL_lose_context")?.loseContext();
          } catch {
            supported = false;
          }
        }
      }
      setCanRender(supported);
    };
    updateCapability();
    preference.addEventListener("change", updateCapability);
    return () => preference.removeEventListener("change", updateCapability);
  }, []);

  useEffect(() => {
    const viewport = viewportRef.current;
    if (!viewport) return;
    let intersecting = false;
    const updateVisibility = () => {
      setVisible(intersecting && document.visibilityState === "visible");
    };
    const observer = new IntersectionObserver(([entry]) => {
      intersecting = entry.isIntersecting;
      updateVisibility();
    });
    observer.observe(viewport);
    document.addEventListener("visibilitychange", updateVisibility);
    return () => {
      observer.disconnect();
      document.removeEventListener("visibilitychange", updateVisibility);
    };
  }, []);

  const queuePose = useCallback((x: number, y: number) => {
    nextPoseRef.current = {
      x: Math.max(-1, Math.min(1, x)),
      y: Math.max(-1, Math.min(1, y)),
    };
    if (frameRef.current !== null) return;
    frameRef.current = window.requestAnimationFrame(() => {
      frameRef.current = null;
      setPose(nextPoseRef.current);
    });
  }, []);

  const releaseGesture = useCallback(() => {
    const gesture = gestureRef.current;
    gestureRef.current = null;
    const viewport = viewportRef.current;
    if (gesture && viewport?.hasPointerCapture(gesture.id)) {
      viewport.releasePointerCapture(gesture.id);
    }
  }, []);

  useEffect(() => {
    if (!sceneActive || !visible) {
      releaseGesture();
      if (frameRef.current !== null)
        window.cancelAnimationFrame(frameRef.current);
      frameRef.current = null;
      nextPoseRef.current = REST_POSE;
      setPose(REST_POSE);
    }
    return () => {
      releaseGesture();
      if (frameRef.current !== null)
        window.cancelAnimationFrame(frameRef.current);
      frameRef.current = null;
    };
  }, [sceneActive, visible, releaseGesture]);

  const handleReady = useCallback(() => setReady(true), []);
  const handleError = useCallback(() => {
    setFailed(true);
    setReady(false);
  }, []);
  const selectSceneLayer = useCallback((layer: HeroSystemLayer) => {
    if (!suppressClickRef.current) setActiveLayer(layer);
  }, []);

  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
    if (!sceneActive || !visible || !event.isPrimary || event.button !== 0)
      return;
    suppressClickRef.current = false;
    gestureRef.current = {
      id: event.pointerId,
      x: event.clientX,
      y: event.clientY,
      startPose: nextPoseRef.current.x,
      width: event.currentTarget.clientWidth,
      dragging: false,
    };
  };

  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
    if (!sceneActive || !visible) return;
    const gesture = gestureRef.current;
    if (gesture && gesture.id === event.pointerId) {
      const dx = event.clientX - gesture.x;
      const dy = event.clientY - gesture.y;
      if (!gesture.dragging) {
        if (Math.abs(dy) > 7 && Math.abs(dy) > Math.abs(dx)) {
          releaseGesture();
          return;
        }
        if (Math.abs(dx) < 7) return;
        gesture.dragging = true;
        suppressClickRef.current = true;
        event.currentTarget.setPointerCapture(event.pointerId);
      }
      queuePose(gesture.startPose + (dx / Math.max(gesture.width, 1)) * 3, 0);
      return;
    }
    if (event.pointerType !== "mouse" || event.buttons !== 0) return;
    const bounds = event.currentTarget.getBoundingClientRect();
    queuePose(
      ((event.clientX - bounds.left) / Math.max(bounds.width, 1)) * 2 - 1,
      ((event.clientY - bounds.top) / Math.max(bounds.height, 1)) * 2 - 1,
    );
  };

  const cancelGesture = () => {
    releaseGesture();
    if (sceneActive && visible) queuePose(0, 0);
  };

  return (
    <div className="hero-system min-w-0 w-full">
      <div
        ref={viewportRef}
        className="hero-system-viewport relative isolate h-[350px] w-full overflow-hidden sm:h-[400px] lg:h-[440px]"
        style={{
          touchAction: "pan-y",
          cursor: sceneActive ? "grab" : undefined,
        }}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={releaseGesture}
        onPointerCancel={cancelGesture}
        onLostPointerCapture={releaseGesture}
        onPointerLeave={() => {
          if (!gestureRef.current?.dragging) cancelGesture();
        }}
        onClickCapture={(event) => {
          if (suppressClickRef.current) event.stopPropagation();
        }}
      >
        <div
          className={`absolute inset-0 flex items-center px-sp-3 ${sceneActive ? "pointer-events-none opacity-0" : "opacity-100"}`}
          aria-hidden={sceneActive}
        >
          <div className="w-full">
            <div className="mb-sp-3 flex items-center justify-between gap-sp-3 text-[12px] text-white/65">
              <span className="font-medium text-[#f4f2ed]">
                Interface real: NutriScan
              </span>
            </div>
            <div className="relative block aspect-[2/1] overflow-hidden rounded-lg border border-white/15 bg-[#151a16] shadow-[0_24px_70px_rgba(0,0,0,0.45)]">
              <Image
                src="/assets/notebook/nutriscan.webp"
                alt="Tela real do projeto NutriScan."
                fill
                priority
                sizes="(min-width: 1024px) 44vw, 92vw"
                className="object-cover object-top"
              />
            </div>
          </div>
        </div>
        {renderScene && (
          <div
            aria-hidden="true"
            className={`absolute inset-0 ${sceneActive ? "opacity-100" : "pointer-events-none opacity-0"}`}
          >
            <DynamicScene
              activeLayer={activeLayer}
              pose={pose}
              visible={visible}
              onReady={handleReady}
              onError={handleError}
              onSelectLayer={selectSceneLayer}
            />
          </div>
        )}
        {sceneActive && (
          <p className="pointer-events-none absolute inset-x-0 bottom-sp-3 text-center text-[12px] text-white/60">
            <span className="hidden sm:inline">
              Mova ou arraste para explorar
            </span>
            <span className="sm:hidden">
              Arraste para os lados para explorar
            </span>
          </p>
        )}
      </div>

      <div className="relative px-sp-1 sm:px-sp-3">
        <fieldset
          aria-label="Explorar camadas do sistema"
          className="grid grid-cols-2 gap-1 min-[400px]:grid-cols-4"
        >
          {LAYERS.map((layer) => (
            <button
              key={layer.id}
              type="button"
              aria-pressed={activeLayer === layer.id}
              aria-controls={descriptionId}
              onClick={() => {
                suppressClickRef.current = false;
                setActiveLayer(layer.id);
                if (layer.id === "overview" && sceneActive && visible)
                  queuePose(0, 0);
              }}
              className={`min-h-11 px-sp-2 py-sp-2 text-[12px] font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)] motion-reduce:transition-none sm:text-[13px] ${activeLayer === layer.id ? "bg-[var(--slash)] text-[var(--ink)]" : "bg-white/5 text-white/75 hover:bg-white/10 hover:text-white"}`}
            >
              {layer.label}
            </button>
          ))}
        </fieldset>
        <p
          id={descriptionId}
          aria-live="polite"
          aria-atomic="true"
          className="mt-sp-3 min-h-[4.5em] text-[13px] leading-[1.5] text-white/75 sm:min-h-[3em]"
        >
          {LAYERS.find((layer) => layer.id === activeLayer)?.description}
        </p>
        <div className="mt-sp-1 flex flex-wrap items-center justify-between gap-x-sp-3">
          <p className="max-w-[230px] text-[11px] leading-[1.5] text-white/55">
            Camadas ilustrativas de um sistema
          </p>
          <Link
            href="/cases/nutriscan"
            className="inline-flex min-h-11 items-center text-[12px] font-medium text-[#f4f2ed] underline decoration-white/35 underline-offset-4 hover:decoration-[var(--slash)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--slash)]"
          >
            Interface real: NutriScan
          </Link>
        </div>
      </div>
    </div>
  );
}