/**
 * @name 托管账号管理
 * 
 * 参考资料：
 * - /rules/development-standards.md
 * - /rules/axure-api-guide.md
 * - /assets/docs/设计指导（简约）.md
 * - /assets/libraries/tailwind-css.md
 */

import './style.css';
import React, { useCallback, useImperativeHandle, useMemo, useState, forwardRef } from 'react';
import { Layout } from 'antd';
import type {
  KeyDesc,
  DataDesc,
  ConfigItem,
  Action,
  EventItem,
  AxureProps,
  AxureHandle
} from '../../common/axure-types';
import { MENU_ITEMS, resolveMenuTarget } from '../../common/menu';
import SideMenu from '../../components/side-menu';

const EVENT_LIST: EventItem[] = [
  { name: 'on_search', desc: '点击搜索时触发，payload 为筛选条件 JSON 字符串', payload: 'JSON string' },
  { name: 'on_reset', desc: '点击重置时触发，payload 为 "reset"' },
  { name: 'on_action', desc: '点击操作按钮时触发，payload 为操作类型字符串' },
  { name: 'on_modal_confirm', desc: '弹窗确认时触发，payload 为选择结果 JSON 字符串', payload: 'JSON string' },
  { name: 'on_modal_cancel', desc: '弹窗取消时触发，payload 为 "cancel"' }
];

const ACTION_LIST: Action[] = [
  { name: 'open_modal', desc: '打开成员选择弹窗' },
  { name: 'close_modal', desc: '关闭成员选择弹窗' },
  { name: 'set_filters', desc: '设置筛选条件，参数格式：JSON 字符串', params: 'JSON string' }
];

const VAR_LIST: KeyDesc[] = [
  { name: 'modal_open', desc: '弹窗是否打开（布尔值）' },
  { name: 'selected_count', desc: '已选成员数量（数字）' }
];

const CONFIG_LIST: ConfigItem[] = [
  {
    type: 'switch',
    attributeId: 'show_modal_on_load',
    displayName: '默认打开弹窗',
    info: '页面加载时是否自动打开成员选择弹窗',
    initialValue: false
  },
  {
    type: 'inputNumber',
    attributeId: 'page_size',
    displayName: '每页条数',
    info: '表格分页大小',
    initialValue: 10,
    min: 5,
    max: 50
  }
];

const DATA_LIST: DataDesc[] = [
  {
    name: 'accounts',
    desc: '托管账号列表',
    keys: [
      { name: 'id', desc: '记录 ID' },
      { name: 'member_name', desc: '成员姓名' },
      { name: 'member_id', desc: '成员 ID' },
      { name: 'member_phone', desc: '成员手机号' },
      { name: 'department', desc: '部门' },
      { name: 'operator_name', desc: '集运人员' },
      { name: 'operator_phone', desc: '集运人员手机号' },
      { name: 'customer_count', desc: '客户数' },
      { name: 'proxy_ip', desc: '托管 IP' },
      { name: 'status', desc: '托管状态（online/wecom_offline/robot_offline）' },
      { name: 'managed_at', desc: '托管时间' }
    ]
  },
  {
    name: 'operators',
    desc: '集运人员列表',
    keys: [
      { name: 'id', desc: '人员 ID' },
      { name: 'name', desc: '人员姓名' }
    ]
  }
];

type AccountRow = {
  id: string;
  member_name: string;
  member_id: string;
  member_phone: string;
  department: string;
  operator_name: string;
  operator_phone: string;
  customer_count: number;
  proxy_ip: string;
  status: 'online' | 'wecom_offline' | 'robot_offline';
  managed_at: string;
};

