import { useState, useCallback, useEffect } from "react";
import {
  Row,
  Col,
  Card,
  Statistic,
  Tag,
  List,
  Select,
  Badge,
  Typography,
  Spin,
  Space,
  Flex,
  Result,
  message,
} from "antd";
import {
  AlertOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  WarningOutlined,
  WifiOutlined,
} from "@ant-design/icons";
import { alertApi, type Alert } from "../../api/health/alerts";
import { usePermission } from "../../hooks/usePermission";
import {
  SEVERITY_COLOR,
  SEVERITY_LABEL,
  ALERT_STATUS_COLOR,
  ALERT_STATUS_LABEL,
  ALERT_STATUS_OPTIONS,
  translateAlertTitle,
} from "../../constants/health";
import { useAlertSSE, type AlertSSEEvent } from "../../hooks/useAlertSSE";
import { AlertDetailPanel } from "./components/AlertDetailPanel";
import { PageContainer } from "../../components/PageContainer";
import { EntityName } from "../../components/EntityName";

/**
 * 实时告警仪表盘 — 医生端。
 *
 * 功能：
 * - SSE 实时接收新告警推送
 * - 按状态/严重程度筛选
 * - 告警列表 + 详情面板
 * - 统计摘要（待处理/已确认/危急值）
 * - 确认/忽略/恢复操作
 */
