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

import {
  diagnosisApi,
  type Diagnosis,
  type CreateDiagnosisReq,
  type UpdateDiagnosisReq,
  DIAGNOSIS_TYPE_OPTIONS,
  DIAGNOSIS_STATUS_OPTIONS,
  DIAGNOSIS_TYPE_COLOR,
  DIAGNOSIS_STATUS_COLOR,
  DIAGNOSIS_TYPE_LABEL,
  DIAGNOSIS_STATUS_LABEL,
} from '../../api/health/diagnoses';
import { PageContainer } from '../../components/PageContainer';
import { usePermission } from '../../hooks/usePermission';

export default function DiagnosisList() {
  const { hasPermission } = usePermission('health.health-data.list');

  const [data, setData] = useState<Diagnosis[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const [patientId, setPatientId] = useState('');
  const [searchInput, setSearchInput] = useState('');

  const [modalOpen, setModalOpen] = useState(false);
  const [editRecord, setEditRecord] = useState<Diagnosis | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [form] = Form.useForm();

  const pageSize = 20;

  const fetchData = useCallback(async (pid: string, p: number) => {
    if (!pid) return;
    setLoading(true);
    try {
      const resp = await diagnosisApi.list(pid, { page: p, page_size: pageSize });
      setData(resp.data);
      setTotal(resp.total);
      setPage(p);
    } catch {
      message.error('加载诊断记录失败');
    } finally {
      setLoading(false);
    }
  }, []);

  const handleSearch = () => {
    const pid = searchInput.trim();
    if (!pid) {
      message.warning('请输入患者 ID');
      return;
    }
    setPatientId(pid);
    fetchData(pid, 1);
  };

  const handleCreate = () => {
    setEditRecord(null);
    form.resetFields();
    form.setFieldsValue({ patient_id: patientId, diagnosis_type: 'primary', status: 'active' });
    setModalOpen(true);
  };

  const handleEdit = (record: Diagnosis) => {
    setEditRecord(record);
    form.setFieldsValue({
      icd_code: record.icd_code,
      diagnosis_name: record.diagnosis_name,
      diagnosis_type: record.diagnosis_type,
      diagnosed_date: record.diagnosed_date ? dayjs(record.diagnosed_date) : undefined,
      status: record.status,
      diagnosed_by: record.diagnosed_by,
      notes: record.notes,
    });
    setModalOpen(true);
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const req = {
        ...values,
        diagnosed_date: values.diagnosed_date?.format('YYYY-MM-DD'),
      };

      setSubmitting(true);
      if (editRecord) {
        await diagnosisApi.update(editRecord.id, {
          ...req,
          version: editRecord.version,
        } as UpdateDiagnosisReq & { version: number });
        message.success('诊断记录已更新');
      } else {
        await diagnosisApi.create(req.patient_id, req as CreateDiagnosisReq);
        message.success('诊断记录已创建');
      }
      setModalOpen(false);
      fetchData(patientId, page);
    } catch {
      // validation
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async (record: Diagnosis) => {
    try {
      await diagnosisApi.delete(record.id, record.version);
      message.success('诊断记录已删除');
      fetchData(patientId, page);
    } catch {
      message.error('删除失败');
    }
  };

  const columns: ColumnsType<Diagnosis> = useMemo(() => [
    {
      title: 'ICD 编码',
      dataIndex: 'icd_code',
      width: 110,
    },
    {
      title: '诊断名称',
      dataIndex: 'diagnosis_name',
      width: 200,
      ellipsis: true,
    },
    {
      title: '类型',
      dataIndex: 'diagnosis_type',
      width: 100,
      render: (v: string) => (
        <Tag color={DIAGNOSIS_TYPE_COLOR[v] ?? 'default'}>
          {DIAGNOSIS_TYPE_LABEL[v] ?? v}
        </Tag>
      ),
    },
    {
      title: '确诊日期',
      dataIndex: 'diagnosed_date',
      width: 110,
      render: (v: string) => v ? dayjs(v).format('YYYY-MM-DD') : '-',
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 80,
      render: (v: string) => (
        <Tag color={DIAGNOSIS_STATUS_COLOR[v] ?? 'default'}>
          {DIAGNOSIS_STATUS_LABEL[v] ?? v}
        </Tag>
      ),
    },
    {
      title: '备注',
      dataIndex: 'notes',
      width: 160,
      ellipsis: true,
      render: (v: string) => v ?? '-',
    },
    {
      title: '操作',
      width: 140,
      render: (_, record) => (
        <Space>
          <Button size="small" onClick={() => handleEdit(record)}>编辑</Button>
          <Popconfirm title="确定删除此诊断记录？" onConfirm={() => handleDelete(record)}>
            <Button size="small" danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ], [patientId, page]);

  if (!hasPermission) {
    return <Result status="403" title="权限不足" subTitle="您没有查看诊断记录的权限" />;
  }

  return (
    <PageContainer
      title="诊断记录"
      actions={patientId ? <Button type="primary" onClick={handleCreate}>添加诊断</Button> : undefined}
    >
      <Space style={{ marginBottom: 16 }} wrap>
        <Input.Search
          placeholder="输入患者 ID 搜索"
          value={searchInput}
          onChange={(e) => setSearchInput(e.target.value)}
          onSearch={handleSearch}
          style={{ width: 360 }}
          enterButton="查询"
        />
        {patientId && (
          <Tag color="blue">当前患者: {patientId}</Tag>
        )}
      </Space>

      {!patientId ? (
        <Result title="请输入患者 ID 查询诊断记录" />
      ) : (
        <Table<Diagnosis>
          rowKey="id"
          columns={columns}
          dataSource={data}
          loading={loading}
          pagination={{
            current: page,
            pageSize,
            total,
            showTotal: (t) => `共 ${t} 条`,
            onChange: (p) => fetchData(patientId, p),
          }}
        />
      )}

      <Modal
        title={editRecord ? '编辑诊断' : '添加诊断'}
        open={modalOpen}
        onOk={handleSubmit}
        onCancel={() => setModalOpen(false)}
        confirmLoading={submitting}
        width={600}
      >
        <Form form={form} layout="vertical">
          {!editRecord && (
            <Form.Item name="patient_id" label="患者 ID" rules={[{ required: true }]}>
              <Input disabled />
            </Form.Item>
          )}
          <Space style={{ width: '100%' }} size="middle">
            <Form.Item name="icd_code" label="ICD 编码" rules={[{ required: true, message: '请输入 ICD 编码' }]} style={{ width: 200 }}>
              <Input placeholder="如：N18.9" />
            </Form.Item>
            <Form.Item name="diagnosis_name" label="诊断名称" rules={[{ required: true, message: '请输入诊断名称' }]} style={{ width: 320 }}>
              <Input placeholder="如：慢性肾脏病" />
            </Form.Item>
          </Space>
          <Space style={{ width: '100%' }} size="middle">
            <Form.Item name="diagnosis_type" label="类型" style={{ width: 200 }}>
              <Select options={DIAGNOSIS_TYPE_OPTIONS} />
            </Form.Item>
            <Form.Item name="diagnosed_date" label="确诊日期" rules={[{ required: true, message: '请选择确诊日期' }]} style={{ width: 260 }}>
              <DatePicker style={{ width: '100%' }} />
            </Form.Item>
          </Space>
          <Space style={{ width: '100%' }} size="middle">
            <Form.Item name="status" label="状态" style={{ width: 200 }}>
              <Select options={DIAGNOSIS_STATUS_OPTIONS} />
            </Form.Item>
            <Form.Item name="diagnosed_by" label="确诊医生 ID" style={{ width: 320 }}>
              <Input placeholder="医生 UUID（可选）" />
            </Form.Item>
          </Space>
          <Form.Item name="notes" label="备注">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
}
