portfolio/app/components/fenster/WindowProvider.tsx

"use client";

import { createContext, useCallback, useContext, useEffect, useId, useRef, useState, type RefObject } from "react";
import { AnimatePresence, motion, useDragControls } from "framer-motion";
import { Drawer } from "vaul";
import WindowContent, { windowAccent, windowTitle } from "./WindowContent";
import { windowId, type WindowLabels, type WindowRequest } from "./types";

type OpenWindow = (req: WindowRequest, trigger?: HTMLElement | null) => void;

const WindowContext = createContext<OpenWindow | null>(null);

/** Öffnet ein Fenster (Desktop) oder Sheet (Handy). Ohne Provider passiert nichts. */
export function useOpenWindow(): OpenWindow | null {
  return useContext(WindowContext);
}

interface WinState {
  id: string;
  req: WindowRequest;
  x: number;
  y: number;
  z: number;
  minimized: boolean;
  /** Punkt, von dem aus das Fenster aufgeht (relativ zum Fenster) */
  origin: { x: number; y: number };
  trigger: HTMLElement | null;
}

const WIN_WIDTH = 440;

export default function WindowProvider({ labels, children }: { labels: WindowLabels; children: React.ReactNode }) {
  const [wins, setWins] = useState<WinState[]>([]);
  const [sheet, setSheet] = useState<{ req: WindowRequest; trigger: HTMLElement | null } | null>(null);
  const [sheetOpen, setSheetOpen] = useState(false);
  const layerRef = useRef<HTMLDivElement>(null);
  const zTop = useRef(10);
  const opened = useRef(0);

  const open = useCallback<OpenWindow>((req, trigger = null) => {
    const desktop = window.matchMedia?.("(min-width: 768px)")?.matches ?? true;
    if (!desktop) {
      setSheet({ req, trigger });
      setSheetOpen(true);
      return;
    }
    const id = windowId(req);
    setWins((prev) => {
      const existing = prev.find((w) => w.id === id);
      if (existing) {
        return prev.map((w) => (w.id === id ? { ...w, minimized: false, z: ++zTop.current } : w));
      }
      const W = window.innerWidth;
      const H = window.innerHeight;
      const width = Math.min(WIN_WIDTH, W - 32);
      const step = opened.current++ % 5;
      const x = Math.max(16, Math.min(W - width - 16, W / 2 - width / 2 + step * 34 - 60));
      const y = Math.max(76, Math.min(H - 420, H * 0.16 + step * 30));
      const r = trigger?.getBoundingClientRect();
      const origin = r ? { x: r.left + r.width / 2 - x, y: r.top + r.height / 2 - y } : { x: width / 2, y: 0 };
      return [...prev, { id, req, x, y, z: ++zTop.current, minimized: false, origin, trigger }];
    });
  }, []);

  const close = useCallback((id: string) => {
    setWins((prev) => {
      const w = prev.find((x) => x.id === id);
      // Fokus zurück dorthin, wo das Fenster herkam
      if (w?.trigger?.isConnected) requestAnimationFrame(() => w.trigger?.focus({ preventScroll: true }));
      return prev.filter((x) => x.id !== id);
    });
  }, []);

  const minimize = useCallback((id: string) => {
    setWins((prev) => prev.map((w) => (w.id === id ? { ...w, minimized: true } : w)));
  }, []);

  const focusWin = useCallback((id: string) => {
    setWins((prev) => {
      const top = prev.reduce((a, b) => (b.z > a.z ? b : a), prev[0]);
      // Schon vorn und sichtbar: nichts zu tun (ein abgelegtes Fenster muss trotzdem zurück)
      if (top?.id === id && !top.minimized) return prev;
      return prev.map((w) => (w.id === id ? { ...w, z: ++zTop.current, minimized: false } : w));
    });
  }, []);

  // Escape schließt das oberste offene Fenster
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "Escape") return;
      const visible = wins.filter((w) => !w.minimized);
      if (!visible.length) return;
      const top = visible.reduce((a, b) => (b.z > a.z ? b : a));
      close(top.id);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [wins, close]);

  return (
    <WindowContext.Provider value={open}>
      {children}

      {/* Desktop: Fenster schweben über der Seite, die Seite bleibt bedienbar */}
      <div ref={layerRef} className="pointer-events-none fixed inset-0 z-[60]" aria-live="off">
        <AnimatePresence>
          {wins
            .filter((w) => !w.minimized)
            .map((w) => (
              <Window
                key={w.id}
                win={w}
                labels={labels}
                layerRef={layerRef}
                onClose={() => close(w.id)}
                onMinimize={() => minimize(w.id)}
                onFocus={() => focusWin(w.id)}
              />
            ))}
        </AnimatePresence>
      </div>

      <AnimatePresence>
        {wins.length > 0 && (
          <motion.nav
            aria-label={labels.openWindows}
            className="fixed bottom-[18px] left-1/2 z-[61] hidden max-w-[calc(100vw-32px)] gap-1.5 overflow-x-auto rounded-full bg-ink p-1.5 md:flex"
            style={{ x: "-50%" }}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }}
            transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
          >
            {wins.map((w) => (
              <button
                key={w.id}
                type="button"
                onClick={() => focusWin(w.id)}
                className={`inline-flex items-center gap-2 whitespace-nowrap rounded-full px-3.5 py-2 text-[13px] font-medium transition-[background-color,transform] duration-150 ease-out hover:bg-paper/15 active:scale-[0.97] ${
                  w.minimized ? "text-paper/60" : "text-paper"
                }`}
              >
                <span className="h-2 w-2 rounded-full border border-paper/40" style={{ background: windowAccent(w.req) }} aria-hidden="true" />
                {windowTitle(w.req, labels).split(" · ")[0]}
              </button>
            ))}
          </motion.nav>
        )}
      </AnimatePresence>

      {/* Handy: ein Sheet von unten, nach unten ziehen schließt */}
      <Drawer.Root
        open={sheetOpen}
        onOpenChange={(o) => {
          setSheetOpen(o);
          if (!o && sheet?.trigger?.isConnected) requestAnimationFrame(() => sheet.trigger?.focus({ preventScroll: true }));
        }}
      >
        <Drawer.Portal>
          <Drawer.Overlay className="fixed inset-0 z-[70] bg-ink/40" />
          <Drawer.Content
            className="fixed inset-x-0 bottom-0 z-[71] flex max-h-[88svh] flex-col rounded-t-[22px] border-2 border-b-0 border-ink bg-paper text-ink outline-none"
            aria-describedby={undefined}
          >
            <Drawer.Handle className="!mt-2.5 !h-[5px] !w-11 !bg-ink/30" />
            {sheet && (
              <>
                <div className="flex items-center gap-3 border-b-2 border-ink px-5 pb-3 pt-2">
                  <Drawer.Title className="flex-1 truncate font-mono text-[13px] font-normal">{windowTitle(sheet.req, labels)}</Drawer.Title>
                  <Drawer.Close
                    className="grid h-8 w-8 place-items-center rounded-full border-2 border-ink text-[15px] font-semibold transition-transform duration-150 ease-out active:scale-95"
                    aria-label={labels.close}
                  >
                    ×
                  </Drawer.Close>
                </div>
                <div className="grid gap-4 overflow-y-auto overscroll-contain p-5 pb-[calc(20px+env(safe-area-inset-bottom,0px))]">
                  <WindowContent req={sheet.req} labels={labels} onClose={() => setSheetOpen(false)} />
                </div>
              </>
            )}
          </Drawer.Content>
        </Drawer.Portal>
      </Drawer.Root>
    </WindowContext.Provider>
  );
}

