"use client";

import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@/components/ui/sheet";
import { Badge } from "@/components/ui/badge";
import type { McpTool } from "@/lib/api/settings";

type Props = {
  tool: McpTool | null;
  open: boolean;
  onOpenChange: (o: boolean) => void;
};

export function ToolDetailDrawer({ tool, open, onOpenChange }: Props) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent dir="rtl" side="left" className="sm:max-w-xl overflow-y-auto">
        {tool && (
          <>
            <SheetHeader>
              <SheetTitle dir="ltr" className="font-mono text-navy">
                {tool.name}
              </SheetTitle>
              <SheetDescription>{tool.description || "—"}</SheetDescription>
            </SheetHeader>
            <div className="space-y-4 mt-4 px-4 pb-6">
              <div>
                <div className="text-[0.72rem] text-ink-muted uppercase mb-1">
                  Module
                </div>
                <Badge variant="outline" className="font-mono" dir="ltr">
                  {tool.module}
                </Badge>
              </div>
              <div>
                <div className="text-[0.72rem] text-ink-muted uppercase mb-1">
                  Source
                </div>
                <code dir="ltr" className="text-xs text-ink break-all">
                  {tool.source_location || "—"}
                </code>
              </div>
              <div>
                <div className="text-[0.72rem] text-ink-muted uppercase mb-1">
                  Parameters Schema
                </div>
                <pre
                  dir="ltr"
                  className="text-xs bg-rule-soft/40 border border-rule rounded-md p-3 overflow-x-auto"
                >
                  {JSON.stringify(tool.params_schema, null, 2)}
                </pre>
              </div>
            </div>
          </>
        )}
      </SheetContent>
    </Sheet>
  );
}