/**
 * @docs ARCHITECTURE:Interface
 * 
 * ### AI Assist Note
 * **UI Component**: Experimental laboratory for MCP (Model Context Protocol) integration. 
 * Facilitates the testing and discovery of external tools and server-side capabilities.
 * 
 * ### 🔍 Debugging & Observability
 * - **Failure Path**: MCP server handshake timeout (unreachable), tool manifest parsing error, or lab session leak.
 * - **Telemetry Link**: Search for `[Mcp_Lab_Modal]` or mcp_discovery in service logs.
 */

import React from 'react';
import { Copy } from 'lucide-react';
import { type Mcp_Tool_Hub_Definition } from '../../stores/skill_store';
import { i18n } from '../../i18n';

interface Mcp_Lab_Modal_Props {
    tool: Mcp_Tool_Hub_Definition | null;
    open: boolean;
    on_close: () => void;
}

export const Mcp_Lab_Modal: React.FC<Mcp_Lab_Modal_Props> = ({ tool, open, on_close }) => {
    if (!open || !tool) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm animate-in fade-in duration-300">
            <div className="bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-2xl w-full max-w-2xl overflow-hidden animate-in zoom-in-95 duration-300">
                <div className="p-6 border-b border-[color:var(--color-border)] flex justify-between items-center">
                    <div>
                        <h3 className="text-xl font-bold text-zinc-100">{tool.name}</h3>
                        <p className="text-sm text-zinc-500 mt-1">{tool.source}</p>
                    </div>
                    <button 
                        onClick={on_close}
                        className="text-zinc-500 hover:text-zinc-100 transition-colors"
                    >
                        {i18n.t('common.dismiss')}
                    </button>
                </div>
                <div className="p-6 space-y-4">
                    <p className="text-zinc-400">{tool.description}</p>
                    <div className="space-y-2 relative">
                        <div className="flex items-center justify-between">
                            <p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">{i18n.t('missions.label_input_schema')}</p>
                                <button 
                                    onClick={() => navigator.clipboard.writeText(JSON.stringify(tool.input_schema, null, 2))}
                                    className="text-zinc-500 hover:text-zinc-300 transition-colors p-1"
                                    aria-label={i18n.t('common.copy_clipboard')}
                                >
                                <Copy size={12} />
                            </button>
                        </div>
                        <pre className="bg-zinc-950/50 p-4 rounded-xl border border-[color:var(--color-border)] font-mono text-xs text-green-400 overflow-auto max-h-[300px]">
                            {JSON.stringify(tool.input_schema, null, 2)}
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    );
};

// Metadata: [Mcp_Lab_Modal]