interface WindowProps {
  win: WinState;
  labels: WindowLabels;
  layerRef: RefObject<HTMLDivElement | null>;
  onClose: () => void;
  onMinimize: () => void;
  onFocus: () => void;
}

function Window({ win, labels, layerRef, onClose, onMinimize, onFocus }: WindowProps) {
  const controls = useDragControls();
  const [lifted, setLifted] = useState(false);
  const closeRef = useRef<HTMLButtonElement>(null);
  const titleId = useId();

  useEffect(() => {
    closeRef.current?.focus({ preventScroll: true });
  }, []);

  return (
    <motion.div
      role="dialog"
      aria-labelledby={titleId}
      drag
      dragListener={false}
      dragControls={controls}
      dragConstraints={layerRef}
      dragElastic={0.15}
      dragTransition={{ power: 0.3, timeConstant: 300, bounceStiffness: 260, bounceDamping: 24 }}
      onDragStart={() => setLifted(true)}
      onDragEnd={() => setLifted(false)}
      onPointerDown={onFocus}
      initial={{ opacity: 0, scale: 0.86 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.96, transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] } }}
      transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
      className={`pointer-events-auto fixed flex max-h-[calc(100vh-120px)] w-[min(440px,calc(100vw-32px))] flex-col rounded-[18px] border-2 border-ink bg-paper text-ink transition-shadow duration-200 ease-out ${
        lifted ? "shadow-[16px_18px_0_rgb(var(--plakat-ink))]" : "shadow-[8px_8px_0_rgb(var(--plakat-ink))]"
      }`}
      style={{ left: win.x, top: win.y, zIndex: win.z, transformOrigin: `${win.origin.x}px ${win.origin.y}px` }}
    >
      <div
        className="flex cursor-grab touch-none select-none items-center gap-2.5 border-b-2 border-ink py-2.5 pl-4 pr-2.5 active:cursor-grabbing"
        onPointerDown={(e) => {
          if ((e.target as HTMLElement).closest("button")) return;
          controls.start(e);
        }}
      >
        <span id={titleId} className="flex-1 truncate font-mono text-[13px]">
          {windowTitle(win.req, labels)}
        </span>
        <HeadButton label={labels.minimize} onClick={onMinimize}>
          –
        </HeadButton>
        <HeadButton label={labels.close} onClick={onClose} buttonRef={closeRef}>
          ×
        </HeadButton>
      </div>
      <div className="grid gap-4 overflow-y-auto overscroll-contain p-5">
        <WindowContent req={win.req} labels={labels} onClose={onClose} />
      </div>
    </motion.div>
  );
}

function HeadButton({
  label,
  onClick,
  buttonRef,
  children,
}: {
  label: string;
  onClick: () => void;
  buttonRef?: RefObject<HTMLButtonElement | null>;
  children: React.ReactNode;
}) {
  return (
    <button
      ref={buttonRef}
      type="button"
      aria-label={label}
      onClick={onClick}
      className="grid h-[30px] w-[30px] place-items-center rounded-full border-2 border-ink bg-paper text-[15px] font-semibold transition-[background-color,transform] duration-150 ease-out hover:bg-signal active:scale-[0.94]"
    >
      <span aria-hidden="true">{children}</span>
    </button>
  );
}