const DEFAULT_ROWS: AccountRow[] = [
  {
    id: '1',
    member_name: '黑龙江移动小微客服-丹丹',
    member_id: '18304634751',
    member_phone: '178****9069',
    department: '黑龙江移动企业微信集中运营',
    operator_name: '李洋',
    operator_phone: '178****9069',
    customer_count: 0,
    proxy_ip: 'http://scbydntest189.robot.10086.cn:10...',
    status: 'online',
    managed_at: '2026-02-10 16:15:40'
  },
  {
    id: '2',
    member_name: '牡丹江移动小微客服-木木',
    member_id: '19586284531',
    member_phone: '195****4531',
    department: '黑龙江移动企业微信集中运营',
    operator_name: '高敏',
    operator_phone: '181****5728',
    customer_count: 15339,
    proxy_ip: 'http://scbydntest188.robot.10086.cn:10...',
    status: 'wecom_offline',
    managed_at: '2026-02-06 18:14:01'
  },
  {
    id: '3',
    member_name: '佳木斯移动小微客服-佑佑',
    member_id: '19586284594',
    member_phone: '195****4594',
    department: '黑龙江移动企业微信集中运营',
    operator_name: '高敏',
    operator_phone: '181****5728',
    customer_count: 17,
    proxy_ip: 'http://scbydntest184.robot.10086.cn:10...',
    status: 'robot_offline',
    managed_at: '2026-02-05 17:22:11'
  },
  {
    id: '4',
    member_name: '朱亚敏',
    member_id: '13653685556',
    member_phone: '136****5556',
    department: '黑龙江移动企业微信测试组',
    operator_name: '代必云',
    operator_phone: '150****1234',
    customer_count: 10,
    proxy_ip: 'http://scbydntest003.robot.10086.cn:10...',
    status: 'wecom_offline',
    managed_at: '2026-01-22 17:25:56'
  }
];

const DEFAULT_OPERATORS = [
  { id: '1', name: '徐蕾' },
  { id: '2', name: '李杨' },
  { id: '3', name: '王琳' },
  { id: '4', name: '齐涛' }
];

const DEPARTMENTS = [
  '黑龙江移动',
  '企业微信中心',
  '企业微信测试组',
  '黑龙江政企',
  '市场经营部',
  '哈尔滨分公司',
  '牡丹江分公司',
  '佳木斯分公司',
  '七台河分公司'
];

const getMockMembers = (dept: string) => [
  dept + '-张三',
  dept + '-李四',
  dept + '-王五',
  dept + '-赵六'
];

