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

const Row = Grid.Row;
const Col = Grid.Col;

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

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="暂无设备" />
      ) : (
        <Row gutter={[16, 16]}>
          {cabinets.map((cab) => {
            const st = STATUS_MAP[cab.status] || { label: '未知', color: 'gray' };
            return (
              <Col key={cab.id} xs={24} sm={12} md={8} lg={6}>
                <Card
                  hoverable
                  size="small"
                  onClick={() => navigate(`/devices/cabinet/${cab.id}`)}
                  style={{ cursor: 'pointer' }}
                >
                  <div style={{ textAlign: 'center' }}>
                    <IconDesktop style={{ fontSize: 32, color: 'var(--color-primary-6)', marginBottom: 8 }} />
                    <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {cab.abstract_id}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--color-text-3)', marginBottom: 8 }}>
                      {cab.name || cab.imei}
                    </div>
                    <Tag color={st.color}>{st.label}</Tag>
                  </div>
                </Card>
              </Col>
            );
          })}
        </Row>
      )}
    </>
  );
}