export default function AlertDashboard() {
  const { hasPermission } = usePermission("health.alerts.list");
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [selectedAlert, setSelectedAlert] = useState<Alert | null>(null);
  const [statusFilter, setStatusFilter] = useState<string>("");
  const [loading, setLoading] = useState(true);
  const [actionLoading, setActionLoading] = useState(false);
  const [total, setTotal] = useState(0);

  // 加载告警列表
  const fetchAlerts = useCallback(async (status?: string) => {
    try {
      setLoading(true);
      const params: Record<string, string | number> = {
        page: 1,
        page_size: 50,
      };
      if (status) {
        params.status = status;
      }
      const result = await alertApi.list(params);
      setAlerts(result.data);
      setTotal(result.total);
    } catch {
      // 静默降级
    } finally {
      setLoading(false);
    }
  }, []);

  // SSE 实时推送
  const handleNewAlert = useCallback((event: AlertSSEEvent) => {
    // 将 SSE 事件转换为 Alert 对象并插入列表头部
    const newAlert: Alert = {
      id: event.alert_id,
      patient_id: event.patient_id,
      rule_id: "",
      severity: event.severity,
      title: event.rule_name ?? "新告警",
      detail: event.detail,
      status: "pending",
      created_at: event.occurred_at ?? new Date().toISOString(),
      version: 1,
    };
    setAlerts((prev) => [newAlert, ...prev]);
    setTotal((prev) => prev + 1);
  }, []);

  const { connected } = useAlertSSE({
    enabled: true,
    onAlert: handleNewAlert,
  });

  // 初始加载
  useEffect(() => {
    fetchAlerts(statusFilter || undefined);
  }, [fetchAlerts, statusFilter]);

  // 操作回调
  const handleAcknowledge = useCallback(async (id: string, version: number) => {
    setActionLoading(true);
    try {
      const updated = await alertApi.acknowledge(id, version);
      setAlerts((prev) => prev.map((a) => (a.id === id ? updated : a)));
      setSelectedAlert((prev) => (prev?.id === id ? updated : prev));
    } catch {
      message.error("确认告警失败，请重试");
    } finally {
      setActionLoading(false);
    }
  }, []);

  const handleDismiss = useCallback(async (id: string, version: number) => {
    setActionLoading(true);
    try {
      const updated = await alertApi.dismiss(id, version);
      setAlerts((prev) => prev.map((a) => (a.id === id ? updated : a)));
      setSelectedAlert((prev) => (prev?.id === id ? updated : prev));
    } catch {
      message.error("忽略告警失败，请重试");
    } finally {
      setActionLoading(false);
    }
  }, []);

  const handleResolve = useCallback(async (id: string, version: number) => {
    setActionLoading(true);
    try {
      const updated = await alertApi.resolve(id, version);
      setAlerts((prev) => prev.map((a) => (a.id === id ? updated : a)));
      setSelectedAlert((prev) => (prev?.id === id ? updated : prev));
    } catch {
      message.error("恢复告警失败，请重试");
    } finally {
      setActionLoading(false);
    }
  }, []);

  // 统计
  if (!hasPermission)
    return (
      <Result
        status="403"
        title="权限不足"
        subTitle="您没有查看告警面板的权限"
      />
    );
  const pendingCount = alerts.filter((a) => a.status === "pending").length;
  const acknowledgedCount = alerts.filter(
    (a) => a.status === "acknowledged",
  ).length;
  const criticalCount = alerts.filter(
    (a) => a.severity === "critical" || a.severity === "urgent",
  ).length;

  return (
    <PageContainer
      title="告警仪表盘"
      subtitle={`共 ${total} 条告警`}
      filters={
        <Space>
          <Select
            value={statusFilter}
            onChange={setStatusFilter}
            options={ALERT_STATUS_OPTIONS}
            style={{ width: 120 }}
            placeholder="按状态筛选"
          />
          <Badge
            status={connected ? "success" : "error"}
            text={
              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                <WifiOutlined style={{ marginRight: 4 }} />
                {connected ? "实时连接" : "连接断开"}
              </Typography.Text>
            }
          />
        </Space>
      }
    >
      <div style={{ padding: 16 }}>
        {/* 统计卡片 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
          <Col xs={8}>
            <Card size="small">
              <Statistic
                title="待处理"
                value={pendingCount}
                prefix={<ExclamationCircleOutlined />}
                styles={{ content: { color: pendingCount > 0 ? "#fa8c16" : undefined } }}
              />
            </Card>
          </Col>
          <Col xs={8}>
            <Card size="small">
              <Statistic
                title="已确认"
                value={acknowledgedCount}
                prefix={<CheckCircleOutlined />}
                styles={{ content: { color: "#1890ff" } }}
              />
            </Card>
          </Col>
          <Col xs={8}>
            <Card size="small">
              <Statistic
                title="危急值"
                value={criticalCount}
                prefix={<WarningOutlined />}
                styles={{
                  content: { color: criticalCount > 0 ? "#ff4d4f" : undefined },
                }}
              />
            </Card>
          </Col>
        </Row>

        {/* 告警列表 + 详情 */}
        <Row gutter={[16, 16]}>
          <Col xs={24} md={14}>
            <Card
              title={
                <Space>
                  <AlertOutlined />
                  <span>告警列表</span>
                  <Badge count={pendingCount} />
                </Space>
              }
              size="small"
              style={{ maxHeight: 600, overflow: "auto" }}
            >
              <Spin spinning={loading}>
                <List
                  size="small"
                  dataSource={alerts}
                  locale={{ emptyText: "暂无告警" }}
                  renderItem={(alert) => (
                    <List.Item
                      onClick={() => setSelectedAlert(alert)}
                      style={{
                        cursor: "pointer",
                        background:
                          selectedAlert?.id === alert.id
                            ? "var(--ant-color-primary-bg)"
                            : undefined,
                        padding: "8px 12px",
                        borderRadius: 6,
                        transition: "background 0.2s",
                      }}
                    >
                      <List.Item.Meta
                        avatar={
                          <Tag
                            color={SEVERITY_COLOR[alert.severity] || "default"}
                            style={{
                              margin: 0,
                              minWidth: 48,
                              textAlign: "center",
                            }}
                          >
                            {SEVERITY_LABEL[alert.severity] ?? alert.severity}
                          </Tag>
                        }
                        title={
                          <Flex justify="space-between" align="center">
                            <span>{translateAlertTitle(alert.title)}</span>
                            <Tag
                              color={
                                ALERT_STATUS_COLOR[alert.status] || "default"
                              }
                              style={{ fontSize: 11 }}
                            >
                              {ALERT_STATUS_LABEL[alert.status] ?? alert.status}
                            </Tag>
                          </Flex>
                        }
                        description={
                          <Typography.Text
                            type="secondary"
                            style={{ fontSize: 12 }}
                          >
                            患者:{" "}
                            <EntityName
                              name={alert.patient_name}
                              id={alert.patient_id}
                            />
                            {" · "}
                            {new Date(alert.created_at).toLocaleString("zh-CN")}
                          </Typography.Text>
                        }
                      />
                    </List.Item>
                  )}
                />
              </Spin>
            </Card>
          </Col>
          <Col xs={24} md={10}>
            <Card title="告警详情" size="small">
              {selectedAlert ? (
                <AlertDetailPanel
                  alert={selectedAlert}
                  onAcknowledge={handleAcknowledge}
                  onDismiss={handleDismiss}
                  onResolve={handleResolve}
                  loading={actionLoading}
                />
              ) : (
                <div style={{ padding: 40, textAlign: "center" }}>
                  <Typography.Text type="secondary">
                    点击左侧告警查看详情
                  </Typography.Text>
                </div>
              )}
            </Card>
          </Col>
        </Row>
      </div>
    </PageContainer>
  );
}
