/**
 * 柜子卡片网格组件
 * - 展示柜子列表（卡片形式）
 * - 点击跳转到柜子详情
 */
import { useNavigate } from 'react-router-dom';
import {
  Card,
  Tag,
  Spin,
  Empty,
} from '@arco-design/web-react';
import { IconLocation, IconPoweroff, IconCheckCircle, IconInfoCircle } from '@arco-design/web-react/icon';
import type { Cabinet } from '@/api/devices';

/** 柜子状态映射 */
const STATUS_MAP: Record<number, { label: string; color: string; icon: React.ReactNode }> = {
  0: { label: '离线', color: 'gray', icon: <IconInfoCircle /> },
  1: { label: '在线', color: 'green', icon: <IconCheckCircle /> },
  2: { label: '充电中', color: 'blue', icon: <IconPoweroff /> },
  3: { label: '故障', color: 'red', icon: <IconInfoCircle /> },
};

interface CabinetGridProps {
  cabinets: Cabinet[];
  loading: boolean;
}

export default function CabinetGrid({ cabinets, loading }: CabinetGridProps) {
  const navigate = useNavigate();

  return (
    <>
      {loading ? (
        <div style={{ textAlign: 'center', padding: '60px 0' }}><Spin dot /></div>
      ) : cabinets.length === 0 ? (
        <Empty description="暂无设备" />
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {cabinets.map((cab) => {
            const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray', icon: <IconInfoCircle /> };
            return (
                <Card
                  key={cab.id}
                  hoverable
                  size="small"
                  onClick={() => navigate(`/devices/cabinet/${cab.id}`)}
                  style={{ cursor: 'pointer' }}
                >
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {/* 标题行：名称 + 状态图标 */}
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontWeight: 600, fontSize: 15, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>
                        {cab.name || cab.abstract_id}
                      </span>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                        <span style={{ color: st.color }}>{st.icon}</span>
                        <Tag color={st.color} style={{ fontSize: 12, margin: 0 }}>{st.label}</Tag>
                      </div>
                    </div>
                    
                    {/* IMEI 和 ICCID */}
                    <div style={{ fontSize: 12, color: 'var(--color-text-3)' }}>
                      <div>IMEI: {cab.imei || '-'}</div>
                      <div>ICCID: {cab.iccid || '-'}</div>
                    </div>
                    
                    {/* 通道状态 */}
                    <div style={{ display: 'flex', gap: 12, fontSize: 12, borderTop: '1px solid var(--color-border)', paddingTop: 8 }}>
                      <span style={{ color: 'var(--color-text-3)' }}>空闲: <b style={{ color: 'var(--color-text-1)' }}>30</b></span>
                      <span style={{ color: 'var(--color-text-3)' }}>充电: <b style={{ color: '#165dff' }}>5</b></span>
                      <span style={{ color: 'var(--color-text-3)' }}>故障: <b style={{ color: '#f53f3f' }}>1</b></span>
                    </div>
                    
                    {/* 地址 */}
                    {cab.address && (
                      <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--color-text-3)' }}>
                        <IconLocation style={{ color: '#f53f3f', flexShrink: 0 }} />
                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{cab.address}</span>
                      </div>
                    )}
                  </div>
                </Card>
            );
          })}
        </div>
      )}
    </>
  );
}
