// Ansible 查看 Playbook 内容弹窗 // Logan.Li
import { FileCode, Edit } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from '@/components/ui/dialog';
import { ScrollArea } from '@/components/ui/scroll-area';
import type { Playbook } from './ansible-helpers';

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  playbook: Playbook | null;
  onEdit: (pb: Playbook) => void;
}

const AnsibleDetailDialog: React.FC<Props> = ({ open, onOpenChange, playbook, onEdit }) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <FileCode className="w-5 h-5 text-blue-500" />
            {playbook?.name}
          </DialogTitle>
          <DialogDescription>{playbook?.description}</DialogDescription>
        </DialogHeader>
        <ScrollArea className="h-[500px] w-full rounded-md border bg-black">
          <pre className="p-4 font-mono text-sm text-green-400 whitespace-pre-wrap">
            {playbook?.content || '（空）'}
          </pre>
        </ScrollArea>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>关闭</Button>
          {playbook && (
            <Button onClick={() => onEdit(playbook)}>
              <Edit className="w-4 h-4 mr-2" />
              编辑
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default AnsibleDetailDialog;