"use client";

import type { ReactNode } from "react";
import { useEffect } from "react";

type Props = {
  open: boolean;
  onClose: () => void;
  /** Cuộn tới lá số / đóng overlay */
  onShowChart: () => void;
  title?: string;
  children: ReactNode;
  /** Extra row under header (tab strip) */
  headerExtra?: ReactNode;
};

/**
 * Desktop: hộp giữa tối đa ~1000px. Mobile: bottom sheet.
 */
export function TuViInterpretFocusOverlay({
  open,
  onClose,
  onShowChart,
  title = "Luận giải",
  children,
  headerExtra,
}: Props) {
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[60] flex items-end justify-center sm:items-center" role="presentation">
      <button
        type="button"
        aria-label="Đóng lớp luận"
        className="absolute inset-0 bg-black/72 backdrop-blur-[2px] transition-opacity"
        onClick={onClose}
      />

      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="tuvi-focus-overlay-title"
        className="relative z-[61] flex max-h-[min(92dvh,920px)] w-full max-w-[1000px] flex-col overflow-hidden rounded-t-2xl border border-[#d4af37]/22 bg-[linear-gradient(175deg,rgba(10,14,26,0.98),rgba(4,6,12,0.98))] shadow-[0_-12px_48px_rgba(0,0,0,0.55)] sm:max-h-[min(88vh,860px)] sm:rounded-2xl sm:border-[#d4af37]/18"
      >
        <header className="flex shrink-0 flex-col gap-3 border-b border-[#d4af37]/14 px-4 pb-3 pt-4 sm:flex-row sm:items-center sm:justify-between sm:px-6 sm:pb-4 sm:pt-5">
          <div className="min-w-0">
            <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.28em] text-[#d4af37]/58">Đọc theo mục</p>
            <h2 id="tuvi-focus-overlay-title" className="ctkp-tuvi-text-title-soft truncate font-ctkp-serif text-lg font-normal tracking-[0.08em]">
              {title}
            </h2>
          </div>
          <div className="flex shrink-0 flex-wrap items-center gap-2">
            <button
              type="button"
              onClick={() => {
                onShowChart();
                onClose();
              }}
              className="rounded-lg border border-[#d4af37]/28 bg-[#d4af37]/08 px-3 py-2 font-ctkp-serif text-[12px] tracking-[0.04em] text-[#f0e6c8] transition-[background-color,border-color] hover:border-[#d4af37]/42 hover:bg-[#d4af37]/12 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#d4af37]/35"
            >
              Xem lại lá số
            </button>
            <button
              type="button"
              aria-label="Đóng"
              onClick={onClose}
              className="flex h-10 w-10 items-center justify-center rounded-lg border border-white/[0.08] text-slate-400 transition-[background-color,color] hover:bg-white/[0.06] hover:text-slate-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#d4af37]/35"
            >
              <span aria-hidden className="text-xl leading-none">
                ×
              </span>
            </button>
          </div>
        </header>

        {headerExtra ?
          <div className="shrink-0 border-b border-[#d4af37]/10 px-4 py-3 sm:px-6">{headerExtra}</div>
        : null}

        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6 sm:py-5 sm:pb-5">{children}</div>
      </div>
    </div>
  );
}