'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertTriangle, CheckCircle2, KeyRound, Loader2, Lock, Plug, RefreshCw, Trash2, } from 'lucide-react';
import { useId, useState } from 'react';
import { ConfirmDangerousSettingDialog } from './components.js';
const INPUT_CLASS = 'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60';
const LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground';
const STATUS_META = {
    connected: { label: 'Connected', tone: 'ok' },
    invalid_key: { label: 'Invalid key', tone: 'error' },
    rate_limited: { label: 'Rate limited', tone: 'warn' },
    provider_down: { label: 'Provider unavailable', tone: 'warn' },
    needs_setup: { label: 'Needs API key', tone: 'idle' },
    unknown: { label: 'Not tested', tone: 'idle' },
};
function StatusPill({ status }) {
    const meta = STATUS_META[status];
    const toneClass = meta.tone === 'ok'
        ? 'border-success/30 bg-success/10 text-success'
        : meta.tone === 'error'
            ? 'border-destructive/30 bg-destructive/10 text-destructive'
            : meta.tone === 'warn'
                ? 'border-warning/30 bg-warning/10 text-warning'
                : 'border-border bg-muted text-muted-foreground';
    return (_jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${toneClass}`, children: [meta.tone === 'ok' ? (_jsx(CheckCircle2, { size: 12, "aria-hidden": "true" })) : meta.tone === 'error' ? (_jsx(AlertTriangle, { size: 12, "aria-hidden": "true" })) : (_jsx(Plug, { size: 12, "aria-hidden": "true" })), meta.label] }));
}
export function ProviderConnectionCard({ provider, canEdit, busy, onTest, onSyncModels, onUpdateKey, onUpdateBaseUrl, onDisconnect, }) {
    const keyId = useId();
    const baseUrlId = useId();
    const [keyInput, setKeyInput] = useState('');
    const [baseUrlInput, setBaseUrlInput] = useState(provider.baseUrl ?? '');
    const [confirmKey, setConfirmKey] = useState(false);
    const [confirmDisconnect, setConfirmDisconnect] = useState(false);
    const envManaged = provider.keyManagedExternally;
    const keyEditable = canEdit && !envManaged;
    async function applyKey() {
        setConfirmKey(false);
        await onUpdateKey(keyInput.trim() === '' ? null : keyInput.trim());
        setKeyInput('');
    }
    return (_jsxs("div", { className: "border-border bg-background rounded-lg border p-4", children: [_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-foreground text-base font-medium", children: provider.displayName }), _jsx(StatusPill, { status: provider.status })] }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm capitalize", children: provider.provider })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onTest, disabled: !canEdit || busy, className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60", children: [busy ? (_jsx(Loader2, { size: 14, className: "animate-spin", "aria-hidden": "true" })) : (_jsx(Plug, { size: 14, "aria-hidden": "true" })), "Test connection"] }), _jsxs("button", { type: "button", onClick: onSyncModels, disabled: !canEdit || busy, "aria-label": `Refresh models for ${provider.displayName}`, className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx(RefreshCw, { size: 14, "aria-hidden": "true" }), "Refresh models"] }), _jsx("button", { type: "button", onClick: () => setConfirmDisconnect(true), disabled: !canEdit || busy, "aria-label": `Disconnect ${provider.displayName}`, className: "text-muted-foreground hover:text-destructive inline-flex items-center rounded-md p-1.5 transition-colors disabled:cursor-not-allowed disabled:opacity-60", children: _jsx(Trash2, { size: 16, "aria-hidden": "true" }) })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsxs("label", { htmlFor: keyId, className: LABEL_CLASS, children: [_jsx(KeyRound, { size: 13, "aria-hidden": "true" }), "API key", envManaged && (_jsxs("span", { className: "text-muted-foreground border-border bg-muted inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs", children: [_jsx(Lock, { size: 11, "aria-hidden": "true" }), "Managed by environment"] }))] }), envManaged ? (_jsxs("p", { className: "text-muted-foreground text-sm", children: ["This key is set via an environment variable and can't be edited here.", provider.apiKeyLast4 ? ` Ends in ••••${provider.apiKeyLast4}.` : ''] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { id: keyId, type: "password", autoComplete: "off", spellCheck: false, value: keyInput, disabled: !keyEditable || busy, placeholder: provider.hasKey
                                            ? `Key set ••••${provider.apiKeyLast4 ?? ''} — enter a new key to replace`
                                            : 'Paste API key', onChange: (e) => setKeyInput(e.target.value), className: INPUT_CLASS }), _jsx("button", { type: "button", onClick: () => setConfirmKey(true), disabled: !keyEditable || busy || keyInput.trim() === '', className: "bg-brand text-brand-foreground inline-flex shrink-0 items-center rounded-md px-3 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50", children: "Save key" })] }))] }), provider.provider === 'custom' && (_jsxs("div", { children: [_jsx("label", { htmlFor: baseUrlId, className: LABEL_CLASS, children: "Base URL" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { id: baseUrlId, type: "url", value: baseUrlInput, disabled: !canEdit || busy, placeholder: "https://api.example.com/v1", onChange: (e) => setBaseUrlInput(e.target.value), className: INPUT_CLASS }), _jsx("button", { type: "button", onClick: () => onUpdateBaseUrl(baseUrlInput.trim()), disabled: !canEdit || busy || baseUrlInput.trim() === (provider.baseUrl ?? ''), className: "border-border text-foreground hover:bg-accent inline-flex shrink-0 items-center rounded-md border px-3 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60", children: "Save" })] })] })), provider.lastTestedAt && (_jsxs("p", { className: "text-muted-foreground text-sm", children: ["Last tested ", new Date(provider.lastTestedAt).toLocaleString(), "."] }))] }), _jsx(ConfirmDangerousSettingDialog, { open: confirmKey, title: "Replace the stored API key?", description: "The new key is encrypted and replaces the existing one. Existing AI features will use it immediately.", confirmLabel: "Save key", onConfirm: applyKey, onCancel: () => setConfirmKey(false) }), _jsx(ConfirmDangerousSettingDialog, { open: confirmDisconnect, title: `Disconnect ${provider.displayName}?`, description: "This removes the stored key and model catalog for this provider. AI features that rely on it will stop working until you reconnect.", confirmLabel: "Disconnect", onConfirm: () => {
                    setConfirmDisconnect(false);
                    onDisconnect();
                }, onCancel: () => setConfirmDisconnect(false) })] }));
}
//# sourceMappingURL=ProviderConnectionCard.js.map