import { useCallback, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { usePostViewer } from './usePostViewer';
import { useNavigationMemory } from './useNavigationMemory';
import { lightboxOpenRef } from '../utils/lightboxState';
import { usePostLabels } from '../settings/usePostLabels';

import PostThreadInline from './PostThreadInline';
import './PostViewerModal.css';

export default function PostViewerModal() {
  const { activePostUri, mode, close } = usePostViewer();
  const navigate = useNavigate();
  const { mainContentPath } = useNavigationMemory();
  const { t: label } = usePostLabels();

  const mainContentPathRef = useRef(mainContentPath);
  mainContentPathRef.current = mainContentPath;

  const isOpen = activePostUri !== null && mode === 'modal';

  const handleClose = useCallback(() => {
    navigate(mainContentPathRef.current, { replace: true });
    close();
  }, [navigate, close]);

  useEffect(() => {
    if (!isOpen) return;
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && !lightboxOpenRef.current) handleClose();
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [isOpen, handleClose]);

  
  useEffect(() => {
    if (!isOpen) return;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="post-modal-overlay" onClick={handleClose}>
      <div
        className="post-modal-content"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="post-modal-header">
          <span className="post-modal-title">{label('post', false, true)}</span>
          <button className="post-modal-close" onClick={handleClose}>
            ✕
          </button>
        </div>
        <div className="post-modal-body">
          <PostThreadInline key={activePostUri} uri={activePostUri!} />
        </div>
      </div>
    </div>
  );
}