import React, { useState } from "react";
import { MdEdit } from "react-icons/md";

interface TextInputModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (text: string) => void;
  title: string;
  description?: string;
  placeholder?: string;
  confirmText?: string;
  cancelText?: string;
  required?: boolean;
  multiline?: boolean;
}

const TextInputModal: React.FC<TextInputModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  description,
  placeholder = "Enter text...",
  confirmText = "Confirm",
  cancelText = "Cancel",
  required = false,
  multiline = false,
}) => {
  const [inputText, setInputText] = useState("");

  if (!isOpen) return null;

  const handleConfirm = () => {
    if (required && !inputText.trim()) {
      return;
    }
    onConfirm(inputText);
    setInputText("");
    onClose();
  };

  const handleClose = () => {
    setInputText("");
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex min-h-screen items-center justify-center p-4 text-center">
        <div
          className="fixed inset-0 bg-black bg-opacity-30 transition-opacity"
          onClick={handleClose}
        ></div>

        <div className="relative w-full max-w-md transform overflow-hidden rounded-lg bg-white px-8 py-16 text-left shadow-xl transition-all">
          <div className="flex flex-col items-center">
            {/* Icon */}
            <div className="flex h-32 w-32 items-center justify-center rounded-full mb-8 bg-red-100">
              <MdEdit size={60} color="#EF4444" />
            </div>

            {/* Title */}
            <h3 className="text-2xl font-bold text-[#0F2851] mb-4">{title}</h3>

            {/* Description */}
            {description && (
              <div className="mb-8 text-center">
                <p className="text-lg text-gray-500 whitespace-pre-line">
                  {description}
                </p>
              </div>
            )}

            {/* Text Input */}
            <div className="w-full mb-8">
              {multiline ? (
                <textarea
                  value={inputText}
                  onChange={(e) => setInputText(e.target.value)}
                  placeholder={placeholder}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-[100px] resize-vertical text-black"
                  rows={4}
                />
              ) : (
                <input
                  type="text"
                  value={inputText}
                  onChange={(e) => setInputText(e.target.value)}
                  placeholder={placeholder}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                />
              )}
              {required && (
                <p className="text-sm text-gray-500 mt-1">* Required field</p>
              )}
            </div>

            {/* Action Buttons */}
            <div className="w-full flex space-x-4">
              <button
                type="button"
                className="w-1/2 rounded-xl border border-[#3997E0] bg-white px-4 py-2 text-lg font-medium text-[#3997E0] hover:bg-gray-50 focus:outline-none"
                onClick={handleClose}
              >
                {cancelText}
              </button>
              <button
                type="button"
                className={`w-1/2 rounded-xl px-4 py-2 text-lg font-medium text-white focus:outline-none ${
                  required && !inputText.trim()
                    ? "bg-gray-400 cursor-not-allowed"
                    : "bg-[#3997E0] hover:bg-blue-600"
                }`}
                onClick={handleConfirm}
                disabled={required && !inputText.trim()}
              >
                {confirmText}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TextInputModal;