import {
  CloseButton,
  Group,
  Modal,
  Stack,
  Text,
  Textarea,
} from "@mantine/core";

export interface OutputValidationModalProps {
  opened: boolean;
  onClose: () => void;
  /** The app tool whose result failed output-schema validation. */
  toolName?: string;
  /** The full validation error message (one issue per line). */
  message?: string;
}

const DetailModal = Modal.withProps({
  withCloseButton: false,
  size: "lg",
  centered: true,
});
const HeaderRow = Group.withProps({
  justify: "space-between",
  wrap: "nowrap",
});
const DimText = Text.withProps({ size: "sm", c: "dimmed" });
const DetailsTextarea = Textarea.withProps({
  "aria-label": "Validation details",
  readOnly: true,
  autosize: true,
  minRows: 6,
  maxRows: 18,
});

/**
 * Shows the full output-schema validation error for an MCP App tool result.
 * The inspector still renders the app (the result is forwarded verbatim to the
 * view), but the result violates the tool's declared `outputSchema`, so strict
 * MCP clients may refuse to render it — this modal surfaces the details a
 * server developer needs to fix it. Opened from the warning toast.
 */
export function OutputValidationModal({
  opened,
  onClose,
  toolName,
  message,
}: OutputValidationModalProps) {
  return (
    <DetailModal opened={opened} onClose={onClose}>
      <Stack gap="md">
        <HeaderRow>
          {/* `Modal.Title` names the dialog (wires `aria-labelledby`). */}
          <Modal.Title flex={1}>Output schema validation</Modal.Title>
          <CloseButton aria-label="Close" onClick={onClose} />
        </HeaderRow>
        <DimText>
          {toolName
            ? `"${toolName}" returned structuredContent that does not match its declared outputSchema. The inspector renders the app anyway, but strict MCP clients may refuse to display it.`
            : "The tool result's structuredContent does not match the declared outputSchema. The inspector renders the app anyway, but strict MCP clients may refuse to display it."}
        </DimText>
        <DetailsTextarea value={message ?? ""} />
      </Stack>
    </DetailModal>
  );
}