import React, { useEffect, useMemo, useState } from 'react';
import { Empty, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { PlusOutlined } from '@ant-design/icons';
import api from '../api';
import PermissionButton from '../components/PermissionButton';
import EditableCell from '../components/EditableCell';
import { message } from '../ui/app-message';

interface ClassroomOption {
  id: number;
  name: string;
  building?: string | null;
}

interface AttendanceDeviceRow {
  id: number;
  deviceSn: string;
  deviceName: string;
  classroomId: number;
  classroom?: ClassroomOption | null;
  status: 'active' | 'disabled';
  location?: string | null;
  notes?: string | null;
}

const statusMeta = {
  active: { text: '启用', color: 'green' },
  disabled: { text: '停用', color: 'default' },
} as const;

const AttendanceDevicesPage: React.FC = () => {
  const [data, setData] = useState<AttendanceDeviceRow[]>([]);
  const [classrooms, setClassrooms] = useState<ClassroomOption[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<AttendanceDeviceRow | null>(null);
  const [saving, setSaving] = useState(false);
  const [keyword, setKeyword] = useState('');
  const [form] = Form.useForm();

  const loadData = async () => {
    setLoading(true);
    try {
      const [devices, classroomList] = await Promise.all([
        api.get<AttendanceDeviceRow[]>('/attendance-devices'),
        api.get<ClassroomOption[]>('/classrooms'),
      ]);
      setData(devices);
      setClassrooms(classroomList.filter((item: any) => item.status !== 'archived'));
    } catch (error: any) {
      message.error(error?.message || '加载考勤机绑定失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void loadData();
  }, []);

  const classroomOptions = useMemo(
    () =>
      classrooms.map((item) => ({
        value: item.id,
        label: item.building ? `${item.name}（${item.building}）` : item.name,
      })),
    [classrooms],
  );

  const filteredData = useMemo(() => {
    const text = keyword.trim().toLocaleLowerCase('zh-CN');
    if (!text) return data;
    return data.filter((item) =>
      [item.deviceSn, item.deviceName, item.classroom?.name, item.location].some((value) =>
        (value || '').toLocaleLowerCase('zh-CN').includes(text),
      ),
    );
  }, [data, keyword]);

  const openCreate = () => {
    setEditing(null);
    form.resetFields();
    form.setFieldsValue({ status: 'active' });
    setModalOpen(true);
  };

  const openEdit = (record: AttendanceDeviceRow) => {
    setEditing(record);
    form.setFieldsValue({
      deviceSn: record.deviceSn,
      deviceName: record.deviceName,
      classroomId: record.classroomId,
      status: record.status,
      location: record.location,
      notes: record.notes,
    });
    setModalOpen(true);
  };

  const handleSave = async () => {
    const values = await form.validateFields();
    setSaving(true);
    try {
      if (editing) {
        await api.put(`/attendance-devices/${editing.id}`, values);
        message.success('考勤机绑定已更新');
      } else {
        await api.post('/attendance-devices', values);
        message.success('考勤机绑定已创建');
      }
      setModalOpen(false);
      setEditing(null);
      form.resetFields();
      await loadData();
    } catch (error: any) {
      message.error(error?.message || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  const saveCell = async (record: AttendanceDeviceRow, field: string, value: unknown) => {
    await api.put(`/attendance-devices/${record.id}`, { [field]: value });
    message.success('已保存');
    await loadData();
  };

  const handleDelete = async (id: number) => {
    try {
      await api.delete(`/attendance-devices/${id}`);
      message.success('已停用绑定');
      await loadData();
    } catch (error: any) {
      message.error(error?.message || '停用失败');
    }
  };

  const columns: ColumnsType<AttendanceDeviceRow> = [
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      width: 180,
      render: (value: string, record) => (
        <EditableCell
          value={value}
          required
          permission="classroom:edit"
          onSave={(next) => saveCell(record, 'deviceName', next)}
        >
          {value}
        </EditableCell>
      ),
    },
    {
      title: 'SN 码',
      dataIndex: 'deviceSn',
      width: 220,
      render: (value, record) => (
        <EditableCell
          value={value}
          required
          permission="classroom:edit"
          onSave={(next) => saveCell(record, 'deviceSn', next)}
        >
          <span style={{ fontFamily: 'monospace' }}>{value}</span>
        </EditableCell>
      ),
    },
    {
      title: '绑定教室',
      dataIndex: ['classroom', 'name'],
      width: 160,
      render: (_value, record) => (
        <EditableCell
          value={record.classroomId}
          editor="select"
          options={classrooms.map((item) => ({
            value: item.id,
            label: item.building ? `${item.building} · ${item.name}` : item.name,
          }))}
          permission="classroom:edit"
          required
          onSave={(next) => saveCell(record, 'classroomId', next)}
        >
          {record.classroom?.name || `教室 ${record.classroomId}`}
        </EditableCell>
      ),
    },
    {
      title: '位置',
      dataIndex: 'location',
      render: (value, record) => (
        <EditableCell
          value={value}
          permission="classroom:edit"
          onSave={(next) => saveCell(record, 'location', next)}
        >
          {value || <span style={{ color: '#999' }}>—</span>}
        </EditableCell>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 90,
      render: (value: keyof typeof statusMeta, record) => (
        <EditableCell
          value={value}
          editor="select"
          options={[
            { value: 'active', label: '启用' },
            { value: 'disabled', label: '停用' },
          ]}
          permission="classroom:edit"
          onSave={(next) => saveCell(record, 'status', next)}
        >
          <Tag color={statusMeta[value]?.color}>{statusMeta[value]?.text || value}</Tag>
        </EditableCell>
      ),
    },
    {
      title: '备注',
      dataIndex: 'notes',
      ellipsis: true,
      render: (value, record) => (
        <EditableCell
          value={value}
          editor="textarea"
          permission="classroom:edit"
          onSave={(next) => saveCell(record, 'notes', next)}
        >
          {value || <span style={{ color: '#999' }}>—</span>}
        </EditableCell>
      ),
    },
    {
      title: '操作',
      width: 150,
      render: (_, record) => (
        <Space>
          <PermissionButton
            permission="classroom:edit"
            size="small"
            type="link"
            onClick={() => openEdit(record)}
          >
            编辑
          </PermissionButton>
          <Popconfirm title="确定停用此考勤机绑定？" onConfirm={() => handleDelete(record.id)}>
            <PermissionButton permission="classroom:edit" size="small" danger>
              停用
            </PermissionButton>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div
        style={{
          marginBottom: 16,
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 8,
        }}
      >
        <Input.Search
          allowClear
          placeholder="搜索设备/SN/教室"
          style={{ width: 260 }}
          value={keyword}
          onChange={(event) => setKeyword(event.target.value)}
        />
        <PermissionButton
          permission="classroom:edit"
          type="primary"
          icon={<PlusOutlined />}
          onClick={openCreate}
        >
          添加考勤机
        </PermissionButton>
      </div>
      <Table<AttendanceDeviceRow>
        rowKey="id"
        columns={columns}
        dataSource={filteredData}
        loading={loading}
        locale={{ emptyText: <Empty description="暂无考勤机绑定" /> }}
        pagination={{ defaultPageSize: 20, showSizeChanger: true }}
      />
      <Modal
        title={editing ? '编辑考勤机绑定' : '添加考勤机绑定'}
        open={modalOpen}
        onOk={handleSave}
        onCancel={() => {
          setModalOpen(false);
          setEditing(null);
        }}
        confirmLoading={saving}
        okText="保存"
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="deviceName"
            label="设备名称"
            rules={[{ required: true, message: '请输入设备名称' }]}
          >
            <Input placeholder="如：彼岸游境_N1604" />
          </Form.Item>
          <Form.Item
            name="deviceSn"
            label="SN 码"
            rules={[{ required: true, message: '请输入钉钉返回的 deviceSN' }]}
          >
            <Input placeholder="如：300419260325WN1604" />
          </Form.Item>
          <Form.Item
            name="classroomId"
            label="绑定教室"
            rules={[{ required: true, message: '请选择绑定教室' }]}
          >
            <Select
              showSearch
              optionFilterProp="label"
              options={classroomOptions}
              placeholder="选择教室"
            />
          </Form.Item>
          <Form.Item name="status" label="状态" initialValue="active">
            <Select
              options={[
                { value: 'active', label: '启用' },
                { value: 'disabled', label: '停用' },
              ]}
            />
          </Form.Item>
          <Form.Item name="location" label="位置">
            <Input placeholder="如：教学楼一楼东侧" />
          </Form.Item>
          <Form.Item name="notes" label="备注">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default AttendanceDevicesPage;
