// 监控图表放大壳 — 复用主机监控 ChartToolbar + 宽屏弹框 // Logan.Li
import { useState, type ReactNode } from 'react';
import {
  Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,
} from '@/components/ui/dialog';
import { ChartToolbar } from '../host-monitor/ChartToolbar';

interface Props {
  title: string;
  icon?: ReactNode;
  /** 紧凑视图高度 */
  compactHeight?: number;
  /** 弹框内图表高度 */
  expandedHeight?: number;
  /** 无数据时不显示放大按钮 */
  empty?: boolean;
  className?: string;
  children: (height: number) => ReactNode;
}

export function ChartExpandShell({
  title,
  icon,
  compactHeight = 180,
  expandedHeight = 420,
  empty = false,
  className = 'rounded-lg bg-[var(--dg-bg-tertiary)] p-3',
  children,
}: Props) {
  const [expanded, setExpanded] = useState(false);

  return (
    <>
      <div className={className}>
        <div className="flex items-center justify-between gap-2 mb-2">
          <div className="flex items-center gap-2 min-w-0">
            {icon}
            <span className="text-xs text-[var(--dg-text-muted)] truncate">{title}</span>
          </div>
          {!empty && <ChartToolbar onExpand={() => setExpanded(true)} />}
        </div>
        {empty ? (
          <p className="text-xs text-center py-10 text-[var(--dg-text-muted)]">暂无数据</p>
        ) : (
          children(compactHeight)
        )}
      </div>

      <Dialog open={expanded} onOpenChange={setExpanded}>
        <DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-y-auto bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
          <DialogHeader>
            <DialogTitle className="text-base">{title}</DialogTitle>
            <DialogDescription className="text-[var(--dg-text-muted)]">放大查看监控趋势与指标细节</DialogDescription>
          </DialogHeader>
          <div className="pt-2">{children(expandedHeight)}</div>
        </DialogContent>
      </Dialog>
    </>
  );
}