import { html, useState, useEffect, useCallback } from '../lib/preact.js';
import { SessionCard } from './SessionCard.js';
import { fetchSkills } from '../utils/api.js';

export function Modal({ session, conversations, onClose, onRespond, onFetchConversation, onDismiss }) {
  const [closing, setClosing] = useState(false);
  const [autocompleteConfig, setAutocompleteConfig] = useState(null);

  // Reset closing state when session changes
  useEffect(() => {
    setClosing(false);
  }, [session?.session_id]);

  // Load autocomplete skills when agent type changes
  useEffect(() => {
    if (!session) {
      setAutocompleteConfig(null);
      return;
    }

    let stale = false;
    const agent = session.agent || 'claude';
    fetchSkills(agent)
      .then(config => { if (!stale) setAutocompleteConfig(config); })
      .catch(() => { if (!stale) setAutocompleteConfig(null); });
    return () => { stale = true; };
  }, [session?.agent]);

  // Animated close handler
  const handleClose = useCallback(() => {
    setClosing(true);
    setTimeout(() => {
      setClosing(false);
      onClose();
    }, 200);
  }, [onClose]);

  // Lock body scroll when modal is open
  useEffect(() => {
    if (!session) return;
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = '';
    };
  }, [session?.session_id]);

  // Handle escape key
  useEffect(() => {
    if (!session) return;
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') handleClose();
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [session?.session_id, handleClose]);

  if (!session) return null;

  const conversation = conversations[session.session_id] || [];

  return html`
    <div
      class="fixed inset-0 z-50 flex items-center justify-center bg-[#02050d]/84 p-4 backdrop-blur-sm ${closing ? 'modal-backdrop-out' : 'modal-backdrop-in'}"
      onClick=${(e) => e.target === e.currentTarget && handleClose()}
    >
      <div class=${closing ? 'modal-panel-out' : 'modal-panel-in'} onClick=${(e) => e.stopPropagation()}>
        <${SessionCard}
          session=${session}
          conversation=${conversation}
          onFetchConversation=${onFetchConversation}
          onRespond=${onRespond}
          onDismiss=${onDismiss}
          enlarged=${true}
          autocompleteConfig=${autocompleteConfig}
        />
      </div>
    </div>
  `;
}