import { useCallback, useEffect, useState } from 'react';
import { Button, Input, message, Popconfirm, Select, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';

import { deviceApi, type DeviceItem } from '../../api/health/devices';

const DEVICE_TYPE_OPTIONS = [
  { label: '血压', value: 'blood_pressure' },
  { label: '血糖', value: 'blood_glucose' },
  { label: '心率', value: 'heart_rate' },
  { label: '血氧', value: 'blood_oxygen' },
  { label: '步数', value: 'steps' },
  { label: '体温', value: 'temperature' },
];

const DEVICE_TYPE_COLOR: Record<string, string> = {
  blood_pressure: 'red',
  blood_glucose: 'purple',
  heart_rate: 'volcano',
  blood_oxygen: 'blue',
  steps: 'green',
  temperature: 'orange',
};

function formatTime(val?: string | null): string {
  if (!val) return '-';
  return dayjs(val).format('YYYY-MM-DD HH:mm');
}

export default function DeviceManage() {
  const [data, setData] = useState<DeviceItem[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

  const [filterPatientId, setFilterPatientId] = useState('');
  const [filterDeviceType, setFilterDeviceType] = useState<string | undefined>(undefined);

  const fetchDevices = useCallback(async () => {
    setLoading(true);
    try {
      const res = await deviceApi.listDevices({
        page,
        page_size: 20,
        ...(filterPatientId ? { patient_id: filterPatientId } : {}),
        ...(filterDeviceType ? { device_type: filterDeviceType } : {}),
      });
      setData(res.data);
      setTotal(res.total);
    } catch {
      message.error('加载设备列表失败');
    } finally {
      setLoading(false);
    }
  }, [page, filterPatientId, filterDeviceType]);

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

  const handleUnbind = async (record: DeviceItem) => {
    try {
      await deviceApi.unbindDevice(record.id, record.version);
      message.success('设备已解绑');
      fetchDevices();
    } catch {
      message.error('解绑失败');
    }
  };

  const columns: ColumnsType<DeviceItem> = [
    {
      title: '设备 ID',
      dataIndex: 'device_id',
      width: 120,
      render: (v: string) => v.slice(0, 8),
    },
    {
      title: '设备型号',
      dataIndex: 'device_model',
      width: 160,
    },
    {
      title: '设备类型',
      dataIndex: 'device_type',
      width: 100,
      render: (v: string) => {
        const label = DEVICE_TYPE_OPTIONS.find((d) => d.value === v)?.label || v;
        return <Tag color={DEVICE_TYPE_COLOR[v] || 'default'}>{label}</Tag>;
      },
    },
    {
      title: '绑定时间',
      dataIndex: 'bound_at',
      width: 170,
      render: (v: string) => formatTime(v),
    },
    {
      title: '最后同步',
      dataIndex: 'last_sync_at',
      width: 170,
      render: (v: string) => formatTime(v),
    },
    {
      title: '操作',
      width: 80,
      render: (_, record) => (
        <Popconfirm
          title="确认解绑"
          description="解绑后设备将不再关联该患者，确定继续？"
          onConfirm={() => handleUnbind(record)}
          okText="确定"
          cancelText="取消"
        >
          <Button size="small" type="link" danger>
            解绑
          </Button>
        </Popconfirm>
      ),
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <h2 style={{ marginBottom: 16 }}>设备管理</h2>

      <Space style={{ marginBottom: 16 }} wrap>
        <Input
          placeholder="患者 ID"
          value={filterPatientId}
          onChange={(e) => setFilterPatientId(e.target.value)}
          style={{ width: 200 }}
          allowClear
        />
        <Select
          placeholder="设备类型"
          value={filterDeviceType}
          onChange={setFilterDeviceType}
          options={DEVICE_TYPE_OPTIONS}
          style={{ width: 140 }}
          allowClear
        />
        <Button type="primary" onClick={() => setPage(1)}>
          查询
        </Button>
      </Space>

      <Table<DeviceItem>
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={{
          current: page,
          total,
          pageSize: 20,
          showTotal: (t) => `共 ${t} 条`,
          onChange: (p) => setPage(p),
        }}
      />
    </div>
  );
}