import { X } from "lucide-react";
import { type ReactNode, useEffect, useId, useRef } from "react";

interface ConfirmDialogProps {
  open: boolean;
  title: string;
  description: ReactNode;
  confirmLabel: string;
  danger?: boolean;
  busy?: boolean;
  confirmDisabled?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  children?: ReactNode;
}

export function ConfirmDialog({ open, title, description, confirmLabel, danger, busy, confirmDisabled, onConfirm, onCancel, children }: ConfirmDialogProps) {
  const titleId = useId();
  const descriptionId = useId();
  const panelRef = useDialogLifecycle(open, onCancel, !busy);
  if (!open) {
    return null;
  }
  return (
    <div className="confirm-backdrop" role="presentation" onClick={() => !busy && onCancel()}>
      <div
        ref={panelRef}
        className="confirm-panel"
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        aria-describedby={descriptionId}
        aria-busy={busy}
        onClick={(event) => event.stopPropagation()}
      >
        <div className="panel-header dialog-panel-header">
          <h2 id={titleId}>{title}</h2>
          <button type="button" className="theme-upload drawer-close" aria-label={`关闭${title}`} onClick={onCancel} disabled={busy}>
            <X size={14} />
            <span>关闭</span>
          </button>
        </div>
        <p id={descriptionId}>{description}</p>
        {children}
        <div className="confirm-actions">
          <button type="button" onClick={onCancel} disabled={busy}>
            取消
          </button>
          <button type="button" className={danger ? "confirm-danger" : "confirm-primary"} onClick={onConfirm} disabled={busy || confirmDisabled}>
            {busy ? "提交中…" : confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

interface ManagementDialogProps {
  open: boolean;
  title: string;
  description?: ReactNode;
  wide?: boolean;
  onClose: () => void;
  children: ReactNode;
}

export function ManagementDialog({ open, title, description, wide, onClose, children }: ManagementDialogProps) {
  const titleId = useId();
  const descriptionId = useId();
  const panelRef = useDialogLifecycle(open, onClose, true);
  if (!open) {
    return null;
  }
  return (
    <div className="confirm-backdrop management-dialog-backdrop" role="presentation" onClick={onClose}>
      <div
        ref={panelRef}
        className={`drawer-panel management-dialog-panel${wide ? " management-dialog-wide" : ""}`}
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        aria-describedby={description ? descriptionId : undefined}
        onClick={(event) => event.stopPropagation()}
      >
        <div className="panel-header dialog-panel-header">
          <h2 id={titleId}>{title}</h2>
          <button type="button" className="theme-upload drawer-close" aria-label={`关闭${title}`} onClick={onClose}>
            <X size={14} />
            <span>关闭</span>
          </button>
        </div>
        {description && <p id={descriptionId} className="dialog-description">{description}</p>}
        {children}
      </div>
    </div>
  );
}

function useDialogLifecycle(open: boolean, onClose: () => void, canClose: boolean) {
  const panelRef = useRef<HTMLDivElement>(null);
  const onCloseRef = useRef(onClose);
  const canCloseRef = useRef(canClose);

  useEffect(() => {
    onCloseRef.current = onClose;
    canCloseRef.current = canClose;
  }, [canClose, onClose]);

  useEffect(() => {
    if (!open) {
      return;
    }
    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
    const panel = panelRef.current;
    const focusTarget =
      panel?.querySelector<HTMLElement>("input:not([disabled]), select:not([disabled]), textarea:not([disabled])") ??
      panel?.querySelector<HTMLElement>("button:not([disabled])");
    focusTarget?.focus();

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape" && canCloseRef.current) {
        event.preventDefault();
        onCloseRef.current();
      }
    }

    document.addEventListener("keydown", handleKeyDown);
    const previousBodyOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      document.body.style.overflow = previousBodyOverflow;
      previousFocus?.focus();
    };
  }, [open]);

  return panelRef;
}

interface UsageMeterProps {
  label: string;
  percent?: number;
  pending?: boolean;
}

export function UsageMeter({ label, percent, pending = false }: UsageMeterProps) {
  const known = typeof percent === "number" && Number.isFinite(percent);
  const clamped = known ? Math.max(0, Math.min(100, percent)) : 0;
  const rounded = Math.round(clamped);
  const state = known ? (clamped >= 85 ? "critical" : clamped >= 70 ? "watch" : "normal") : pending ? "pending" : "missing";
  const stateLabel = known ? (clamped >= 85 ? "警戒" : clamped >= 70 ? "偏高" : "正常") : pending ? "读取中" : "未上报";
  const trackText = pending ? "等待指标" : "等待 Run";
  return (
    <div className={`usage-meter usage-meter-${state}`} title={known ? `${label} ${rounded}% ${stateLabel}` : `${label} ${stateLabel}`}>
      <span className="usage-meter-label"><span>{label}</span><small>{stateLabel}</small></span>
      <span className="usage-meter-value">{known ? `${rounded}%` : stateLabel}</span>
      <span className="usage-meter-track" role={known ? "meter" : "img"} aria-label={known ? `${label} ${rounded}% ${stateLabel}` : `${label} ${stateLabel}`} aria-valuemin={known ? 0 : undefined} aria-valuemax={known ? 100 : undefined} aria-valuenow={known ? rounded : undefined} aria-valuetext={known ? undefined : stateLabel}>
        {known ? <span className="usage-meter-fill" style={{ width: `${clamped}%` }} /> : <span className="usage-meter-placeholder">{trackText}</span>}
      </span>
    </div>
  );
}

interface DiffViewProps {
  lines: Array<{ kind: "same" | "added" | "removed"; text: string }>;
}

export function DiffView({ lines }: DiffViewProps) {
  return (
    <div className="diff-view" role="figure" aria-label="配置变更对比">
      {lines.map((line, index) => (
        <span key={`${index}-${line.text}`} className={`diff-line diff-line-${line.kind}`}>
          <span aria-hidden="true">{line.kind === "added" ? "+" : line.kind === "removed" ? "-" : " "}</span>
          <span>{line.text || " "}</span>
        </span>
      ))}
    </div>
  );
}