import React, { useState, useEffect } from 'react';
import { Plus, Search, Edit2, Trash2, MoreVertical, MapPin, Eye } from 'lucide-react';
import { Button } from 'antd';
import { Button as UIButton } from './ui/button';
import { useTranslation } from 'react-i18next';
import { getStrDictOptions, getDictOptions, setDictOptions, getDictLabel, DICT_TYPE } from '../utils/dict';
import { dictDataApi } from '../api/DictData';
import { postApi, PostVO } from '../api/Post';

interface TableRow {
  id: number;
  [key: string]: any;
}

export default function LocationManagement() {
  const { t } = useTranslation();
  const [searchTerm, setSearchTerm] = useState('');
  const [showAddModal, setShowAddModal] = useState(false);
  const [editingItem, setEditingItem] = useState<TableRow | null>(null);
  
  // 字典选项
  const [powerSourceOptions, setPowerSourceOptions] = useState<Array<{ label: string; value: string }>>([]);
  const [pointGroupOptions, setPointGroupOptions] = useState<Array<{ label: string; value: number }>>([]);
  // 岗位列表
  const [postList, setPostList] = useState<PostVO[]>([]);

  // 加载字典数据和岗位列表
  useEffect(() => {
    const loadDictData = async () => {
      try {
        // 获取岗位数据
        try {
          const postRes = await postApi.getPostPage({ pageNo: 1, pageSize: -1 });
          const data = (postRes as any)?.data || postRes;
          const posts = data?.list || [];
          console.log('点位管理-岗位列表:', posts);
          setPostList(posts);
        } catch (postError) {
          console.error('获取岗位列表失败:', postError);
          setPostList([]);
        }

        // 获取能量源数据（从字典 power_source）
        try {
          const powerRes = await dictDataApi.getDictDataPage({ pageNo: 1, pageSize: -1, dictType: DICT_TYPE.POWER_SOURCE });
          const powerData = (powerRes as any)?.list ?? (powerRes as any)?.data?.list ?? (Array.isArray(powerRes) ? powerRes : []);
          const powerList = Array.isArray(powerData) ? powerData : [];
          console.log('点位管理-能量源字典数据:', powerList);
          setDictOptions(DICT_TYPE.POWER_SOURCE, powerList.map((item: any) => ({
            dictType: DICT_TYPE.POWER_SOURCE,
            label: item.label,
            value: item.value,
            colorType: item.colorType || '',
            cssClass: item.cssClass || '',
          })));
          const powerOptions = getStrDictOptions(DICT_TYPE.POWER_SOURCE);
          console.log('点位管理-能量源选项:', powerOptions);
          setPowerSourceOptions(powerOptions);
        } catch (powerError) {
          console.error('获取能量源字典失败:', powerError);
          setPowerSourceOptions([]);
        }

        // 获取点位分组数据（从字典 point_group）
        try {
          const dictRes = await dictDataApi.getDictDataPage({ pageNo: 1, pageSize: -1, dictType: DICT_TYPE.POINT_GROUP });
          const data = (dictRes as any)?.list ?? (dictRes as any)?.data?.list ?? (Array.isArray(dictRes) ? dictRes : []);
          const list = Array.isArray(data) ? data : [];
          console.log('点位管理-点位分组字典原始数据:', list);
          setDictOptions(DICT_TYPE.POINT_GROUP, list.map((item: any) => ({
            dictType: DICT_TYPE.POINT_GROUP,
            label: item.label,
            value: item.value,
            colorType: item.colorType || '',
            cssClass: item.cssClass || '',
          })));
          const options = getDictOptions(DICT_TYPE.POINT_GROUP).map((item) => ({
            label: item.label,
            value: Number(item.value),
          }));
          console.log('点位管理-点位分组选项（转换后）:', options);
          setPointGroupOptions(options);
        } catch (dictError) {
          console.error('获取点位分组字典失败:', dictError);
          setPointGroupOptions([]);
        }
      } catch (error) {
        console.error('加载字典数据失败:', error);
      }
    };
    loadDictData();
  }, []);

  // 点位数据
  const locationData: TableRow[] = [
    { 
      id: 1, 
      code: 'LOC-A-001', 
      name: 'A区1层配电室-1号柜', 
      area: 'A区',
      floor: '1层',
      building: '主楼',
      cabinet: '1号配电柜',
      lockPoint: 'LP-001',
      device: '断路器QF1',
      voltage: '380V',
      status: '正常',
      responsible: '张三',
      department: '运维部',
      installDate: '2024-01-15',
      lastCheck: '2025-12-01',
      checkCycle: '每月',
      remark: '主进线断路器',
      powerType: '1', // 能量源字典值
      lotoId: 1, // 点位分组字典值
      workstationId: 1 // 岗位ID
    },
    { 
      id: 2, 
      code: 'LOC-A-002', 
      name: 'A区1层配电室-1号柜', 
      area: 'A区',
      floor: '1层',
      building: '主楼',
      cabinet: '1号配电柜',
      lockPoint: 'LP-002',
      device: '断路器QF2',
      voltage: '380V',
      status: '正常',
      responsible: '张三',
      department: '运维部',
      installDate: '2024-01-15',
      lastCheck: '2025-12-01',
      checkCycle: '每月',
      remark: '照明回路',
      powerType: '2', // 能量源字典值
      lotoId: 2, // 点位分组字典值
      workstationId: 2 // 岗位ID
    },
    { 
      id: 3, 
      code: 'LOC-B-001', 
      name: 'B区地下室变压器房', 
      area: 'B区',
      floor: '地下1层',
      building: '附楼',
      cabinet: '变压器柜A',
      lockPoint: 'LP-003',
      device: '高压开关K1',
      voltage: '10kV',
      status: '正常',
      responsible: '李四',
      department: '技术部',
      installDate: '2024-01-10',
      lastCheck: '2025-12-03',
      checkCycle: '每周',
      remark: '高压侧进线',
      powerType: '1', // 能量源字典值
      lotoId: 3, // 点位分组字典值
      workstationId: 1 // 岗位ID
    },
    { 
      id: 4, 
      code: 'LOC-B-002', 
      name: 'B区地下室变压器房', 
      area: 'B区',
      floor: '地下1层',
      building: '附楼',
      cabinet: '变压器柜A',
      lockPoint: 'LP-004',
      device: '高压开关K2',
      voltage: '10kV',
      status: '维护中',
      responsible: '李四',
      department: '技术部',
      installDate: '2024-01-10',
      lastCheck: '2025-11-28',
      checkCycle: '每周',
      remark: '低压侧出线',
      powerType: '2', // 能量源字典值
      lotoId: 4, // 点位分组字典值
      workstationId: 2 // 岗位ID
    },
    { 
      id: 5, 
      code: 'LOC-C-001', 
      name: 'C区3层控制室', 
      area: 'C区',
      floor: '3层',
      building: '主楼',
      cabinet: '控制柜C1',
      lockPoint: 'LP-005',
      device: '控制开关S1',
      voltage: '220V',
      status: '正常',
      responsible: '王五',
      department: '运维部',
      installDate: '2024-03-05',
      lastCheck: '2025-11-30',
      checkCycle: '每月',
      remark: '空调控制',
      powerType: '1', // 能量源字典值
      lotoId: 1, // 点位分组字典值
      workstationId: 3 // 岗位ID
    },
    { 
      id: 6, 
      code: 'LOC-A-003', 
      name: 'A区2层配电室-2号柜', 
      area: 'A区',
      floor: '2层',
      building: '主楼',
      cabinet: '2号配电柜',
      lockPoint: 'LP-006',
      device: '断路器QF3',
      voltage: '380V',
      status: '正常',
      responsible: '张三',
      department: '运维部',
      installDate: '2024-02-20',
      lastCheck: '2025-12-02',
      checkCycle: '每月',
      remark: '动力配电',
      powerType: '2', // 能量源字典值
      lotoId: 2, // 点位分组字典值
      workstationId: 1 // 岗位ID
    },
  ];

  // 过滤数据
  const filteredData = locationData.filter((item) =>
    Object.values(item).some((value) =>
      String(value).toLowerCase().includes(searchTerm.toLowerCase())
    )
  );

  const handleDelete = (id: number) => {
    if (confirm('确定要删除这个点位吗？')) {
      console.log('删除:', id);
    }
  };

  const handleEdit = (item: TableRow) => {
    setEditingItem(item);
    setShowAddModal(true);
  };

  return (
    <div className="space-y-6">
      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="bg-white rounded-2xl p-6 border border-gray-200/50 shadow-sm hover:shadow-lg hover:shadow-blue-100/50 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-500 rounded-xl flex items-center justify-center shadow-lg shadow-blue-400/30">
              <MapPin className="w-6 h-6 text-white" strokeWidth={2.5} />
            </div>
          </div>
          <div className="text-2xl text-gray-900 mb-1">89</div>
          <div className="text-sm text-gray-500">总点位数</div>
        </div>

        <div className="bg-white rounded-2xl p-6 border border-gray-200/50 shadow-sm hover:shadow-lg hover:shadow-green-100/50 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-green-500 rounded-xl flex items-center justify-center shadow-lg shadow-green-400/30">
              <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </div>
          <div className="text-2xl text-gray-900 mb-1">84</div>
          <div className="text-sm text-gray-500">正常点位</div>
        </div>

        <div className="bg-white rounded-2xl p-6 border border-gray-200/50 shadow-sm hover:shadow-lg hover:shadow-orange-100/50 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="w-12 h-12 bg-gradient-to-br from-orange-400 to-orange-500 rounded-xl flex items-center justify-center shadow-lg shadow-orange-400/30">
              <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </div>
          </div>
          <div className="text-2xl text-gray-900 mb-1">5</div>
          <div className="text-sm text-gray-500">维护中</div>
        </div>

        <div className="bg-white rounded-2xl p-6 border border-gray-200/50 shadow-sm hover:shadow-lg hover:shadow-cyan-100/50 transition-all duration-300">
          <div className="flex items-start justify-between mb-4">
            <div className="w-12 h-12 bg-gradient-to-br from-cyan-400 to-cyan-500 rounded-xl flex items-center justify-center shadow-lg shadow-cyan-400/30">
              <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
              </svg>
            </div>
          </div>
          <div className="text-2xl text-gray-900 mb-1">3</div>
          <div className="text-sm text-gray-500">区域数量</div>
        </div>
      </div>

      {/* 表格容器 - 合并工具栏和列表 */}
      <div className="bg-white rounded-2xl border border-gray-200/50 shadow-sm overflow-hidden">
        {/* 工具栏 */}
        <div className="p-4 border-b border-gray-200/50">
          <div className="flex items-center justify-between">
            {/* 搜索条件 + 搜索、重置紧跟其后 */}
            <div className="flex items-center gap-3">
              <div className="relative w-80">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                <input
                  type="text"
                  placeholder="搜索点位..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full h-10 pl-10 pr-4 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm"
                />
              </div>
              <button
                type="button"
                onClick={() => setSearchTerm(searchTerm.trim())}
                className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 text-gray-700"
              >
                搜索
              </button>
              <button
                type="button"
                onClick={() => setSearchTerm('')}
                className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 text-gray-700"
              >
                重置
              </button>
            </div>

            {/* 新增按钮保持在最右侧 */}
            <button
              onClick={() => {
                setEditingItem(null);
                setShowAddModal(true);
              }}
              className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:shadow-lg hover:shadow-blue-400/40 transition-all duration-300"
            >
              <Plus className="w-4 h-4" strokeWidth={2.5} />
              <span className="text-sm">新增点位</span>
            </button>
          </div>
        </div>

        {/* 表格 */}
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-gradient-to-r from-gray-50 to-gray-100/50 border-b border-gray-200">
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '4%' }}>序号</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '8%' }}>点位编号</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '15%' }}>点位名称</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '6%' }}>区域</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '8%' }}>机柜</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '10%' }}>设备</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '6%' }}>电压</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '8%' }}>能量源</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '8%' }}>点位分组</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '8%' }}>岗位</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '8%' }}>状态</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '8%' }}>负责人</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '8%' }}>检查周期</th>
                <th className="px-6 py-4 text-left text-xs text-gray-600 uppercase tracking-wider" style={{ width: '10%' }}>最后检查</th>
                <th className="px-6 py-4 text-center text-xs text-gray-600 uppercase tracking-wider" style={{ width: '9%' }}>操作</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {filteredData.map((row, index) => (
                <tr key={row.id} className="hover:bg-blue-50/30 transition-colors">
                  <td className="px-6 py-4 text-sm text-gray-900">{index + 1}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.code}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.name}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.area}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.cabinet}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.device}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.voltage}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">
                    {(() => {
                      const powerValue = row.powerType;
                      // 如果值为 null、undefined 或空字符串，显示 '-'
                      if (powerValue === null || powerValue === undefined || powerValue === '') {
                        return '-';
                      }
                      // 如果字典选项已加载，尝试匹配
                      if (powerSourceOptions.length > 0) {
                        const option = powerSourceOptions.find(opt => String(opt.value) === String(powerValue));
                        if (option) {
                          return option.label;
                        }
                      }
                      // 如果字典选项未加载或未匹配，显示原始值
                      return String(powerValue);
                    })()}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-900">
                    {(() => {
                      const groupValue = row.lotoId;
                      // 注意：0 是有效值，不能当作 falsy 处理
                      if (groupValue === null || groupValue === undefined || groupValue === '') {
                        return '-';
                      }
                      // 优先使用 getDictLabel 从字典中获取标签（它会处理类型转换）
                      const dictLabel = getDictLabel(DICT_TYPE.POINT_GROUP, groupValue);
                      if (dictLabel) {
                        return dictLabel;
                      }
                      // 如果字典中没有找到，尝试从 pointGroupOptions 中查找
                      if (pointGroupOptions.length > 0) {
                        // 尝试多种类型匹配
                        const option = pointGroupOptions.find(opt => 
                          Number(opt.value) === Number(groupValue) || 
                          String(opt.value) === String(groupValue)
                        );
                        if (option) {
                          return option.label;
                        }
                      }
                      // 如果都找不到，显示原始值
                      return String(groupValue);
                    })()}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-900">
                    {(() => {
                      const workstationId = row.workstationId;
                      // 如果值为 null 或 undefined，显示 '-'
                      if (workstationId === null || workstationId === undefined) {
                        return '-';
                      }
                      // 优先使用数据中的 workstationName（如果存在且不为空）
                      if (row.workstationName) {
                        return row.workstationName;
                      }
                      // 从岗位列表中查找对应的岗位名称
                      if (postList.length > 0) {
                        const post = postList.find(p => p.id === Number(workstationId));
                        if (post) {
                          return post.name;
                        }
                      }
                      // 如果都找不到，显示 ID
                      return String(workstationId);
                    })()}
                  </td>
                  <td className="px-6 py-4">
                    <span
                      className={`inline-flex px-3 py-1 rounded-lg text-xs ${
                        row.status === '正常'
                          ? 'bg-green-100 text-green-700'
                          : row.status === '维护中'
                          ? 'bg-orange-100 text-orange-700'
                          : 'bg-red-100 text-red-700'
                      }`}
                    >
                      {row.status}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.responsible}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.checkCycle}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">{row.lastCheck}</td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2 justify-center">
                      <UIButton
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                          // 查看详情功能
                          console.log('查看点位详情:', row);
                        }}
                        className="h-8 px-2 transition-colors hover:underline"
                        style={{ color: '#000000' }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.color = '#1677ff';
                          e.currentTarget.style.textDecoration = 'underline';
                          e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #1677ff');
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.color = '#000000';
                          e.currentTarget.style.textDecoration = 'none';
                          e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #000000');
                        }}
                      >
                        <Eye className="w-4 h-4" style={{ color: '#000000' }} />
                        <span className="ml-1">查看</span>
                      </UIButton>
                      <UIButton
                        variant="ghost"
                        size="sm"
                        onClick={() => handleEdit(row)}
                        className="h-8 px-2 transition-colors hover:underline"
                        style={{ color: '#000000' }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.color = '#1677ff';
                          e.currentTarget.style.textDecoration = 'underline';
                          e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #1677ff');
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.color = '#000000';
                          e.currentTarget.style.textDecoration = 'none';
                          e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #000000');
                        }}
                      >
                        <Edit2 className="w-4 h-4" style={{ color: '#000000' }} />
                        <span className="ml-1">编辑</span>
                      </UIButton>
                      <UIButton
                        variant="ghost"
                        size="sm"
                        onClick={() => handleDelete(row.id)}
                        className="h-8 px-2 transition-colors hover:underline"
                        style={{ color: '#000000' }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.color = '#1677ff';
                          e.currentTarget.style.textDecoration = 'underline';
                          e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #1677ff');
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.color = '#000000';
                          e.currentTarget.style.textDecoration = 'none';
                          e.currentTarget.querySelector('svg')?.setAttribute('style', 'color: #000000');
                        }}
                      >
                        <Trash2 className="w-4 h-4" style={{ color: '#000000' }} />
                        <span className="ml-1">删除</span>
                      </UIButton>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

      </div>

      {/* 分页 */}
      {filteredData.length > 0 && (
        <div className="bg-white rounded-lg border border-gray-200 px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="text-sm text-gray-600">
              {t('common.total')} <span className="text-blue-600 font-medium">{filteredData.length}</span> {t('common.records')}
            </div>
            <div className="flex gap-2">
              <Button
                disabled={true}
              >
                {t('common.prevPage')}
              </Button>
              <span className="px-4 py-2 text-sm text-gray-600 flex items-center">
                1 / 1
              </span>
              <Button
                disabled={true}
              >
                {t('common.nextPage')}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* 新增/编辑弹窗 */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 animate-in fade-in duration-200">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-y-auto animate-in zoom-in duration-200">
            {/* 弹窗标题 */}
            <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between sticky top-0 bg-white z-10">
              <h3 className="text-lg text-gray-900">
                {editingItem ? '编辑点位' : '新增点位'}
              </h3>
              <button
                onClick={() => setShowAddModal(false)}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* 弹窗内容 */}
            <div className="px-6 py-6">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm text-gray-700 mb-2">点位编号 *</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm"
                    placeholder="请输入点位编号"
                    defaultValue={editingItem?.code || ''}
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">点位名称 *</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm"
                    placeholder="请输入点位名称"
                    defaultValue={editingItem?.name || ''}
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">所属区域 *</label>
                  <select className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm">
                    <option value="">请选择</option>
                    <option value="A区">A区</option>
                    <option value="B区">B区</option>
                    <option value="C区">C区</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">楼层</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm"
                    placeholder="请输入楼层"
                    defaultValue={editingItem?.floor || ''}
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">所属机柜 *</label>
                  <select className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm">
                    <option value="">请选择</option>
                    <option value="1号配电柜">1号配电柜</option>
                    <option value="2号配电柜">2号配电柜</option>
                    <option value="变压器柜A">变压器柜A</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">锁点编号</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm"
                    placeholder="请输入锁点编号"
                    defaultValue={editingItem?.lockPoint || ''}
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">设备名称 *</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm"
                    placeholder="请输入设备名称"
                    defaultValue={editingItem?.device || ''}
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">电压等级</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm"
                    placeholder="请输入电压等级"
                    defaultValue={editingItem?.voltage || ''}
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">负责人 *</label>
                  <select className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm">
                    <option value="">请选择</option>
                    <option value="张三">张三</option>
                    <option value="李四">李四</option>
                    <option value="王五">王五</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-gray-700 mb-2">检查周期</label>
                  <select className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm">
                    <option value="">请选择</option>
                    <option value="每天">每天</option>
                    <option value="每周">每周</option>
                    <option value="每月">每月</option>
                    <option value="每季度">每季度</option>
                  </select>
                </div>
                <div className="col-span-2">
                  <label className="block text-sm text-gray-700 mb-2">备注</label>
                  <textarea
                    rows={3}
                    className="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-400 focus:ring-4 focus:ring-blue-100 transition-all text-sm resize-none"
                    placeholder="请输入备注"
                    defaultValue={editingItem?.remark || ''}
                  ></textarea>
                </div>
              </div>
            </div>

            {/* 弹窗底部 */}
            <div className="px-6 py-4 bg-gray-50/50 border-t border-gray-200 flex justify-end gap-3 rounded-b-2xl">
              <button
                onClick={() => setShowAddModal(false)}
                className="px-5 py-2.5 text-sm text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors"
              >
                取消
              </button>
              <button
                onClick={() => {
                  console.log('保存:', editingItem);
                  setShowAddModal(false);
                }}
                className="px-5 py-2.5 text-sm text-white bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl hover:shadow-lg hover:shadow-blue-400/40 transition-all"
              >
                {editingItem ? '保存修改' : '确定'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}