import { useCallback, useEffect, useRef, useState } from 'react';
import type { ComponentType } from 'react';
import { Card, Col, Row, Tag, Button, Space, message, Spin, Empty, InputNumber, Modal, Alert, Result, Popconfirm } from 'antd';
import {
  ApiOutlined,
  BulbOutlined,
  SendOutlined,
  StopOutlined,
  DeleteOutlined,
  InfoCircleOutlined,
  PoweroffOutlined,
  ThunderboltOutlined,
  CloudOutlined,
  FireOutlined,
} from '@ant-design/icons';
import { get, post } from '../api/http';

interface Device {
  id: string;
  deviceKey?: string;
  name: string;
  onlineStatus?: string;
}

interface IRResult {
  hasResult: boolean;
  result?: {
    action: string;
    success: boolean;
    no: number;
    timestamp: string;
  };
  learnedCodes?: number[];
}

// 空调遥控按钮配置（顺序学习）
const AIRCON_BUTTONS = [
  { key: 'power-off', label: '关机', no: 1, icon: 'PoweroffOutlined' },
  { key: 'power-on', label: '开机', no: 2, icon: 'PoweroffOutlined' },
  { key: 'cooling', label: '制冷', no: 6, icon: 'CloudOutlined' },
  { key: 'heating', label: '制热', no: 7, icon: 'FireOutlined' },
  { key: 'dehumid', label: '除湿', no: 5, icon: 'ThunderboltOutlined' },
];

// 温度按钮配置（单独学习）
const TEMP_BUTTONS = [
  { key: 'temp-23', label: '23度', no: 3 },
  { key: 'temp-25', label: '25度', no: 4 },
  { key: 'temp-27', label: '27度', no: 8 },
  { key: 'temp-29', label: '29度', no: 9 },
];

// 图标名 -> 图标组件映射
const ICON_MAP: Record<string, ComponentType> = {
  PoweroffOutlined,
  ThunderboltOutlined,
  CloudOutlined,
  FireOutlined,
};

// 顺序学习的编号顺序（与 AIRCON_BUTTONS 的 no 字段一致）
const LEARN_SEQUENCE = [1, 2, 6, 7, 5];

// 所有可学习的按钮（用于查找按钮标签）
const ALL_BUTTONS = [...AIRCON_BUTTONS, ...TEMP_BUTTONS];

// 闪烁动画样式（正在学习的按钮高亮闪烁）
const blinkStyle = `
@keyframes ir-blink {
  0%, 100% { background-color: #faad14; }
  50% { background-color: #fffbe6; }
}
.ir-blinking {
  animation: ir-blink 0.8s infinite;
}
`;

