"use client";

/*
 * A gaveta do estoque: entra pela direita no computador e sobe de baixo no
 * celular (o mesmo gesto da gaveta do cupom). Esc e o clique fora fecham.
 */

import { useEffect, useState, type ReactNode } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { X } from "lucide-react";

export function Gaveta({
  aberta,
  aoFechar,
  sobretitulo,
  titulo,
  subtitulo,
  topo,
  rodape,
  largura = 760,
  children,
  rotulo,
}: {
  aberta: boolean;
  aoFechar: () => void;
  sobretitulo?: ReactNode;
  titulo: ReactNode;
  subtitulo?: ReactNode;
  /** Ações e números logo abaixo do título (fixos ao rolar). */
  topo?: ReactNode;
  rodape?: ReactNode;
  largura?: number;
  children: ReactNode;
  rotulo: string;
}) {
  const [noComputador, setNoComputador] = useState(false);
  useEffect(() => {
    const consulta = window.matchMedia("(min-width: 768px)");
    const ler = () => setNoComputador(consulta.matches);
    ler();
    consulta.addEventListener("change", ler);
    return () => consulta.removeEventListener("change", ler);
  }, []);

  useEffect(() => {
    if (!aberta) return;
    const teclar = (e: KeyboardEvent) => {
      /* Com uma janela aberta por cima, o Esc é dela. */
      if (e.key === "Escape" && !document.querySelector("[data-janela-do-estoque], [role='dialog'][aria-modal='true']:not([data-gaveta-do-estoque])")) aoFechar();
    };
    window.addEventListener("keydown", teclar);
    return () => window.removeEventListener("keydown", teclar);
  }, [aberta, aoFechar]);

  return (
    <AnimatePresence>
      {aberta ? (
        <motion.div
          key="fundo"
          className="fixed inset-0 z-[110] bg-[rgba(12,8,24,0.42)] backdrop-blur-[2px]"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={aoFechar}
        >
          <motion.aside
            role="dialog"
            aria-modal="true"
            aria-label={rotulo}
            data-gaveta-do-estoque=""
            onClick={(e) => e.stopPropagation()}
            style={noComputador ? { width: `min(${largura}px, 100vw)` } : undefined}
            className="absolute inset-x-0 bottom-0 flex h-[94dvh] flex-col overflow-hidden rounded-t-[22px] bg-[var(--ks-color-bg-body)] shadow-[var(--ks-shadow-overlay)] md:inset-y-0 md:left-auto md:right-0 md:h-full md:rounded-none md:rounded-l-[22px]"
            initial={noComputador ? { x: "100%" } : { y: "100%" }}
            animate={{ x: 0, y: 0 }}
            exit={noComputador ? { x: "100%" } : { y: "100%" }}
            transition={{ type: "spring", stiffness: 360, damping: 36 }}
          >
            <header className="shrink-0 border-b border-[var(--ks-color-border-subtle)] bg-white">
              <div className="mx-auto mt-2 h-1.5 w-10 rounded-full bg-[var(--ks-n-200)] md:hidden" aria-hidden />
              <div className="flex items-start justify-between gap-3 px-5 pb-3 pt-3 sm:px-6 md:pt-5">
                <div className="min-w-0">
                  {sobretitulo ? (
                    <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">{sobretitulo}</p>
                  ) : null}
                  <h2 className="truncate text-lg font-extrabold tracking-tight text-[var(--ks-color-text-primary)]">{titulo}</h2>
                  {subtitulo ? <div className="mt-0.5 text-[13px] text-[var(--ks-color-text-muted)]">{subtitulo}</div> : null}
                </div>
                <button type="button" onClick={aoFechar} className="ks-icon-button shrink-0" aria-label="Fechar">
                  <X size={18} />
                </button>
              </div>
              {topo ? <div className="px-5 pb-3 sm:px-6">{topo}</div> : null}
            </header>
            <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
            {rodape ? <footer className="shrink-0 border-t border-[var(--ks-color-border-subtle)] bg-white px-5 py-3 sm:px-6">{rodape}</footer> : null}
          </motion.aside>
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}

/*
 * A janela de uma ação (entrada, contagem, produção): centralizada no
 * computador, folha de baixo no celular. Fica acima da gaveta.
 */
export function Janela({
  aberta,
  aoFechar,
  titulo,
  texto,
  rodape,
  largura = 640,
  children,
}: {
  aberta: boolean;
  aoFechar: () => void;
  titulo: ReactNode;
  texto?: ReactNode;
  rodape?: ReactNode;
  largura?: number;
  children: ReactNode;
}) {
  useEffect(() => {
    if (!aberta) return;
    const teclar = (e: KeyboardEvent) => {
      if (e.key === "Escape") aoFechar();
    };
    window.addEventListener("keydown", teclar);
    return () => window.removeEventListener("keydown", teclar);
  }, [aberta, aoFechar]);

  /* Sem animação de saída de propósito: a janela some na hora em que fecha
     (a saída animada chegou a ficar presa na tela). */
  if (!aberta) return null;
  return (
        <motion.div
          key="janela"
          data-janela-do-estoque=""
          className="fixed inset-0 z-[125] flex items-end justify-center bg-[rgba(12,8,24,0.42)] backdrop-blur-[2px] sm:items-center sm:p-6"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={aoFechar}
        >
          <motion.div
            role="dialog"
            aria-modal="true"
            onClick={(e) => e.stopPropagation()}
            style={{ maxWidth: largura }}
            className="flex max-h-[92dvh] w-full flex-col overflow-hidden rounded-t-[22px] bg-white shadow-[0_24px_60px_rgba(26,26,43,0.28)] sm:rounded-[20px]"
            initial={{ y: 24, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 24, opacity: 0 }}
            transition={{ type: "spring", stiffness: 420, damping: 36 }}
          >
            <div className="flex items-start justify-between gap-3 px-5 pb-2 pt-5 sm:px-6">
              <div className="min-w-0">
                <h3 className="text-[17px] font-extrabold tracking-tight text-[var(--ks-color-text-primary)]">{titulo}</h3>
                {texto ? <p className="mt-1 text-[13px] leading-5 text-[var(--ks-color-text-muted)]">{texto}</p> : null}
              </div>
              <button type="button" onClick={aoFechar} className="ks-icon-button shrink-0" aria-label="Fechar">
                <X size={18} />
              </button>
            </div>
            <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-4 pt-2 sm:px-6">{children}</div>
            {rodape ? (
              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-subtle)]/40 px-5 py-3 sm:px-6">
                {rodape}
              </div>
            ) : null}
          </motion.div>
        </motion.div>
  );
}