import { ChevronUp, X } from "lucide-react";
import { useEffect, useState, type ReactNode } from "react";

import { useIsMobile } from "@/lib/useMediaQuery";

/**
 * DESIGN.md responsive breakpoints: below 768px metadata panels collapse into
 * a sliding bottom drawer. Render the panel content inline on wider screens
 * and pass it here instead on mobile.
 */
export function BottomSheet({
  title,
  children,
}: {
  title: string;
  children: ReactNode;
}) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!open) return;
    const previous = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") setOpen(false);
    }
    window.addEventListener("keydown", handleKeyDown);
    return () => {
      document.body.style.overflow = previous;
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [open]);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="fixed bottom-12 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-ctp-surface1 bg-ctp-surface0/95 px-4 py-2 text-xs font-medium text-ctp-subtext1 shadow-[0_4px_12px_rgba(17,17,27,0.6)] backdrop-blur transition hover:text-ctp-text"
      >
        <ChevronUp className="h-3.5 w-3.5" />
        {title}
      </button>

      {open ? (
        <div className="fixed inset-0 z-50" role="dialog" aria-modal="true">
          <div
            className="absolute inset-0 bg-ctp-crust/60 backdrop-blur-sm"
            onClick={() => setOpen(false)}
            aria-hidden="true"
          />
          <div className="absolute inset-x-0 bottom-0 max-h-[80vh] overflow-y-auto rounded-t-xl border-t border-ctp-surface1 bg-ctp-base shadow-[0_-4px_12px_rgba(17,17,27,0.6)]">
            <div className="sticky top-0 z-10 flex items-center justify-between gap-3 border-b border-ctp-surface0 bg-ctp-base px-4 py-2.5">
              <span className="text-sm font-semibold text-ctp-subtext1">
                {title}
              </span>
              <button
                type="button"
                onClick={() => setOpen(false)}
                title="Close"
                className="rounded-md p-1 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            <div className="p-4">{children}</div>
          </div>
        </div>
      ) : null}
    </>
  );
}

/**
 * Desktop side panel, mobile bottom sheet. Use in place of an <aside> so the
 * same content renders once either way.
 */
export function ResponsivePanel({
  title,
  children,
}: {
  title: string;
  children: ReactNode;
}) {
  const isMobile = useIsMobile();
  if (isMobile) return <BottomSheet title={title}>{children}</BottomSheet>;
  return <aside className="flex flex-col gap-4">{children}</aside>;
}