import { useState, useEffect, useCallback } from 'react';
import { toast } from 'sonner';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { agentApi } from '@/services/api';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  AlertTriangle,
  CheckCircle,
  Plus,
  Pencil,
  Trash2,
  Loader2,
  RefreshCw,
  Bell,
  Cpu,
  MemoryStick,
  HardDrive,
  WifiOff,
  Network,
  Clock,
} from 'lucide-react';

// ============ 常量 ============

const METRIC_OPTIONS = [
  { value: 'cpu', label: 'CPU', icon: Cpu },
  { value: 'mem', label: '内存', icon: MemoryStick },
  { value: 'disk', label: '磁盘', icon: HardDrive },
  { value: 'offline', label: '主机离线', icon: WifiOff },
  { value: 'port_down', label: '端口不通', icon: Network },
];

const OPERATOR_OPTIONS = [
  { value: '>', label: '> 大于' },
  { value: '<', label: '< 小于' },
  { value: '>=', label: '≥ 大于等于' },
  { value: '<=', label: '≤ 小于等于' },
  { value: '==', label: '= 等于' },
];

const SEVERITY_OPTIONS = [
  { value: 'critical', label: '严重', color: 'bg-red-500/15 text-red-400 border-red-500/30' },
  { value: 'warning', label: '警告', color: 'bg-amber-500/15 text-amber-400 border-amber-500/30' },
  { value: 'info', label: '提示', color: 'bg-blue-500/15 text-blue-400 border-blue-500/30' },
];

function getMetricLabel(metric: string) {
  return METRIC_OPTIONS.find((m) => m.value === metric)?.label || metric;
}

function asList(data: any): any[] {
  if (!data) return [];
  if (Array.isArray(data)) return data;
  if (Array.isArray(data.list)) return data.list;
  if (Array.isArray(data.items)) return data.items;
  if (Array.isArray(data.data)) return data.data;
  return [];
}

// ============ 主组件 ============

