import { useEffect, useState } from 'react';
import { useParams, Navigate } from 'react-router-dom';
import { fetchSource } from '../../api/sources';
import type { DataSource, DatabaseType } from '../../types/datasource';
const DB_TYPE_DISPLAY_NAMES: Record<DatabaseType, string> = {
postgres: 'PostgreSQL',
mysql: 'MySQL',
mariadb: 'MariaDB',
sqlserver: 'SQL Server',
sqlite: 'SQLite',
};
export default function SourceDetailView() {
const { sourceId } = useParams<{ sourceId: string }>();
const [source, setSource] = useState<DataSource | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!sourceId) return;
setIsLoading(true);
setError(null);
fetchSource(sourceId)
.then((data) => {
setSource(data);
setIsLoading(false);
})
.catch((err) => {
setError(err.message);
setIsLoading(false);
});
}, [sourceId]);
if (!sourceId) {
return <Navigate to="/" replace />;
}
if (isLoading) {
return (
<div className="container mx-auto px-8 py-12">
<div className="text-muted-foreground">Loading source details...</div>
</div>
);
}
if (error) {
return (
<div className="container mx-auto px-8 py-12">
<div className="bg-destructive/10 border border-destructive/20 rounded-lg p-6">
<h2 className="text-lg font-semibold text-destructive mb-2">Error</h2>
<p className="text-destructive/90">{error}</p>
</div>
</div>
);
}
if (!source) {
return (
<div className="container mx-auto px-8 py-12">
<div className="text-muted-foreground">Source not found</div>
</div>
);
}
return (
<div className="container mx-auto px-8 py-12 max-w-4xl">
<div className="space-y-6">
<div>
<h1 className="text-3xl font-bold text-foreground mb-2">
{source.id}
</h1>
<p className="text-muted-foreground">
{DB_TYPE_DISPLAY_NAMES[source.type]} Database
</p>
</div>
<div className="bg-card border border-border rounded-lg p-6">
<h2 className="text-xl font-semibold text-foreground mb-4">
Connection Details
</h2>
<dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<dt className="text-sm font-medium text-muted-foreground">Database Type</dt>
<dd className="mt-1 text-sm text-foreground font-mono">{source.type}</dd>
</div>
{source.host && (
<div>
<dt className="text-sm font-medium text-muted-foreground">Host</dt>
<dd className="mt-1 text-sm text-foreground font-mono">{source.host}</dd>
</div>
)}
{source.port && (
<div>
<dt className="text-sm font-medium text-muted-foreground">Port</dt>
<dd className="mt-1 text-sm text-foreground font-mono">{source.port}</dd>
</div>
)}
{source.database && (
<div>
<dt className="text-sm font-medium text-muted-foreground">Database</dt>
<dd className="mt-1 text-sm text-foreground font-mono">{source.database}</dd>
</div>
)}
{source.user && (
<div>
<dt className="text-sm font-medium text-muted-foreground">User</dt>
<dd className="mt-1 text-sm text-foreground font-mono">{source.user}</dd>
</div>
)}
<div>
<dt className="text-sm font-medium text-muted-foreground">Default Source</dt>
<dd className="mt-1 text-sm text-foreground">
{source.is_default ? (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
Yes
</span>
) : (
<span className="text-muted-foreground">No</span>
)}
</dd>
</div>
</dl>
</div>
<div className="bg-card border border-border rounded-lg p-6">
<h2 className="text-xl font-semibold text-foreground mb-4">
Configuration
</h2>
<dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<dt className="text-sm font-medium text-muted-foreground">Read-Only Mode</dt>
<dd className="mt-1 text-sm text-foreground">
{source.readonly ? (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">
Enabled
</span>
) : (
<span className="text-muted-foreground">Disabled</span>
)}
</dd>
</div>
<div>
<dt className="text-sm font-medium text-muted-foreground">Max Rows</dt>
<dd className="mt-1 text-sm text-foreground font-mono">
{source.max_rows ?? 'Unlimited'}
</dd>
</div>
</dl>
</div>
{source.ssh_tunnel?.enabled && (
<div className="bg-card border border-border rounded-lg p-6">
<h2 className="text-xl font-semibold text-foreground mb-4">
SSH Tunnel
</h2>
<dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<dt className="text-sm font-medium text-muted-foreground">Status</dt>
<dd className="mt-1 text-sm text-foreground">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-600 dark:text-green-400">
Enabled
</span>
</dd>
</div>
{source.ssh_tunnel.ssh_host && (
<div>
<dt className="text-sm font-medium text-muted-foreground">SSH Host</dt>
<dd className="mt-1 text-sm text-foreground font-mono">
{source.ssh_tunnel.ssh_host}
</dd>
</div>
)}
{source.ssh_tunnel.ssh_port && (
<div>
<dt className="text-sm font-medium text-muted-foreground">SSH Port</dt>
<dd className="mt-1 text-sm text-foreground font-mono">
{source.ssh_tunnel.ssh_port}
</dd>
</div>
)}
{source.ssh_tunnel.ssh_user && (
<div>
<dt className="text-sm font-medium text-muted-foreground">SSH User</dt>
<dd className="mt-1 text-sm text-foreground font-mono">
{source.ssh_tunnel.ssh_user}
</dd>
</div>
)}
</dl>
</div>
)}
</div>
</div>
);
}
