import { useState } from 'react';
import { MessageModal, messageService, MessageModalProvider } from '~/components/ui/MessageModal';
import type { MessageType } from '~/components/ui/MessageModal';
import { LinksFunction } from '@remix-run/node';
import messageModalStyles from '~/styles/components/message-modal.css?url';

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: messageModalStyles },
];

export default function MessageModalExample() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalType, setModalType] = useState<MessageType>('info');
  const [modalTitle, setModalTitle] = useState('');
  const [modalMessage, setModalMessage] = useState('');
  const [withConfirm, setWithConfirm] = useState(false);
  const [autoClose, setAutoClose] = useState(false);
  
  // 打开普通模态框
  const openModal = (type: MessageType, title: string, message: string) => {
    setModalType(type);
    setModalTitle(title);
    setModalMessage(message);
    setIsModalOpen(true);
  };
  
  // 打开各类型的服务提示框
  const showSuccessMessage = () => {
    messageService.success('操作成功完成！', { 
      title: '成功提示', 
      autoClose: true 
    });
  };
  
  const showErrorMessage = () => {
    messageService.error('操作过程中发生错误，请重试。', { 
      title: '错误提示' 
    });
  };
  
  const showWarningMessage = () => {
    messageService.warning('此操作可能产生不可逆转的结果。', { 
      title: '警告提示',
      onConfirm: () => {
        messageService.success('您已确认继续操作')
      },
      confirmText: '继续操作',
      cancelText: '取消'
    });
  };
  
  const showInfoMessage = () => {
    messageService.info('系统将于今晚10点进行升级维护。', { 
      title: '通知',
      autoClose: true,
      autoCloseDelay: 5000
    });
  };
  
  const showCustomMessage = () => {
    messageService.show({
      title: '自定义消息',
      message: '这是一个带有自定义内容的消息',
      type: 'info',
      confirmText: '了解',
      children: (
        <div style={{ 
          padding: '10px', 
          backgroundColor: '#f0f0f0', 
          borderRadius: '6px',
          marginTop: '10px' 
        }}>
          <p>这里可以放置更复杂的自定义内容。</p>
          <div style={{ 
            display: 'flex', 
            alignItems: 'center', 
            marginTop: '10px' 
          }}>
            <i className="ri-information-line" style={{ marginRight: '8px', color: '#1890ff' }}></i>
            <span>比如详细的操作说明或其他信息。</span>
          </div>
        </div>
      )
    });
  };
  
  // 处理确认
  const handleConfirm = () => {
    messageService.success('您点击了确认按钮！', { autoClose: true });
    setIsModalOpen(false);
  };
  
  return (
    <MessageModalProvider>
      <div className="container mx-auto p-6">
        <h1 className="text-2xl font-bold mb-6">消息模态框示例</h1>
        
        <div className="bg-white rounded-lg p-6 shadow-md mb-8">
          <h2 className="text-xl font-semibold mb-4">基本用法</h2>
          <p className="mb-4">您可以直接使用MessageModal组件来控制模态框的显示和隐藏。</p>
          
          <div className="flex flex-wrap gap-3 mb-6">
            <button 
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
              onClick={() => openModal('info', '信息提示', '这是一个普通的信息提示框')}
            >
              信息提示框
            </button>
            <button 
              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
              onClick={() => openModal('success', '成功提示', '操作已成功完成')}
            >
              成功提示框
            </button>
            <button 
              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
              onClick={() => openModal('error', '错误提示', '操作失败，请检查输入')}
            >
              错误提示框
            </button>
            <button 
              className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
              onClick={() => openModal('warning', '警告提示', '此操作将删除数据，是否继续？')}
            >
              警告提示框
            </button>
          </div>
          
          <div className="flex flex-wrap gap-4 mb-4">
            <label className="flex items-center">
              <input 
                type="checkbox"
                checked={withConfirm}
                onChange={(e) => setWithConfirm(e.target.checked)}
                className="mr-2"
              />
              添加确认按钮
            </label>
            
            <label className="flex items-center">
              <input 
                type="checkbox"
                checked={autoClose}
                onChange={(e) => setAutoClose(e.target.checked)}
                className="mr-2"
              />
              自动关闭 (3秒)
            </label>
          </div>
          
          <MessageModal
            isOpen={isModalOpen}
            onClose={() => setIsModalOpen(false)}
            title={modalTitle}
            message={modalMessage}
            type={modalType}
            autoClose={autoClose}
            onConfirm={withConfirm ? handleConfirm : undefined}
            confirmText={withConfirm ? "确认" : "我知道了"}
            cancelText="取消"
          />
        </div>
        
        <div className="bg-white rounded-lg p-6 shadow-md mb-8">
          <h2 className="text-xl font-semibold mb-4">全局消息服务</h2>
          <p className="mb-4">使用messageService可以在任何组件中方便地显示消息提示，而无需手动管理状态。</p>
          
          <div className="flex flex-wrap gap-3">
            <button 
              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
              onClick={showSuccessMessage}
            >
              成功提示 (自动关闭)
            </button>
            <button 
              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
              onClick={showErrorMessage}
            >
              错误提示
            </button>
            <button 
              className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
              onClick={showWarningMessage}
            >
              警告提示 (带确认)
            </button>
            <button 
              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
              onClick={showInfoMessage}
            >
              信息提示 (5秒后关闭)
            </button>
            <button 
              className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"
              onClick={showCustomMessage}
            >
              自定义内容提示
            </button>
          </div>
        </div>
      </div>
    </MessageModalProvider>
  );
}