'use client';

import { useEffect, useState } from 'react';

import { StatusBadge } from '@/components/badge';
import type { McpServer, McpStatus } from '@/types/config';

export function McpStatusTable({ servers }: { servers: McpServer[] }) {
    const [statuses, setStatuses] = useState<Record<string, McpStatus['status']>>({});
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/mcp-status')
            .then(r => r.json())
            .then((data: McpStatus[]) => {
                const map: Record<string, McpStatus['status']> = {};
                for (const entry of data) {
                    map[entry.name] = entry.status;
                }
                setStatuses(map);
            })
            .catch(() => {})
            .finally(() => setLoading(false));
    }, []);

    return (
        <div className="overflow-hidden rounded-lg border border-zinc-800">
            <table className="w-full text-sm">
                <thead>
                    <tr className="border-b border-zinc-800 bg-zinc-900">
                        <th className="px-4 py-3 text-left font-medium text-zinc-400">Name</th>
                        <th className="px-4 py-3 text-left font-medium text-zinc-400">Type</th>
                        <th className="px-4 py-3 text-left font-medium text-zinc-400">Command / URL</th>
                        <th className="px-4 py-3 text-left font-medium text-zinc-400">Status</th>
                        <th className="px-4 py-3 text-left font-medium text-zinc-400">Scope</th>
                    </tr>
                </thead>
                <tbody>
                    {servers.map(server => {
                        const cmdDisplay = server.url ?? server.command ?? '—';
                        const status = statuses[server.name] ?? 'unknown';
                        return (
                            <tr
                                key={server.name}
                                className="border-b border-zinc-800/50 bg-zinc-950 last:border-0"
                            >
                                <td className="px-4 py-3 font-mono text-zinc-100">
                                    {server.name}
                                </td>
                                <td className="px-4 py-3 text-zinc-400">
                                    {server.type.toUpperCase()}
                                </td>
                                <td className="max-w-xs truncate px-4 py-3 font-mono text-xs text-zinc-500">
                                    {cmdDisplay}
                                </td>
                                <td className="px-4 py-3">
                                    {loading ? (
                                        <span className="text-xs text-zinc-600">…</span>
                                    ) : (
                                        <StatusBadge status={status} />
                                    )}
                                </td>
                                <td className="px-4 py-3 text-zinc-500">
                                    {server.scope}
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>

            {servers.some(s => s.env) && (
                <div className="border-t border-zinc-800 p-4">
                    <p className="mb-3 text-xs font-medium text-zinc-500 uppercase tracking-wide">
                        Environment Variables
                    </p>
                    {servers
                        .filter(s => s.env && Object.keys(s.env).length > 0)
                        .map(server => (
                            <div key={server.name} className="mb-3">
                                <p className="mb-1 text-xs font-mono text-zinc-400">
                                    {server.name}
                                </p>
                                <div className="flex flex-wrap gap-2">
                                    {Object.entries(server.env!).map(([k, v]) => (
                                        <span
                                            key={k}
                                            className="rounded bg-zinc-900 px-2 py-1 font-mono text-xs text-zinc-400"
                                        >
                                            <span className="text-zinc-300">{k}</span>
                                            {' = '}
                                            <span className="text-zinc-500">{v}</span>
                                        </span>
                                    ))}
                                </div>
                            </div>
                        ))}
                </div>
            )}
        </div>
    );
}