const Component = forwardRef<AxureHandle, AxureProps>(function ManagedAccounts(innerProps, ref) {
  const dataSource = innerProps && innerProps.data ? innerProps.data : {};
  const configSource = innerProps && innerProps.config ? innerProps.config : {};
  const onEventHandler = typeof innerProps.onEvent === 'function'
    ? innerProps.onEvent
    : function () { return undefined; };

  const showModalOnLoad = typeof configSource.show_modal_on_load === 'boolean'
    ? configSource.show_modal_on_load
    : false;

  const initialRows = Array.isArray(dataSource.accounts) && dataSource.accounts.length
    ? dataSource.accounts
    : DEFAULT_ROWS;

  const operatorOptions = Array.isArray(dataSource.operators) && dataSource.operators.length
    ? dataSource.operators
    : DEFAULT_OPERATORS;

  const [filters, setFilters] = useState({
    operator: '',
    member: '',
    phone: '',
    status: ''
  });

  const [modalType, setModalType] = useState<'add' | 'assign' | 'input_code'>('add');
  const [modalOpen, setModalOpen] = useState(showModalOnLoad);
  const [selectedRows, setSelectedRows] = useState<string[]>([]);
  
  // Modal State
  const [selectedDepartment, setSelectedDepartment] = useState<string>('');
  const [targetMember, setTargetMember] = useState<string>('');
  const [selectedOperator, setSelectedOperator] = useState<string>('');
  const [selectedRegion, setSelectedRegion] = useState<string>('');
  const [expandedDepts, setExpandedDepts] = useState<string[]>([]);
  const [treeSearch, setTreeSearch] = useState('');
  const [verifyCode, setVerifyCode] = useState('');

  const emitEvent = useCallback(function (eventName: string, payload?: string) {
    try {
      onEventHandler(eventName, payload);
    } catch (error) {
      console.warn('事件触发失败:', eventName, error);
    }
  }, [onEventHandler]);

  const handleSearch = useCallback(function () {
    emitEvent('on_search', JSON.stringify(filters));
  }, [emitEvent, filters]);

  const handleReset = useCallback(function () {
    setFilters({ operator: '', member: '', phone: '', status: '' });
    emitEvent('on_reset', 'reset');
  }, [emitEvent]);

  const [toastMessage, setToastMessage] = useState('');

  const showToast = (msg: string) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(''), 3000);
  };

  const handleAction = useCallback(function (action: string) {
    emitEvent('on_action', action);
    if (action === 'add_proxy') {
      setModalType('add');
      setModalOpen(true);
    } else if (action === 'batch_assign') {
      if (selectedRows.length === 0) {
        alert('请先勾选需要分配的账号');
        return;
      }
      setModalType('assign');
      setModalOpen(true);
    } else if (action === 'remind_login') {
      showToast('已发送提醒');
    } else if (action === 'input_code') {
      setModalType('input_code');
      setVerifyCode('');
      setModalOpen(true);
    }
  }, [emitEvent, selectedRows]);

  const handleConfirmModal = useCallback(function () {
    if (modalType === 'add') {
      emitEvent('on_modal_confirm', JSON.stringify({
        action: 'add',
        member: targetMember,
        department: selectedDepartment,
        operator: selectedOperator,
        region: selectedRegion
      }));
    } else if (modalType === 'assign') {
      emitEvent('on_modal_confirm', JSON.stringify({
        action: 'assign',
        account_ids: selectedRows,
        operator: selectedOperator
      }));
    } else if (modalType === 'input_code') {
      emitEvent('on_modal_confirm', JSON.stringify({
        action: 'input_code',
        code: verifyCode
      }));
    }
    setModalOpen(false);
  }, [emitEvent, targetMember, selectedDepartment, selectedOperator, selectedRegion, modalType, selectedRows, verifyCode]);

  const handleCancelModal = useCallback(function () {
    emitEvent('on_modal_cancel', 'cancel');
    setModalOpen(false);
  }, [emitEvent]);

  const tableRows = useMemo(function () {
    return initialRows;
  }, [initialRows]);

  useImperativeHandle(ref, function () {
    return {
      getVar: function (name: string) {
        const vars: Record<string, any> = {
          modal_open: modalOpen,
          selected_count: targetMember ? 1 : 0
        };
        return vars[name];
      },
      fireAction: function (name: string, params?: string) {
        switch (name) {
          case 'open_modal':
            setModalOpen(true);
            break;
          case 'close_modal':
            setModalOpen(false);
            break;
          case 'set_filters':
            if (params) {
              try {
                const parsed = JSON.parse(params);
                setFilters({
                  operator: parsed.operator || '',
                  member: parsed.member || '',
                  phone: parsed.phone || '',
                  status: parsed.status || ''
                });
              } catch (error) {
                console.warn('参数解析失败:', error);
              }
            }
            break;
          default:
            console.warn('未知的动作:', name);
        }
      },
      eventList: EVENT_LIST,
      actionList: ACTION_LIST,
      varList: VAR_LIST,
      configList: CONFIG_LIST,
      dataList: DATA_LIST
    };
  }, [modalOpen, targetMember]);

  const handleMenuSelect = useCallback(function (key: string) {
    const target = resolveMenuTarget(key);
    if (target) {
      window.location.href = target;
    }
  }, []);

  // Mock members based on department
  const currentMembers = useMemo(() => {
    if (!selectedDepartment) return [];
    return getMockMembers(selectedDepartment);
  }, [selectedDepartment]);

  const treeData = useMemo(() => {
    const result: { dept: string; members: string[]; expanded: boolean }[] = [];
    DEPARTMENTS.forEach(dept => {
      const members = getMockMembers(dept);
      const filteredMembers = members.filter(m => m.includes(treeSearch));
      const deptMatch = dept.includes(treeSearch);
      
      if (treeSearch && !deptMatch && filteredMembers.length === 0) {
        return;
      }

      const isExpanded = expandedDepts.includes(dept) || (!!treeSearch && (deptMatch || filteredMembers.length > 0));
      
      result.push({
        dept,
        members: treeSearch ? filteredMembers : members,
        expanded: isExpanded
      });
    });
    return result;
  }, [expandedDepts, treeSearch]);

  const toggleDept = (dept: string) => {
    setExpandedDepts(prev => 
      prev.includes(dept) ? prev.filter(d => d !== dept) : [...prev, dept]
    );
  };

  return (
    <Layout className="managed-accounts-page" hasSider>
      <SideMenu
        title="企微运营"
        width={280}
        defaultSelectedKey="hosting_accounts"
        items={MENU_ITEMS}
        onMenuSelect={handleMenuSelect}
      />
      <Layout>
        <Layout.Content className="managed-accounts-content">
          <div className="bg-white rounded-lg border border-slate-200">
            <div className="px-6 py-4 border-b border-slate-200">
              <div className="flex flex-wrap gap-4 items-center">
                <div className="flex items-center gap-2 text-sm">
                  <span className="text-slate-500">集运人员</span>
                  <select
                    className="w-44 h-9 border border-slate-200 rounded-md px-2 text-sm"
                    value={filters.operator}
                    onChange={(event) => setFilters({ ...filters, operator: event.target.value })}
                  >
                    <option value="">请选择集运人员</option>
                    {operatorOptions.map((item: { id: string; name: string }) => (
                      <option key={item.id} value={item.name}>{item.name}</option>
                    ))}
                  </select>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <span className="text-slate-500">企业成员</span>
                  <input
                    className="w-44 h-9 border border-slate-200 rounded-md px-2 text-sm"
                    placeholder="请选择企业成员"
                    value={filters.member}
                    onChange={(event) => setFilters({ ...filters, member: event.target.value })}
                  />
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <span className="text-slate-500">成员手机</span>
                  <input
                    className="w-44 h-9 border border-slate-200 rounded-md px-2 text-sm"
                    placeholder="请输入成员手机"
                    value={filters.phone}
                    onChange={(event) => setFilters({ ...filters, phone: event.target.value })}
                  />
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <span className="text-slate-500">托管状态</span>
                  <select
                    className="w-44 h-9 border border-slate-200 rounded-md px-2 text-sm"
                    value={filters.status}
                    onChange={(event) => setFilters({ ...filters, status: event.target.value })}
                  >
                    <option value="">请选择托管状态</option>
                    <option value="online">在线</option>
                    <option value="wecom_offline">企微离线</option>
                    <option value="robot_offline">机器人离线</option>
                  </select>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    className="h-9 px-4 bg-blue-600 text-white rounded-md text-sm"
                    onClick={handleSearch}
                  >
                    查询
                  </button>
                  <button
                    className="h-9 px-4 border border-slate-200 rounded-md text-sm text-slate-500"
                    onClick={handleReset}
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>

            <div className="px-6 py-4 border-b border-slate-200 flex items-center gap-3">
              <button
                className="h-9 px-4 bg-blue-600 text-white rounded-md text-sm"
                onClick={() => handleAction('add_proxy')}
              >
                新增托管
              </button>
              <button
                className="h-9 px-4 bg-blue-50 text-blue-600 rounded-md text-sm"
                onClick={() => handleAction('batch_assign')}
              >
                批量分配
              </button>
              <button
                className="h-9 px-4 bg-slate-50 text-slate-600 rounded-md text-sm"
                onClick={() => handleAction('batch_remove')}
              >
                批量移除
              </button>
              <button
                className="h-9 px-4 bg-slate-50 text-slate-600 rounded-md text-sm"
                onClick={() => handleAction('export')}
              >
                导出
              </button>
            </div>

            <div className="px-6 py-4 overflow-x-auto">
              <table className="min-w-[1100px] w-full text-sm">
                <thead className="text-slate-500">
                  <tr className="border-b border-slate-200">
                    <th className="py-3 text-left w-8"><input type="checkbox" /></th>
                    <th className="py-3 text-left">员工姓名</th>
                    <th className="py-3 text-left">员工ID</th>
                    <th className="py-3 text-left">成员手机号</th>
                    <th className="py-3 text-left">部门</th>
                    <th className="py-3 text-left">集运人员</th>
                    <th className="py-3 text-left">集运人员手机号</th>
                    <th className="py-3 text-left">客户数</th>
                    <th className="py-3 text-left">托管IP</th>
                    <th className="py-3 text-left">托管状态</th>
                    <th className="py-3 text-left">托管时间</th>
                    <th className="py-3 text-left">操作</th>
                  </tr>
                </thead>
                <tbody>
                  {tableRows.map((row) => (
                    <tr key={row.id} className="border-b border-slate-100 hover:bg-slate-50">
                      <td className="py-3"><input type="checkbox" onChange={() => {
                        setSelectedRows((prev) => (
                          prev.includes(row.id)
                            ? prev.filter((item) => item !== row.id)
                            : [...prev, row.id]
                        ));
                      }} /></td>
                      <td className="py-3">{row.member_name}</td>
                      <td className="py-3">{row.member_id}</td>
                      <td className="py-3">{row.member_phone}</td>
                      <td className="py-3 max-w-[160px] truncate" title={row.department}>{row.department}</td>
                      <td className="py-3">{row.operator_name}</td>
                      <td className="py-3">{row.operator_phone}</td>
                      <td className="py-3">{row.customer_count}</td>
                      <td className="py-3 max-w-[200px] truncate" title={row.proxy_ip}>{row.proxy_ip}</td>
                      <td className="py-3">
                        <span className={`px-2 py-1 rounded-md text-xs ${
                          row.status === 'online' ? 'bg-blue-50 text-blue-600' :
                          row.status === 'wecom_offline' ? 'bg-orange-50 text-orange-600' :
                          'bg-red-50 text-red-600'
                        }`}>
                          {row.status === 'online' ? '在线' : row.status === 'wecom_offline' ? '企微离线' : '机器人离线'}
                        </span>
                      </td>
                      <td className="py-3">{row.managed_at}</td>
                      <td className="py-3 text-blue-600">
                        <button className="mr-3" onClick={() => handleAction('remind_login')}>提醒登录</button>
                        <button onClick={() => handleAction('input_code')}>输入验证码</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>

              <div className="flex items-center justify-between text-sm text-slate-500 pt-4">
                <div>共 {tableRows.length} 条</div>
                <div className="flex items-center gap-2">
                  <span>10条/页</span>
                  <button className="w-8 h-8 border rounded-md">1</button>
                  <button className="w-8 h-8 border rounded-md">2</button>
                  <button className="w-8 h-8 border rounded-md">3</button>
                  <span>前往</span>
                  <input className="w-10 h-8 border rounded-md text-center" defaultValue="1" />
                  <span>页</span>
                </div>
              </div>
            </div>
          </div>
        </Layout.Content>
      </Layout>

      {modalOpen ? (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
          <div className={`bg-white rounded-lg shadow-xl ${
            modalType === 'add' ? 'w-[1100px]' : 
            modalType === 'input_code' ? 'w-[400px]' : 
            'w-[400px]'
          }`}>
            <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
              <div className="text-base font-semibold">
                {modalType === 'add' ? '选择托管企业成员' : 
                 modalType === 'assign' ? '批量分配集运人员' :
                 '输入验证码'}
              </div>
              <button className="text-slate-400" onClick={handleCancelModal}>×</button>
            </div>
            
            {modalType === 'add' ? (
              <div className="p-6 grid grid-cols-4 gap-4">
                {/* Column 1: Tree Contact List (Department + Members) */}
                <div className="col-span-1 border border-slate-200 rounded-md p-3 flex flex-col h-[340px]">
                  <div className="text-sm font-semibold text-slate-700 mb-3">选择成员</div>
                  <div className="flex items-center gap-2 mb-3">
                    <input 
                      className="flex-1 h-8 border border-slate-200 rounded-md px-2 text-sm" 
                      placeholder="搜索成员/部门" 
                      value={treeSearch}
                      onChange={(e) => setTreeSearch(e.target.value)}
                    />
                  </div>
                  <div className="flex-1 overflow-auto text-sm text-slate-600 space-y-1">
                    {treeData.map(({ dept, members, expanded }) => (
                      <div key={dept}>
                        <div
                          className={`flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-slate-50 ${selectedDepartment === dept ? 'bg-slate-100' : ''}`}
                          onClick={() => toggleDept(dept)}
                        >
                          <span className="text-slate-400 w-4 inline-block text-center">{expanded ? '▾' : '▸'}</span>
                          <span className="font-medium text-slate-700">📁 {dept}</span>
                        </div>
                        {expanded && (
                          <div className="pl-6 space-y-1 mt-1">
                            {members.map(member => (
                              <div
                                key={member}
                                className={`cursor-pointer p-1 rounded flex items-center gap-2 ${targetMember === member ? 'bg-blue-50 text-blue-600' : 'hover:bg-slate-50'}`}
                                onClick={() => {
                                  setTargetMember(member);
                                  setSelectedDepartment(dept);
                                }}
                              >
                                <span className="text-xs">👤</span>
                                <span>{member}</span>
                              </div>
                            ))}
                            {members.length === 0 && <div className="text-slate-400 text-xs pl-1">无成员</div>}
                          </div>
                        )}
                      </div>
                    ))}
                    {treeData.length === 0 && (
                      <div className="text-center text-slate-400 py-10">未找到相关结果</div>
                    )}
                  </div>
                </div>

                {/* Column 2: Selected Range */}
                <div className="border border-slate-200 rounded-md p-3 h-[340px]">
                  <div className="text-sm font-semibold text-slate-700 mb-3">已选择成员</div>
                  <div className="text-sm text-slate-500">
                    {targetMember ? (
                      <div className="p-2 bg-slate-50 rounded text-slate-700 border border-slate-200 flex items-center justify-between group">
                        <span>{targetMember}</span>
                        <button 
                          className="text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100"
                          onClick={() => setTargetMember('')}
                        >
                          ×
                        </button>
                      </div>
                    ) : '暂无已选成员'}
                  </div>
                </div>

                {/* Column 3: Operator */}
                <div className="border border-slate-200 rounded-md p-3 h-[340px] flex flex-col">
                  <div className="text-sm font-semibold text-slate-700 mb-3">选择集运人员</div>
                  <input className="w-full h-8 border border-slate-200 rounded-md px-2 text-sm mb-3" placeholder="搜索集运人员" />
                  <div className="space-y-2 flex-1 overflow-auto">
                    {operatorOptions.map((item: { id: string; name: string }) => (
                      <button
                        key={item.id}
                        className={`w-full text-left text-sm px-3 py-2 border rounded-md ${selectedOperator === item.name ? 'border-blue-500 bg-blue-50 text-blue-600' : 'border-slate-200 text-slate-600'}`}
                        onClick={() => setSelectedOperator(item.name)}
                      >
                        {item.name}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Column 4: Region */}
                <div className="border border-slate-200 rounded-md p-3 h-[340px]">
                  <div className="text-sm font-semibold text-slate-700 mb-3">选择虚拟机归属地域</div>
                  <select
                    className="w-full h-8 border border-slate-200 rounded-md px-2 text-sm"
                    value={selectedRegion}
                    onChange={(e) => setSelectedRegion(e.target.value)}
                  >
                    <option value="">请选择归属地域</option>
                    <option value="harbin">哈尔滨</option>
                    <option value="mudanjiang">牡丹江</option>
                    <option value="jiamusi">佳木斯</option>
                  </select>
                </div>
              </div>
            ) : modalType === 'assign' ? (
              <div className="p-6">
                <div className="mb-4 text-sm text-slate-600">
                  已选择 <span className="font-bold text-blue-600">{selectedRows.length}</span> 个账号
                </div>
                <div className="border border-slate-200 rounded-md p-3 h-[340px] flex flex-col">
                  <div className="text-sm font-semibold text-slate-700 mb-3">选择集运人员</div>
                  <input className="w-full h-8 border border-slate-200 rounded-md px-2 text-sm mb-3" placeholder="搜索集运人员" />
                  <div className="space-y-2 flex-1 overflow-auto">
                    {operatorOptions.map((item: { id: string; name: string }) => (
                      <button
                        key={item.id}
                        className={`w-full text-left text-sm px-3 py-2 border rounded-md ${selectedOperator === item.name ? 'border-blue-500 bg-blue-50 text-blue-600' : 'border-slate-200 text-slate-600'}`}
                        onClick={() => setSelectedOperator(item.name)}
                      >
                        {item.name}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            ) : (
              <div className="p-6">
                <div className="mb-3 text-sm text-slate-600">请输入6位数字验证码</div>
                <input
                  className="w-full h-10 border border-slate-300 rounded-md px-3 text-lg tracking-widest text-center"
                  placeholder="000000"
                  maxLength={6}
                  value={verifyCode}
                  onChange={(e) => {
                    const val = e.target.value.replace(/\D/g, '');
                    setVerifyCode(val);
                  }}
                />
              </div>
            )}
            
            <div className="px-6 py-4 border-t border-slate-200 flex justify-end gap-3">
              <button className="h-9 px-4 border border-slate-200 rounded-md text-sm" onClick={handleCancelModal}>取消</button>
              <button className="h-9 px-4 bg-blue-600 text-white rounded-md text-sm" onClick={handleConfirmModal}>确定</button>
            </div>
          </div>
        </div>
      ) : null}

      {toastMessage && (
        <div className="fixed top-10 left-1/2 -translate-x-1/2 bg-slate-800 text-white px-4 py-2 rounded-md shadow-lg text-sm transition-opacity animate-fade-in-down z-50">
          {toastMessage}
        </div>
      )}

      <div className="hidden">{selectedRows.join(',')}</div>
    </Layout>
  );
});

export default Component;