import { useState, useEffect, useCallback } from 'react';
import { Alert, Badge, List, Button, Space, Typography, Spin } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
import { listAlerts, dismissInsight } from '../../api/copilot';
import type { CopilotInsight } from '../../api/copilot';

const severityConfig: Record<string, { type: 'success' | 'processing' | 'warning' | 'error'; label: string }> = {
  critical: { type: 'error', label: '危急' },
  warning: { type: 'warning', label: '警告' },
  info: { type: 'processing', label: '提示' },
};

export function CopilotAlert() {
  const [alerts, setAlerts] = useState<CopilotInsight[]>([]);
  const [loading, setLoading] = useState(false);
  const [dismissing, setDismissing] = useState<string | null>(null);

  const fetchAlerts = useCallback(async () => {
    setLoading(true);
    try {
      const res = await listAlerts({ page_size: 50 });
      const payload = (res.data as { data?: CopilotInsight[] }).data ?? [];
      setAlerts(payload);
    } catch {
      // 静默
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchAlerts();
    const timer = setInterval(fetchAlerts, 30_000);
    return () => clearInterval(timer);
  }, [fetchAlerts]);

  const handleDismiss = async (id: string) => {
    setDismissing(id);
    try {
      await dismissInsight(id);
      setAlerts((prev) => prev.filter((a) => a.id !== id));
    } finally {
      setDismissing(null);
    }
  };

  if (!alerts.length && !loading) return null;

  const criticalCount = alerts.filter((a) => a.severity === 'critical').length;

  return (
    <div>
      {criticalCount > 0 && (
        <Alert
          type="error"
          showIcon
          message={`${criticalCount} 条危急告警`}
          banner
          style={{ marginBottom: 16 }}
        />
      )}
      {loading && alerts.length === 0 ? (
        <Spin />
      ) : (
        <List
          size="small"
          dataSource={alerts}
          renderItem={(item) => {
            const config = severityConfig[item.severity] ?? severityConfig.info;
            return (
              <List.Item
                actions={[
                  <Button
                    key="dismiss"
                    size="small"
                    icon={<CheckOutlined />}
                    loading={dismissing === item.id}
                    onClick={() => handleDismiss(item.id)}
                  >
                    已知悉
                  </Button>,
                ]}
              >
                <List.Item.Meta
                  title={
                    <Space>
                      <Badge status={config.type} />
                      <Typography.Text>{item.title}</Typography.Text>
                    </Space>
                  }
                  description={
                    item.content?.suggestion ? (
                      <Typography.Text type="secondary">
                        {item.content.suggestion as string}
                      </Typography.Text>
                    ) : undefined
                  }
                />
              </List.Item>
            );
          }}
        />
      )}
    </div>
  );
}