/**
 * CoPilotSheet — Mobile Slide-up Sheet für den Co-Pilot
 * Öffnet von unten als Overlay auf Mobile
 */

import { useEffect, useRef } from 'react';
import { CoPilotPanel } from './CoPilotPanel';

interface CoPilotSheetProps {
  open: boolean;
  onClose: () => void;
}

export function CoPilotSheet({ open, onClose }: CoPilotSheetProps) {
  const overlayRef = useRef<HTMLDivElement>(null);

  // Prevent body scroll when open
  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  if (!open) return null;

  return (
    <>
      {/* Backdrop */}
      <div
        ref={overlayRef}
        className="fixed inset-0 z-50"
        style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(2px)' }}
        onClick={onClose}
      />

      {/* Sheet */}
      <div
        className="fixed left-0 right-0 bottom-0 z-50 flex flex-col"
        style={{
          height: '85vh',
          borderRadius: '16px 16px 0 0',
          overflow: 'hidden',
          animation: 'slideInUp 0.28s cubic-bezier(0.23,1,0.32,1)',
        }}
      >
        {/* Drag Handle */}
        <div
          className="flex justify-center pt-2 pb-1 flex-shrink-0"
          style={{ background: 'var(--atlas-surface)' }}
        >
          <div
            className="rounded-full"
            style={{
              width: '36px',
              height: '4px',
              background: 'var(--atlas-border)',
            }}
          />
        </div>

        {/* Co-Pilot Panel — full height */}
        <div className="flex-1 overflow-hidden" style={{ display: 'flex', flexDirection: 'column' }}>
          <CoPilotPanel onClose={onClose} />
        </div>
      </div>
    </>
  );
}
