'use client';

import { useState } from 'react';
import MentionInput, { MentionOption } from '@/components/ui/MentionInput/index';
import { cn } from '@/lib/utils';

/**
 * MentionInput 使用示例
 */
export default function MentionInputExample() {
  const [value, setValue] = useState('');

  // 可选择的用户列表
  const mentionOptions: MentionOption[] = [
    { label: '元芳', value: 'yuanfang' },
    { label: '张三', value: 'zhangsan' },
    { label: '李四', value: 'lisi' },
    { label: '王五', value: 'wangwu' },
    { label: '赵六', value: 'liuliu' },
  ];

  const handleChange = (newValue: string) => {
    console.log('输入值:', newValue);
    setValue(newValue);
  };

  const handleEnter = (value: string) => {
    console.log('按下 Enter，发送内容:', value);
    alert(`发送内容：${value}`);
    // 发送后清空输入框
    setValue('');
  };

  return (
    <div className="p-8 max-w-2xl mx-auto space-y-6">
      <div>
        <h1 className="text-2xl font-bold mb-4">MentionInput 组件示例</h1>
        <p className="text-gray-600 mb-4">
          在输入框中输入 @ 符号，然后使用键盘↑↓选择用户，按回车确认选择。
        </p>
      </div>

      {/* 基础用法 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">基础用法</h2>
        <MentionInput
          value={value}
          onChange={handleChange}
          options={mentionOptions}
          placeholder="输入 @ 来提及用户..."
        />
      </div>

      {/* Enter 发送 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">Enter 发送消息</h2>
        <p className="text-sm text-gray-600 mb-2">按 Enter 发送消息，按 Shift + Enter 换行</p>
        <MentionInput
          value={value}
          onChange={handleChange}
          onEnter={handleEnter}
          options={mentionOptions}
          placeholder="输入内容，按 Enter 发送..."
        />
      </div>

      {/* 弹出位置 - 向上 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">弹出位置 - 向上弹出</h2>
        <MentionInput
          value={value}
          onChange={handleChange}
          options={mentionOptions}
          placeholder="输入 @ 时菜单向上弹出..."
          popoverPlacement="top"
        />
      </div>

      {/* 弹出位置 - 自动检测 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">弹出位置 - 自动检测（默认）</h2>
        <MentionInput
          value={value}
          onChange={handleChange}
          options={mentionOptions}
          placeholder="自动检测上下空间，智能选择弹出方向..."
          popoverPlacement="auto"
        />
      </div>

      {/* 自定义弹出项样式 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">自定义弹出项样式</h2>
        <MentionInput
          value={value}
          onChange={handleChange}
          options={mentionOptions}
          placeholder="自定义弹出项的类名..."
          popoverItemClassName="font-bold text-base py-3"
        />
      </div>

      {/* 自定义弹出项渲染 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">自定义弹出项渲染</h2>
        <MentionInput
          value={value}
          onChange={handleChange}
          options={mentionOptions}
          placeholder="自定义每一项的渲染样式..."
          popoverPlacement="top"
          popoverItemRender={(option, isSelected) => (
            <div className="flex items-center gap-3">
              <div
                className={cn(
                  'w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm',
                  isSelected ? 'bg-blue-500' : 'bg-gray-400'
                )}
              >
                {option.label.charAt(0)}
              </div>
              <div>
                <div className="font-semibold">@{option.label}</div>
                <div className="text-xs text-gray-500">ID: {option.value}</div>
              </div>
            </div>
          )}
        />
      </div>

      {/* 显示当前值 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">当前输入值</h2>
        <div className="p-4 bg-gray-100 rounded-md">
          <pre className="text-sm whitespace-pre-wrap break-words">{value || '（空）'}</pre>
        </div>
      </div>

      {/* 使用说明 */}
      <div className="border-t pt-6">
        <h2 className="text-lg font-semibold mb-2">功能说明</h2>
        <ul className="list-disc list-inside space-y-2 text-sm text-gray-700">
          <li>输入 @ 符号触发用户选择菜单</li>
          <li>继续输入可以过滤用户列表</li>
          <li>使用 ↑↓ 方向键选择用户</li>
          <li>在提及菜单显示时：按 Enter 确认选择，按 Esc 关闭菜单</li>
          <li>
            <strong>Enter 键行为：</strong>在提及菜单不显示时，按 Enter 发送消息（调用 onEnter），按
            Shift + Enter 换行
          </li>
          <li>选中的用户以特殊颜色高亮显示</li>
          <li>最终输出格式：@{'{value|label}'}</li>
          <li>
            <strong>弹出位置：</strong>支持 auto（自动检测）、top（向上）、bottom（向下）
          </li>
          <li>
            <strong>自定义样式：</strong>可通过 popoverItemClassName 自定义弹出项样式
          </li>
          <li>
            <strong>自定义渲染：</strong>可通过 popoverItemRender 完全自定义弹出项内容
          </li>
        </ul>
      </div>

      {/* 测试案例 */}
      <div className="border-t pt-6">
        <h2 className="text-lg font-semibold mb-2">测试案例</h2>
        <div className="space-y-2 text-sm">
          <p>
            <strong>输入：</strong>"@元芳，你怎么看"
          </p>
          <p>
            <strong>预期输出：</strong>"@{'{yuanfang|元芳}'}，你怎么看"
          </p>
          <button
            onClick={() => setValue('@{yuanfang|元芳}，你怎么看')}
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
            加载测试数据
          </button>
        </div>
      </div>
    </div>
  );
}