const IRControl = () => {
  const [devices, setDevices] = useState<Device[]>([]);
  const [loading, setLoading] = useState(false);
  const [sending, setSending] = useState('');
  const [learnModal, setLearnModal] = useState<{ open: boolean; deviceId: string; no: number }>({ open: false, deviceId: '', no: 100 });
  const [emitNo, setEmitNo] = useState<Record<string, number>>({});
  const [irResults, setIrResults] = useState<Record<string, { action: string; success: boolean; no: number } | undefined>>({});
  const [deviceInfo, setDeviceInfo] = useState<Record<string, { signal?: number; lastSeen?: string; learnedCodes?: number[] } | undefined>>({});
  // 空调顺序学习状态：记录当前正在学习的设备与编号
  const [learningDevice, setLearningDevice] = useState<{ deviceId: string; currentNo: number } | null>(null);
  // 使用 ref 跟踪 learningDevice，避免轮询中的闭包陷阱
  const learningDeviceRef = useRef<{ deviceId: string; currentNo: number } | null>(null);
  // 空调按钮发射 loading（key = deviceId + button.key）
  const [airconSending, setAirconSending] = useState<string>('');

  // 同步更新 state 与 ref
  const updateLearningDevice = (val: { deviceId: string; currentNo: number } | null) => {
    learningDeviceRef.current = val;
    setLearningDevice(val);
  };

  const fetchDevices = useCallback(async () => {
    setLoading(true);
    try {
      const data = await get<Device[] | { items: Device[] }>('/devices');
      const all = Array.isArray(data) ? data : data.items ?? [];
      // 只显示红外控制器（名称包含"红外"）
      const items = all.filter((d) => d.name.includes('红外'));
      setDevices(items);
    } catch {
      message.error('加载设备列表失败');
    }
    setLoading(false);
  }, []);

  useEffect(() => {
    fetchDevices();
  }, [fetchDevices]);

  const actionLabel = (action: string) => {
    const labels: Record<string, string> = { learn: '学习', emit: '发射', learnCancel: '取消学习', erase: '擦除' };
    return labels[action] || action;
  };

  // 擦除结果轮询：erase 命令可能不返回响应，短时间轮询确认
  const pollEraseResult = async (deviceId: string) => {
    const startTime = Date.now();
    for (let i = 0; i < 5; i++) {
      await new Promise((r) => setTimeout(r, 2000));
      try {
        const data = await get<IRResult>(`/devices/${deviceId}/ir/status`, { silent: true });
        if (data.hasResult && data.result) {
          const resultTime = new Date(data.result.timestamp).getTime();
          if (resultTime >= startTime && data.result.action === 'erase') {
            if (data.result.success) {
              message.success('擦除成功');
            } else {
              message.warning('设备已进入擦除模式，本地列表已清空');
            }
            return;
          }
        }
      } catch {}
    }
    // 超时：设备可能不返回 erase 响应，本地列表已清空
    message.info('设备未响应擦除结果，本地红外码列表已清空');
  };

  // 轮询红外操作结果（原有功能：用于手动学习/发射/擦除）
  const pollIRResult = async (deviceId: string, action: string, no?: number) => {
    for (let i = 0; i < 15; i++) {
      await new Promise((r) => setTimeout(r, 2000));
      try {
        const data = await get<IRResult>(`/devices/${deviceId}/ir/status`, { silent: true });
        if (data.hasResult && data.result) {
          // 检查是否是本次操作的结果（action 匹配，且时间戳在最近 30 秒内）
          const resultTime = new Date(data.result.timestamp).getTime();
          if (Date.now() - resultTime < 30000) {
            if (data.result.action === action && (no === undefined || data.result.no === no || data.result.no === 0)) {
              // success=false 表示设备已进入操作模式（如进入学习/擦除模式），不是真正失败，继续轮询
              if (!data.result.success) {
                continue;
              }
              setIrResults((prev) => ({ ...prev, [deviceId]: data.result }));
              // 擦除成功后清空本地已学习红外码列表
              if (action === 'erase') {
                setDeviceInfo((prev) => {
                  const curInfo = prev?.[deviceId];
                  return { ...prev, [deviceId]: { ...curInfo, learnedCodes: [] } };
                });
              }
              message.success(`${actionLabel(data.result.action)}成功${data.result.no ? `（编号 ${data.result.no}）` : ''}`);
              return;
            }
          }
        }
      } catch {}
    }
    message.warning(`${actionLabel(action)}等待结果超时，请重试`);
  };

  // 轮询设备信息（info 响应后 signal 会被入库）
  const pollDeviceInfo = async (device: Device) => {
    const key = device.deviceKey || device.id;
    for (let i = 0; i < 10; i++) {
      await new Promise((r) => setTimeout(r, 2000));
      try {
        // 查询遥测数据（signal）
        const telemetry = await get<{ metric: string; value: number; timestamp: string }[]>(
          `/telemetry/${key}/latest`, { silent: true }
        );
        // 查询已学习的红外码
        const irStatus = await get<{ hasResult: boolean; learnedCodes?: number[] }>(
          `/devices/${device.id}/ir/status`, { silent: true }
        );
        const signalRec = Array.isArray(telemetry) ? telemetry.find((r) => r.metric === 'signal') : undefined;
        if (signalRec || irStatus.learnedCodes) {
          setDeviceInfo((prev) => ({
            ...prev,
            [device.id]: {
              signal: signalRec?.value,
              lastSeen: signalRec?.timestamp,
              learnedCodes: irStatus.learnedCodes || [],
            },
          }));
          if (signalRec) {
            const codes = irStatus.learnedCodes || [];
            message.success(`设备信息已更新：信号 ${signalRec.value}，已学习红外码 ${codes.length} 个`);
          }
          return;
        }
      } catch {}
    }
    message.warning('设备未响应，可能已离线');
  };

  // 原有通用指令发送（左侧按钮使用）
  const sendIR = async (device: Device, action: 'learn' | 'emit' | 'cancel' | 'erase' | 'info', no?: number) => {
    const key = device.id + action + (no ?? '');
    setSending(key);
    // 清除之前的结果
    setIrResults((prev) => ({ ...prev, [device.id]: undefined }));
    try {
      if (action === 'learn' && no !== undefined) {
        await post(`/devices/${device.id}/ir/learn`, { no });
        message.success(`学习指令已发送（编号 ${no}），请将遥控器对准设备按键`);
        setLearnModal({ open: true, deviceId: device.id, no });
        pollIRResult(device.id, 'learn', no);
      } else if (action === 'emit' && no !== undefined) {
        await post(`/devices/${device.id}/ir/emit`, { no });
        message.success(`发射指令已发送（编号 ${no}）`);
        pollIRResult(device.id, 'emit', no);
      } else if (action === 'cancel') {
        await post(`/devices/${device.id}/ir/cancel`);
        message.success('取消学习指令已发送');
        setLearnModal({ ...learnModal, open: false });
        // learnCancel 仅在学习模式下有响应，不轮询结果
      } else if (action === 'erase') {
        await post(`/devices/${device.id}/ir/erase`);
        // 立即清空本地已学习红外码列表
        setDeviceInfo((prev) => {
          const curInfo = prev?.[device.id];
          return { ...prev, [device.id]: { ...curInfo, learnedCodes: [] } };
        });
        message.success('擦除指令已发送，已清空本地红外码列表');
        // erase 可能像 learnCancel 一样不返回响应，短时间轮询确认
        pollEraseResult(device.id);
      } else if (action === 'info') {
        await post(`/devices/${device.id}/plug/info`);
        message.success('查询信息指令已发送，等待设备响应...');
        // 轮询遥测数据（info 响应中的 signal 会被入库）
        pollDeviceInfo(device);
      }
    } catch (err: any) {
      const errMsg = err?.response?.data?.error || '指令发送失败';
      message.error(errMsg);
    }
    setSending('');
  };

  // 空调按钮发射（右侧空调面板使用）
  const emitAircon = async (deviceId: string, button: typeof AIRCON_BUTTONS[number]) => {
    // 正在顺序学习中，不触发发射
    if (learningDeviceRef.current && learningDeviceRef.current.deviceId === deviceId) {
      return;
    }
    const key = deviceId + button.key;
    setAirconSending(key);
    try {
      await post(`/devices/${deviceId}/ir/emit`, { no: button.no });
      message.success(`【${button.label}】指令已发送`);
    } catch (err: any) {
      const errMsg = err?.response?.data?.error || `${button.label}指令发送失败`;
      message.error(errMsg);
    }
    setAirconSending('');
  };

  // 顺序学习轮询：循环查询学习结果，成功后自动进入下一个编号
  // startTime 用于过滤旧结果，只接受该时间之后产生的学习结果
  const pollSequentialLearn = async (deviceId: string, no: number, startTime: number) => {
    for (let i = 0; i < 15; i++) {
      await new Promise((r) => setTimeout(r, 2000));
      // 通过 ref 检查是否已被取消或已切换到下一个编号
      const cur = learningDeviceRef.current;
      if (!cur || cur.deviceId !== deviceId || cur.currentNo !== no) {
        return; // 已被取消或已切换
      }
      try {
        const data = await get<IRResult>(`/devices/${deviceId}/ir/status`, { silent: true });
        if (data.hasResult && data.result) {
          const resultTime = new Date(data.result.timestamp).getTime();
          // 只接受 startTime 之后的结果，避免读到上一个编号的旧结果
          // 设备学习成功时返回 no=0，失败时返回发送的编号，因此匹配条件需兼容 no=0
          if (resultTime >= startTime && data.result.action === 'learn' && (data.result.no === no || data.result.no === 0)) {
            const curButton = ALL_BUTTONS.find((b) => b.no === no);
            if (data.result.success) {
              // 学习成功，更新本地 learnedCodes
              setDeviceInfo((prev) => {
                const curInfo = prev?.[deviceId];
                const codes = curInfo?.learnedCodes ?? [];
                if (!codes.includes(no)) codes.push(no);
                return { ...prev, [deviceId]: { ...curInfo, learnedCodes: [...codes] } };
              });
              // 查找当前编号在学习序列中的位置，决定下一个学习的编号
              const seqIndex = LEARN_SEQUENCE.indexOf(no);
              const nextNo = seqIndex >= 0 && seqIndex + 1 < LEARN_SEQUENCE.length ? LEARN_SEQUENCE[seqIndex + 1] : null;
              if (nextNo !== null) {
                const nextStartTime = Date.now();
                await post(`/devices/${deviceId}/ir/learn`, { no: nextNo });
                updateLearningDevice({ deviceId, currentNo: nextNo });
                const nextLabel = ALL_BUTTONS.find((b) => b.no === nextNo)?.label;
                message.success(`【${curButton?.label}】学习成功，请按下遥控器的【${nextLabel}】键`);
                pollSequentialLearn(deviceId, nextNo, nextStartTime);
              } else {
                // 全部完成
                updateLearningDevice(null);
                message.success('全部学习完成');
              }
              return;
            }
            // success=false 表示设备已进入学习模式，等待用户按遥控器，继续轮询
          }
        }
      } catch {}
    }
    // 超时：仅当仍处于当前学习状态时才提示
    const cur = learningDeviceRef.current;
    if (cur && cur.deviceId === deviceId && cur.currentNo === no) {
      updateLearningDevice(null);
      message.warning('学习超时，请重试');
    }
  };

  // 开始顺序学习：从学习序列的第一个编号开始
  const startSequentialLearn = async (deviceId: string) => {
    try {
      const firstNo = LEARN_SEQUENCE[0];
      const startTime = Date.now();
      await post(`/devices/${deviceId}/ir/learn`, { no: firstNo });
      updateLearningDevice({ deviceId, currentNo: firstNo });
      const firstLabel = ALL_BUTTONS.find((b) => b.no === firstNo)?.label;
      message.success(`开始学习：请按下遥控器的【${firstLabel}】键`);
      pollSequentialLearn(deviceId, firstNo, startTime);
    } catch (err: any) {
      const errMsg = err?.response?.data?.error || '学习指令发送失败';
      message.error(errMsg);
    }
  };

  // 取消顺序学习
  const cancelSequentialLearn = async (deviceId: string) => {
    try {
      await post(`/devices/${deviceId}/ir/cancel`, {});
    } catch {}
    updateLearningDevice(null);
    message.success('已取消学习');
  };

  // 温度按钮单独学习
  const learnSingleTemp = async (deviceId: string, no: number, label: string) => {
    // 如果正在顺序学习，不允许单独学习
    if (learningDeviceRef.current !== null) {
      message.warning('正在顺序学习中，请先取消');
      return;
    }
    try {
      const startTime = Date.now();
      updateLearningDevice({ deviceId, currentNo: no });
      await post(`/devices/${deviceId}/ir/learn`, { no });
      message.success(`请按下遥控器的【${label}】键`);
      // 轮询单次学习结果
      for (let i = 0; i < 15; i++) {
        await new Promise((r) => setTimeout(r, 2000));
        const cur = learningDeviceRef.current as { deviceId: string; currentNo: number } | null;
        if (!cur || cur.deviceId !== deviceId || cur.currentNo !== no) {
          return; // 已被取消
        }
        try {
          const data = await get<IRResult>(`/devices/${deviceId}/ir/status`, { silent: true });
          if (data.hasResult && data.result) {
            const resultTime = new Date(data.result.timestamp).getTime();
            if (resultTime >= startTime && data.result.action === 'learn' && (data.result.no === no || data.result.no === 0)) {
              if (!data.result.success) {
                continue; // 进入学习模式，继续等
              }
              // 学习成功
              setDeviceInfo((prev) => {
                const curInfo = prev?.[deviceId];
                const codes = curInfo?.learnedCodes ?? [];
                if (!codes.includes(no)) codes.push(no);
                return { ...prev, [deviceId]: { ...curInfo, learnedCodes: [...codes] } };
              });
              updateLearningDevice(null);
              message.success(`【${label}】学习成功`);
              return;
            }
          }
        } catch {}
      }
      // 超时
      const cur = learningDeviceRef.current as { deviceId: string; currentNo: number } | null;
      if (cur && cur.deviceId === deviceId && cur.currentNo === no) {
        updateLearningDevice(null);
        message.warning(`【${label}】学习超时，请重试`);
      }
    } catch (err: any) {
      updateLearningDevice(null);
      const errMsg = err?.response?.data?.error || '学习指令发送失败';
      message.error(errMsg);
    }
  };

  const isOnline = (d: Device) => d.onlineStatus === 'online';

  if (!loading && devices.length === 0) {
    return <Empty description="暂无设备" />;
  }

  return (
    <Spin spinning={loading}>
      <style>{blinkStyle}</style>
      <Row gutter={[16, 16]}>
        {devices.map((d) => {
          const online = isOnline(d);
          const currentNo = emitNo[d.id] ?? 100;
          const irResult = irResults[d.id];
          const info = deviceInfo[d.id];
          const learnedCodes = info?.learnedCodes ?? [];
          // 当前设备是否处于顺序学习
          const isLearning = learningDevice?.deviceId === d.id;
          const learningNo = isLearning ? learningDevice!.currentNo : null;

          return (
            <Col key={d.id} span={24}>
              <Card
                title={<Space><ApiOutlined />{d.name}</Space>}
                extra={<Tag color={online ? 'green' : 'default'}>{online ? '在线' : '离线'}</Tag>}
              >
                <Row gutter={[24, 0]}>
                  {/* 左侧：原有通用功能 */}
                  <Col span={12}>
                    {/* 操作结果反馈 */}
                    {irResult && (
                      <div style={{ marginBottom: 16 }}>
                        <Result
                          status={irResult.success ? 'success' : 'error'}
                          title={`${actionLabel(irResult.action)}${irResult.success ? '成功' : '失败'}`}
                          subTitle={irResult.no ? `红外码编号: ${irResult.no}` : undefined}
                          style={{ padding: '12px 0' }}
                        />
                      </div>
                    )}

                    {/* 设备信息 */}
                    {info && (
                      <div style={{ marginBottom: 16, padding: 12, background: '#f5f5f5', borderRadius: 8 }}>
                        <div style={{ fontSize: 13, color: '#666' }}>设备信息</div>
                        <div style={{ marginTop: 4 }}>
                          4G 信号：<Tag color={(info.signal ?? 0) >= 20 ? 'green' : (info.signal ?? 0) >= 10 ? 'orange' : 'red'}>{info.signal ?? '--'}/31</Tag>
                        </div>
                        <div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
                          最后上报：{info.lastSeen ? new Date(info.lastSeen).toLocaleTimeString() : '--'}
                        </div>
                        <div style={{ marginTop: 8, fontSize: 13, color: '#666' }}>
                          已学习红外码：
                          {info.learnedCodes && info.learnedCodes.length > 0 ? (
                            <Space size={4} wrap style={{ marginTop: 4 }}>
                              {info.learnedCodes.slice().sort((a, b) => a - b).map((no) => (
                                <Tag key={no} color="blue" style={{ cursor: 'pointer' }} onClick={() => setEmitNo({ ...emitNo, [d.id]: no })}>
                                  {no}
                                </Tag>
                              ))}
                            </Space>
                          ) : (
                            <span style={{ color: '#999' }}>暂无</span>
                          )}
                        </div>
                      </div>
                    )}

                    {/* 发射红外码 */}
                    <div style={{ marginBottom: 16 }}>
                      <div style={{ marginBottom: 8, fontWeight: 500 }}>发射红外码</div>
                      <Space>
                        <InputNumber
                          min={1}
                          max={248}
                          value={currentNo}
                          onChange={(v) => setEmitNo({ ...emitNo, [d.id]: v ?? 100 })}
                          style={{ width: 80 }}
                          disabled={isLearning}
                        />
                        <Button
                          type="primary"
                          icon={<SendOutlined />}
                          loading={sending === d.id + 'emit' + currentNo}
                          onClick={() => sendIR(d, 'emit', currentNo)}
                          disabled={isLearning}
                        >
                          发射
                        </Button>
                      </Space>
                    </div>

                    {/* 学习红外码 */}
                    <div style={{ marginBottom: 16 }}>
                      <div style={{ marginBottom: 8, fontWeight: 500 }}>学习红外码</div>
                      <Space>
                        <InputNumber
                          min={1}
                          max={248}
                          value={learnModal.no}
                          onChange={(v) => setLearnModal({ ...learnModal, no: v ?? 100 })}
                          style={{ width: 80 }}
                          disabled={isLearning}
                        />
                        <Button
                          icon={<BulbOutlined />}
                          loading={sending === d.id + 'learn' + learnModal.no}
                          onClick={() => sendIR(d, 'learn', learnModal.no)}
                          disabled={isLearning}
                        >
                          开始学习
                        </Button>
                      </Space>
                    </div>

                    {/* 其他操作 */}
                    <Space style={{ width: '100%', justifyContent: 'center' }}>
                      <Button
                        size="small"
                        icon={<StopOutlined />}
                        loading={sending === d.id + 'cancel'}
                        onClick={() => sendIR(d, 'cancel')}
                      >
                        取消学习
                      </Button>
                      <Button
                        size="small"
                        icon={<InfoCircleOutlined />}
                        loading={sending === d.id + 'info'}
                        onClick={() => sendIR(d, 'info')}
                      >
                        查询信息
                      </Button>
                      <Popconfirm
                        title="确认擦除全部红外码？"
                        okText="确认"
                        cancelText="取消"
                        okButtonProps={{ danger: true }}
                        onConfirm={() => sendIR(d, 'erase')}
                      >
                        <Button
                          size="small"
                          danger
                          icon={<DeleteOutlined />}
                          loading={sending === d.id + 'erase'}
                        >
                          擦除全部
                        </Button>
                      </Popconfirm>
                    </Space>
                  </Col>

                  {/* 右侧：空调遥控面板 */}
                  <Col span={12}>
                    <div style={{ marginBottom: 12, fontWeight: 600, fontSize: 15 }}>
                      空调遥控面板
                      {isLearning && (
                        <Tag color="processing" style={{ marginLeft: 8 }}>学习中...</Tag>
                      )}
                    </div>

                    {/* 开始学习 / 取消学习 按钮 */}
                    <div style={{ marginBottom: 12 }}>
                      {isLearning ? (
                        <Button
                          block
                          size="large"
                          danger
                          icon={<StopOutlined />}
                          style={{ height: 60, fontSize: 16, fontWeight: 500 }}
                          onClick={() => cancelSequentialLearn(d.id)}
                        >
                          取消学习
                        </Button>
                      ) : (
                        <Button
                          block
                          size="large"
                          type="primary"
                          icon={<BulbOutlined />}
                          style={{ height: 60, fontSize: 16, fontWeight: 500 }}
                          onClick={() => startSequentialLearn(d.id)}
                        >
                          开始学习
                        </Button>
                      )}
                    </div>

                    {/* 空调控制按钮（顺序学习） */}
                    <Row gutter={[12, 12]}>
                      {AIRCON_BUTTONS.map((btn) => {
                        const Icon = ICON_MAP[btn.icon];
                        const learned = learnedCodes.includes(btn.no);
                        const isBlinking = isLearning && learningNo === btn.no;
                        const isLoading = airconSending === d.id + btn.key;
                        return (
                          <Col key={btn.key} span={12}>
                            <Button
                              block
                              size="large"
                              icon={Icon ? <Icon /> : undefined}
                              loading={isLoading}
                              className={isBlinking ? 'ir-blinking' : undefined}
                              style={{
                                height: 80,
                                fontSize: 16,
                                fontWeight: 500,
                                ...(learned && !isBlinking
                                  ? { borderColor: '#52c41a', color: '#52c41a' }
                                  : {}),
                              }}
                              onClick={() => emitAircon(d.id, btn)}
                            >
                              {btn.label}
                            </Button>
                          </Col>
                        );
                      })}
                    </Row>

                    {/* 温度按钮（单独学习） */}
                    <div style={{ marginTop: 16, marginBottom: 8, fontSize: 13, color: '#999' }}>
                      温度按钮（点击未学习的按钮开始单独学习）
                    </div>
                    <Row gutter={[12, 12]}>
                      {TEMP_BUTTONS.map((btn) => {
                        const learned = learnedCodes.includes(btn.no);
                        const isBlinking = isLearning && learningNo === btn.no;
                        return (
                          <Col key={btn.key} span={6}>
                            <Button
                              block
                              size="large"
                              className={isBlinking ? 'ir-blinking' : undefined}
                              style={{
                                height: 60,
                                fontSize: 15,
                                fontWeight: 500,
                                ...(learned && !isBlinking
                                  ? { borderColor: '#52c41a', color: '#52c41a' }
                                  : {}),
                              }}
                              onClick={() => {
                                if (isBlinking) {
                                  // 正在学习，取消
                                  cancelSequentialLearn(d.id);
                                } else if (learned) {
                                  // 已学习，发射
                                  emitAircon(d.id, { ...btn, icon: '' });
                                } else {
                                  // 未学习，开始单独学习
                                  learnSingleTemp(d.id, btn.no, btn.label);
                                }
                              }}
                            >
                              {btn.label}
                            </Button>
                          </Col>
                        );
                      })}
                    </Row>

                    {isLearning && (
                      <div style={{ marginTop: 12, fontSize: 13, color: '#666' }}>
                        当前学习：【{ALL_BUTTONS.find((b) => b.no === learningNo)?.label}】，请将遥控器对准设备按键
                      </div>
                    )}
                  </Col>
                </Row>
              </Card>
            </Col>
          );
        })}
      </Row>

      {/* 学习中提示弹窗（保留原有功能） */}
      <Modal
        open={learnModal.open}
        title="红外码学习中..."
        onCancel={() => {
          post(`/devices/${learnModal.deviceId}/ir/cancel`, {}).catch(() => {});
          setLearnModal({ ...learnModal, open: false });
        }}
        footer={[
          <Button key="cancel" onClick={() => {
            post(`/devices/${learnModal.deviceId}/ir/cancel`, {}).catch(() => {});
            setLearnModal({ ...learnModal, open: false });
          }}>
            取消学习
          </Button>,
          <Button key="done" type="primary" onClick={() => setLearnModal({ ...learnModal, open: false })}>
            学习完成
          </Button>,
        ]}
      >
        <Alert
          type="info"
          showIcon
          message={`正在学习编号 ${learnModal.no} 的红外码`}
          description={'请将遥控器对准红外控制器，按一下对应按键。听到"嘀"一声表示学习成功。'}
        />
      </Modal>
    </Spin>
  );
};

export default IRControl;