import React, { useEffect } from 'react';

interface BottomSheetProps {
  open: boolean;
  title?: string;
  onClose: () => void;
  children: React.ReactNode;
  height?: 'auto' | 'half' | 'full';
}

export default function BottomSheet({
  open,
  title,
  onClose,
  children,
  height = 'auto',
}: BottomSheetProps) {
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  if (!open) return null;

  return (
    <div className="bs-root" role="dialog" aria-modal="true">
      <button type="button" className="bs-backdrop" aria-label="닫기" onClick={onClose} />
      <div className={`bs-panel bs-${height}`}>
        <div className="bs-handle" />
        {title && (
          <div className="bs-header">
            <h2>{title}</h2>
            <button type="button" className="bs-close" onClick={onClose} aria-label="닫기">✕</button>
          </div>
        )}
        <div className="bs-body">{children}</div>
      </div>
      <style>{`
        .bs-root {
          position: fixed;
          inset: 0;
          z-index: 150;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
        .bs-backdrop {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.55);
          border: none;
          min-height: auto;
        }
        .bs-panel {
          position: relative;
          background: var(--gc-bg-elevated);
          border-radius: 20px 20px 0 0;
          max-height: 90vh;
          display: flex;
          flex-direction: column;
          animation: bsUp 0.28s ease;
        }
        .bs-auto { max-height: 70vh; }
        .bs-half { height: 55vh; }
        .bs-full { height: calc(100% - var(--gc-safe-top) - 24px); }
        .bs-handle {
          width: 36px;
          height: 4px;
          background: var(--gc-border);
          border-radius: 2px;
          margin: 8px auto 4px;
        }
        .bs-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 16px 12px;
          border-bottom: 1px solid var(--gc-border);
        }
        .bs-header h2 {
          font-size: 17px;
          font-weight: 600;
        }
        .bs-close {
          min-height: 36px;
          min-width: 36px;
          font-size: 18px;
          color: var(--gc-text-muted);
        }
        .bs-body {
          flex: 1;
          overflow-y: auto;
          padding: 16px;
          padding-bottom: calc(16px + var(--gc-safe-bottom));
          -webkit-overflow-scrolling: touch;
        }
        @keyframes bsUp {
          from { transform: translateY(100%); }
          to { transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}