export function AgentAlerts() {
  const confirm = useConfirm();
  const [activeTab, setActiveTab] = useState('events');
  const [alerts, setAlerts] = useState<any[]>([]);
  const [rules, setRules] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [resolvedView, setResolvedView] = useState(false);

  // 规则编辑
  const [ruleOpen, setRuleOpen] = useState(false);
  const [editingRule, setEditingRule] = useState<any>(null);
  const [ruleSaving, setRuleSaving] = useState(false);
  const [ruleForm, setRuleForm] = useState({
    name: '',
    metric: 'cpu',
    operator: '>',
    threshold: '90',
    port: '',
    severity: 'warning',
    enabled: true,
    duration: '60',
  });

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const [alertsRes, rulesRes] = await Promise.all([
        agentApi.listAlerts({ resolved: String(resolvedView) }),
        agentApi.listRules(),
      ]);
      setAlerts(asList(alertsRes));
      setRules(asList(rulesRes));
    } catch (err) {
      console.error(err);
      toast.error('加载告警数据失败');
    } finally {
      setLoading(false);
    }
  }, [resolvedView]);

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

  // ============ 告警事件 ============
  const handleResolve = async (id: number) => {
    const ok = await confirm({ title: '恢复告警', description: '确定将此告警标记为已恢复？', confirmText: '恢复' });
    if (!ok) return;
    try {
      await agentApi.resolveAlert(id);
      toast.success('告警已恢复');
      loadData();
    } catch (err: any) {
      toast.error(err?.message || '操作失败');
    }
  };

  // ============ 规则 CRUD ============
  const resetRuleForm = () => {
    setRuleForm({ name: '', metric: 'cpu', operator: '>', threshold: '90', port: '', severity: 'warning', enabled: true, duration: '60' });
    setEditingRule(null);
  };

  const openCreateRule = () => {
    resetRuleForm();
    setRuleOpen(true);
  };

  const openEditRule = (rule: any) => {
    setEditingRule(rule);
    setRuleForm({
      name: rule.name || '',
      metric: rule.metric || 'cpu',
      operator: rule.operator || '>',
      threshold: String(rule.threshold ?? '90'),
      port: rule.port ? String(rule.port) : '',
      severity: rule.severity || 'warning',
      enabled: rule.enabled !== false,
      duration: rule.duration ? String(rule.duration) : '60',
    });
    setRuleOpen(true);
  };

  const handleSaveRule = async () => {
    if (!ruleForm.name.trim()) {
      toast.error('请输入规则名称');
      return;
    }
    setRuleSaving(true);
    try {
      const payload: any = {
        name: ruleForm.name.trim(),
        metric: ruleForm.metric,
        operator: ruleForm.operator,
        threshold: Number(ruleForm.threshold) || 0,
        severity: ruleForm.severity,
        enabled: ruleForm.enabled,
        duration: Number(ruleForm.duration) || 0,
      };
      if (ruleForm.metric === 'port_down' && ruleForm.port) {
        payload.port = Number(ruleForm.port);
      }
      if (editingRule) {
        await agentApi.updateRule(editingRule.id, payload);
        toast.success('规则已更新');
      } else {
        await agentApi.createRule(payload);
        toast.success('规则已创建');
      }
      setRuleOpen(false);
      resetRuleForm();
      loadData();
    } catch (err: any) {
      toast.error(err?.message || '保存失败');
    } finally {
      setRuleSaving(false);
    }
  };

  const handleDeleteRule = async (id: number) => {
    const ok = await confirm({ title: '删除规则', description: '确定删除此告警规则？', confirmText: '删除', variant: 'destructive' });
    if (!ok) return;
    try {
      await agentApi.deleteRule(id);
      toast.success('规则已删除');
      loadData();
    } catch (err: any) {
      toast.error(err?.message || '删除失败');
    }
  };

  const handleToggleRule = async (rule: any) => {
    try {
      await agentApi.updateRule(rule.id, { ...rule, enabled: !rule.enabled });
      loadData();
    } catch (err: any) {
      toast.error(err?.message || '操作失败');
    }
  };

  const severityBadge = (sev: string) => {
    const opt = SEVERITY_OPTIONS.find((s) => s.value === sev) || SEVERITY_OPTIONS[1];
    return (
      <Badge className={opt.color}>
        <AlertTriangle className="h-3 w-3 mr-1" />
        {opt.label}
      </Badge>
    );
  };

  return (
    <div className="space-y-4">
      {/* 页头 */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-semibold text-slate-100">Agent 告警</h2>
          <p className="text-sm text-slate-400 mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
        </div>
        <Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700">
          <RefreshCw className={`h-4 w-4 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
          刷新
        </Button>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="bg-slate-800 border border-slate-700">
          <TabsTrigger value="events" className="data-[state=active]:bg-slate-700">告警事件</TabsTrigger>
          <TabsTrigger value="rules" className="data-[state=active]:bg-slate-700">告警规则</TabsTrigger>
        </TabsList>

        {/* ========== 告警事件 ========== */}
        <TabsContent value="events" className="mt-4 space-y-3">
          <div className="flex items-center gap-2">
            <Button
              size="sm"
              variant={resolvedView ? 'outline' : 'default'}
              onClick={() => setResolvedView(false)}
              className={!resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
            >
              未恢复
            </Button>
            <Button
              size="sm"
              variant={resolvedView ? 'default' : 'outline'}
              onClick={() => setResolvedView(true)}
              className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
            >
              已恢复
            </Button>
          </div>

          {loading ? (
            <Card className="bg-slate-900 border-slate-800">
              <CardContent className="flex items-center justify-center py-16">
                <Loader2 className="h-5 w-5 animate-spin text-slate-500" />
                <span className="ml-2 text-slate-400">加载中...</span>
              </CardContent>
            </Card>
          ) : alerts.length === 0 ? (
            <Card className="bg-slate-900 border-slate-800">
              <CardContent className="flex flex-col items-center justify-center py-16">
                <CheckCircle className="h-10 w-10 text-emerald-500 mb-3" />
                <p className="text-slate-400">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警，一切正常'}</p>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-2">
              {alerts.map((alert) => (
                <Card key={alert.id} className="bg-slate-900 border-slate-800 py-4">
                  <CardContent>
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex items-start gap-3 min-w-0 flex-1">
                        <div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
                          <AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'text-red-400' : (alert.severity || 'warning') === 'warning' ? 'text-amber-400' : 'text-blue-400'}`} />
                        </div>
                        <div className="min-w-0">
                          <div className="flex items-center gap-2 flex-wrap">
                            {severityBadge(alert.severity)}
                            <span className="font-medium text-slate-100">{alert.rule_name || alert.name || alert.title || '告警'}</span>
                          </div>
                          <p className="text-sm text-slate-400 mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
                          <div className="flex items-center gap-4 mt-2 text-xs text-slate-500 flex-wrap">
                            <span className="inline-flex items-center gap-1">
                              <Cpu className="h-3 w-3" />
                              {alert.hostname || '--'}
                            </span>
                            <span className="inline-flex items-center gap-1">
                              <span className="text-slate-400">指标:</span> {getMetricLabel(alert.metric)}
                            </span>
                            {alert.value != null && (
                              <span className="inline-flex items-center gap-1">
                                <span className="text-slate-400">当前值:</span> {alert.value}
                              </span>
                            )}
                            <span className="inline-flex items-center gap-1">
                              <Clock className="h-3 w-3" />
                              {alert.created_at || alert.triggered_at ? new Date(alert.created_at || alert.triggered_at).toLocaleString() : '--'}
                            </span>
                          </div>
                        </div>
                      </div>
                      {!resolvedView && (
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleResolve(alert.id)}
                          className="shrink-0 h-8 bg-slate-800 border-slate-700 text-emerald-400 hover:bg-emerald-500/10 hover:text-emerald-400"
                        >
                          <CheckCircle className="h-3.5 w-3.5 mr-1" />
                          恢复
                        </Button>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </TabsContent>

        {/* ========== 告警规则 ========== */}
        <TabsContent value="rules" className="mt-4 space-y-3">
          <div className="flex justify-end">
            <Button size="sm" onClick={openCreateRule} className="bg-blue-600 hover:bg-blue-700 text-white">
              <Plus className="h-4 w-4 mr-1.5" />
              新建规则
            </Button>
          </div>

          {loading ? (
            <Card className="bg-slate-900 border-slate-800">
              <CardContent className="flex items-center justify-center py-16">
                <Loader2 className="h-5 w-5 animate-spin text-slate-500" />
                <span className="ml-2 text-slate-400">加载中...</span>
              </CardContent>
            </Card>
          ) : rules.length === 0 ? (
            <Card className="bg-slate-900 border-slate-800">
              <CardContent className="flex flex-col items-center justify-center py-16">
                <Bell className="h-10 w-10 text-slate-600 mb-3" />
                <p className="text-slate-400">暂无告警规则</p>
                <Button size="sm" onClick={openCreateRule} className="mt-4 bg-blue-600 hover:bg-blue-700 text-white">
                  <Plus className="h-4 w-4 mr-1.5" />
                  创建第一条规则
                </Button>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-2">
              {rules.map((rule) => {
                const MetricIcon = METRIC_OPTIONS.find((m) => m.value === rule.metric)?.icon || Cpu;
                return (
                  <Card key={rule.id} className={`bg-slate-900 ${rule.enabled === false ? 'border-slate-800 opacity-60' : 'border-slate-800'} py-4`}>
                    <CardContent>
                      <div className="flex items-center justify-between gap-3">
                        <div className="flex items-center gap-3 min-w-0 flex-1">
                          <div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
                            <MetricIcon className="h-4 w-4 text-blue-400" />
                          </div>
                          <div className="min-w-0">
                            <div className="flex items-center gap-2 flex-wrap">
                              <span className="font-medium text-slate-100">{rule.name}</span>
                              {severityBadge(rule.severity)}
                              {rule.enabled === false && (
                                <Badge className="bg-slate-700 text-slate-400 border border-slate-600">已禁用</Badge>
                              )}
                            </div>
                            <div className="flex items-center gap-3 mt-1.5 text-xs text-slate-500 flex-wrap">
                              <span>{getMetricLabel(rule.metric)}</span>
                              {rule.metric !== 'offline' && (
                                <span className="text-slate-400">
                                  {rule.operator} {rule.threshold}{rule.metric === 'port_down' ? '' : '%'}
                                </span>
                              )}
                              {rule.metric === 'port_down' && rule.port ? (
                                <span className="text-slate-400">端口 {rule.port}</span>
                              ) : null}
                              {rule.duration ? <span className="text-slate-400">持续 {rule.duration}s</span> : null}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center gap-2 shrink-0">
                          <Switch checked={rule.enabled !== false} onCheckedChange={() => handleToggleRule(rule)} />
                          <Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-slate-100 hover:bg-slate-800" onClick={() => openEditRule(rule)}>
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-slate-800" onClick={() => handleDeleteRule(rule.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          )}
        </TabsContent>
      </Tabs>

      {/* ========== 规则编辑弹窗 ========== */}
      <Dialog open={ruleOpen} onOpenChange={(v) => { if (!v) setRuleOpen(false); }}>
        <DialogContent className="max-w-md bg-slate-900 border-slate-800 text-slate-100">
          <DialogHeader>
            <DialogTitle className="text-slate-100">{editingRule ? '编辑规则' : '新建规则'}</DialogTitle>
            <DialogDescription className="text-slate-400">配置 Agent 指标告警规则</DialogDescription>
          </DialogHeader>

          <div className="space-y-3">
            <div className="space-y-1.5">
              <Label className="text-slate-300 text-xs">规则名称</Label>
              <Input
                value={ruleForm.name}
                onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })}
                placeholder="例如：CPU 使用率告警"
                className="h-9 bg-slate-800 border-slate-700 text-slate-200"
              />
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label className="text-slate-300 text-xs">监控指标</Label>
                <Select value={ruleForm.metric} onValueChange={(v) => setRuleForm({ ...ruleForm, metric: v })}>
                  <SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
                    {METRIC_OPTIONS.map((m) => (
                      <SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label className="text-slate-300 text-xs">严重程度</Label>
                <Select value={ruleForm.severity} onValueChange={(v) => setRuleForm({ ...ruleForm, severity: v })}>
                  <SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
                    {SEVERITY_OPTIONS.map((s) => (
                      <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            {ruleForm.metric !== 'offline' && (
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label className="text-slate-300 text-xs">比较运算符</Label>
                  <Select value={ruleForm.operator} onValueChange={(v) => setRuleForm({ ...ruleForm, operator: v })}>
                    <SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
                      {OPERATOR_OPTIONS.map((o) => (
                        <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-1.5">
                  <Label className="text-slate-300 text-xs">阈值 {ruleForm.metric !== 'port_down' ? '(%)' : ''}</Label>
                  <Input
                    type="number"
                    value={ruleForm.threshold}
                    onChange={(e) => setRuleForm({ ...ruleForm, threshold: e.target.value })}
                    className="h-9 bg-slate-800 border-slate-700 text-slate-200"
                  />
                </div>
              </div>
            )}

            {ruleForm.metric === 'port_down' && (
              <div className="space-y-1.5">
                <Label className="text-slate-300 text-xs">监控端口</Label>
                <Input
                  type="number"
                  value={ruleForm.port}
                  onChange={(e) => setRuleForm({ ...ruleForm, port: e.target.value })}
                  placeholder="例如：8080"
                  className="h-9 bg-slate-800 border-slate-700 text-slate-200"
                />
              </div>
            )}

            <div className="space-y-1.5">
              <Label className="text-slate-300 text-xs">持续时间(秒)</Label>
              <Input
                type="number"
                value={ruleForm.duration}
                onChange={(e) => setRuleForm({ ...ruleForm, duration: e.target.value })}
                placeholder="指标持续超限多久后告警"
                className="h-9 bg-slate-800 border-slate-700 text-slate-200"
              />
            </div>

            <div className="flex items-center justify-between">
              <Label className="text-slate-300 text-xs">启用规则</Label>
              <Switch checked={ruleForm.enabled} onCheckedChange={(v) => setRuleForm({ ...ruleForm, enabled: v })} />
            </div>
          </div>

          <DialogFooter className="gap-2">
            <Button variant="outline" onClick={() => setRuleOpen(false)} className="border-slate-700 text-slate-300">取消</Button>
            <Button onClick={handleSaveRule} disabled={ruleSaving} className="bg-blue-600 hover:bg-blue-700 text-white">
              {ruleSaving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
              {editingRule ? '保存' : '创建'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default AgentAlerts;