// 拨测任务详情弹框 — 可观测指标与历史记录 // Logan.Li
import {
  Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,
} from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
import type { SiteTask } from './helpers';
import { fmtFrequency, normalizeProbeType } from './helpers';
import { SiteResultsPanel } from './SiteResultsPanel';

const dialogClass =
  '!max-w-[min(96vw,88rem)] sm:!max-w-[min(96vw,88rem)] w-[min(96vw,88rem)] max-h-[92vh] flex flex-col gap-2 p-4 sm:p-5 bg-[var(--dg-bg-primary)] border-[var(--dg-border)] overflow-hidden';

interface Props {
  task: SiteTask | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onProbed: () => void;
}

export function SiteTaskDetailDialog({ task, open, onOpenChange, onProbed }: Props) {
  if (!task) return null;

  const probeType = normalizeProbeType(task.type);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className={dialogClass}>
        <DialogHeader className="shrink-0 space-y-1 pr-8">
          <DialogTitle className="text-base truncate">{task.name}</DialogTitle>
          <DialogDescription className="flex flex-wrap items-center gap-2 text-xs">
            <span className="truncate max-w-full font-mono text-[var(--dg-text-muted)]">{task.url}</span>
            <Badge variant="outline" className="text-[10px]">{probeType}</Badge>
            <span className="text-[var(--dg-text-muted)]">频率 {fmtFrequency(task.frequency_sec)}</span>
          </DialogDescription>
        </DialogHeader>
        <div className="flex-1 min-h-0 overflow-y-auto">
          <SiteResultsPanel task={task} onProbed={onProbed} embedded />
        </div>
      </DialogContent>
    </Dialog>
  );
}