import React, { useEffect, useState } from 'react'
import { p } from './my-text'
import { MyButton } from './my-button'
import { cn } from '../lib/utils'

interface BottomDialogProps {
  open: boolean
  onClose: () => void
  children: React.ReactNode
  enableDismiss?: boolean
}

export function BottomDialog({
  open,
  onClose,
  children,
  enableDismiss = true,
}: BottomDialogProps) {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    if (open) {
      setVisible(true)
    } else {
      const timer = setTimeout(() => setVisible(false), 200)
      return () => clearTimeout(timer)
    }
  }, [open])

  if (!visible && !open) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div
        className={`absolute inset-0 bg-black/30 transition-opacity duration-200 ${
          open ? 'opacity-100' : 'opacity-0'
        }`}
        onClick={enableDismiss ? onClose : undefined}
      />
      <div
        className={`relative w-full max-w-lg rounded-t-2xl bg-white p-6 shadow-lg transition-transform duration-200 ${
          open ? 'translate-y-0' : 'translate-y-full'
        }`}
        style={{ maxHeight: '85vh' }}
      >
        <div className="mx-auto mb-4 h-1.5 w-10 rounded-full bg-gray-300" />
        <div className="overflow-y-auto" style={{ maxHeight: 'calc(85vh - 40px)' }}>
          {children}
        </div>
      </div>
    </div>
  )
}

interface ConfirmationDialogProps {
  open: boolean
  positiveAction: (comment?: string) => void
  commentNeeded?: boolean
  negativeAction?: () => void
  title?: string
  message?: string
  confirmText?: string
  cancelText?: string
  isLoading?: boolean
}

export function ConfirmationDialog({
  open,
  positiveAction,
  commentNeeded = false,
  negativeAction,
  title = 'Are you sure?',
  message = 'Do you really want to proceed with this action?',
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  isLoading = false,
}: ConfirmationDialogProps) {
  const [comment, setComment] = useState('')

  const handleConfirm = () => {
    positiveAction(commentNeeded ? comment : undefined)
    setComment('')
  }

  const handleCancel = () => {
    negativeAction?.()
    setComment('')
  }

  return (
    <BottomDialog open={open} onClose={handleCancel}>
      <div className="p-4">
        <p weight="bold" className="mb-4 text-lg">
          {title}
        </p>
        <p className="mb-6 text-gray-600">{message}</p>
        {commentNeeded && (
          <textarea
            className="mb-4 min-h-20 w-full rounded-lg border border-gray-300 p-3 text-sm"
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            placeholder="Add a comment..."
            rows={3}
          />
        )}
        <div className="flex gap-3">
          <MyButton
            variant="blue"
            fillColor="gray"
            textContent={cancelText}
            onClick={handleCancel}
            disabled={isLoading}
            className="flex-1"
          />
          <MyButton
            variant="red"
            textContent={isLoading ? 'Processing...' : confirmText}
            onClick={handleConfirm}
            disabled={isLoading}
            className="flex-1"
          />
        </div>
      </div>
    </BottomDialog>
  )
}
