import { useEffect, useRef } from 'react'
import { cn } from '../../lib/utils'

interface MobileCommentProps {
  open: boolean
  onClose: () => void
  filePath: string
  lineNumber: number
  children?: React.ReactNode
}

export function MobileComment({ open, onClose, filePath, lineNumber, children }: MobileCommentProps) {
  const sheetRef = useRef<HTMLDivElement>(null)

  // Close on backdrop click
  useEffect(() => {
    if (!open) return
    const handler = (e: MouseEvent) => {
      if (sheetRef.current && !sheetRef.current.contains(e.target as Node)) {
        onClose()
      }
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [open, onClose])

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

  return (
    <>
      {/* Backdrop */}
      <div
        className={cn(
          'fixed inset-0 bg-black/40 z-40 transition-opacity duration-200',
          open ? 'opacity-100' : 'opacity-0 pointer-events-none',
        )}
      />

      {/* Bottom sheet */}
      <div
        ref={sheetRef}
        className={cn(
          'fixed bottom-0 left-0 right-0 z-50 bg-[var(--c-surface)] rounded-t-2xl shadow-xl',
          'transition-transform duration-300 ease-out',
          'pb-[env(safe-area-inset-bottom)]',
          open ? 'translate-y-0' : 'translate-y-full',
        )}
        role="dialog"
        aria-modal="true"
        aria-label="Line comment"
      >
        {/* Handle */}
        <div className="flex justify-center pt-3 pb-1">
          <div className="w-10 h-1 rounded-full bg-[var(--c-border)]" />
        </div>

        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--c-border)]">
          <div className="min-w-0">
            <p className="text-xs font-semibold text-[var(--c-text)] truncate">{filePath}</p>
            <p className="text-xs text-[var(--c-muted)]">Line {lineNumber}</p>
          </div>
          <button
            onClick={onClose}
            className="flex items-center justify-center w-8 h-8 rounded hover:bg-[var(--c-surface-muted)] text-[var(--c-muted)]"
            aria-label="Close"
          >
            <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Content */}
        <div className="p-4 max-h-[60vh] overflow-y-auto">
          {children ?? (
            <textarea
              autoFocus
              rows={4}
              placeholder="Leave a comment on this line…"
              className="w-full border border-[var(--c-border)] rounded p-3 text-sm resize-none focus:outline-none focus:border-[var(--c-brand-focus)] focus:ring-1 focus:ring-[var(--c-brand-focus)]"
            />
          )}
          <div className="flex justify-end gap-2 mt-3">
            <button
              onClick={onClose}
              className="px-4 py-2 text-sm rounded border border-[var(--c-border)] text-[var(--c-text)] hover:bg-[var(--c-surface-muted)] min-h-[44px]"
            >
              Cancel
            </button>
            <button className="px-4 py-2 text-sm rounded bg-[var(--c-brand)] text-white hover:bg-[var(--c-brand-hover)] min-h-[44px]">
              Save
            </button>
          </div>
        </div>
      </div>
    </>
  )
}