// 站点拨测 — HTTP / PING / DNS / TCP / WebSocket 等协议主动监控
import { Card, CardContent } from '@/components/ui/card';
import { Globe, Wifi, Server, Mail, ArrowUpDown } from 'lucide-react';

const probeTypes = [
  { icon: Globe, name: 'HTTP(S)', color: 'text-blue-400', desc: 'URL 状态码 & 响应时间' },
  { icon: ArrowUpDown, name: 'PING', color: 'text-emerald-400', desc: 'ICMP 连通性 & 延迟' },
  { icon: Wifi, name: 'WebSocket', color: 'text-purple-400', desc: 'WS/WSS 连接心跳' },
  { icon: Globe, name: 'DNS', color: 'text-cyan-400', desc: '域名解析延迟 & 结果验证' },
  { icon: Server, name: 'TCP', color: 'text-orange-400', desc: '端口连通性检测' },
  { icon: Server, name: 'UDP', color: 'text-yellow-400', desc: '端口连通性检测' },
  { icon: Mail, name: 'SMTP', color: 'text-pink-400', desc: '邮件服务连通性' },
  { icon: Mail, name: 'POP3', color: 'text-indigo-400', desc: '邮件接收服务' },
  { icon: Globe, name: 'FTP', color: 'text-teal-400', desc: '文件传输服务' },
];

export function SiteMonitor() {
  return (
    <div className="space-y-6">
      {/* Probe Type Grid */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
        {probeTypes.map((p) => (
          <Card key={p.name} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] hover:border-[var(--dg-blue)]/30 transition-colors cursor-pointer">
            <CardContent className="p-3 text-center">
              <p.icon className={`h-5 w-5 mx-auto mb-1.5 ${p.color}`} />
              <p className="text-xs font-medium text-[var(--dg-text-primary)]">{p.name}</p>
              <p className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{p.desc}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Summary */}
      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
        <CardContent className="p-4">
          <div className="flex items-center gap-2 mb-3">
            <Globe className="h-4 w-4 text-[var(--dg-text-muted)]" />
            <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">拨测任务概览</h3>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {['总任务数', '正常', '异常', '可用率'].map((label) => (
              <div key={label} className="bg-[var(--dg-bg-tertiary)] rounded-lg p-3 text-center">
                <p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
                <p className="text-lg font-bold text-[var(--dg-text-primary)]">--</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}