import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { diagramApi, reposApi } from '../lib/api'
import LoadingSpinner from '../components/LoadingSpinner'
import DiagramRenderer from '../components/DiagramRenderer'
export default function DiagramViewer() {
const [selectedRepo, setSelectedRepo] = useState<string>('')
const [diagramType, setDiagramType] = useState<string>('container')
const [detailed, setDetailed] = useState(false)
const { data: reposData } = useQuery({
queryKey: ['repos'],
queryFn: async () => {
const response = await reposApi.list()
return response.data
},
})
const { data: diagramData, isLoading, error } = useQuery({
queryKey: ['diagram', selectedRepo, diagramType, detailed],
queryFn: async () => {
const response = await diagramApi.generateC4({
repo: selectedRepo || undefined,
type: diagramType,
detailed,
})
return response.data
},
enabled: true,
})
const repos = (reposData as { repos?: Array<{ name: string }> })?.repos || []
return (
<div>
<h1 className="text-3xl font-bold mb-6">Diagram Viewer</h1>
<div className="bg-gray-800 rounded-lg p-4 mb-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label className="block text-sm font-medium mb-2">Repository</label>
<select
value={selectedRepo}
onChange={(e) => setSelectedRepo(e.target.value)}
className="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2"
>
<option value="">Ecosystem Overview</option>
{repos.map((repo) => (
<option key={repo.name} value={repo.name}>
{repo.name}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium mb-2">Diagram Type</label>
<select
value={diagramType}
onChange={(e) => setDiagramType(e.target.value)}
className="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2"
>
<option value="context">Context</option>
<option value="container">Container</option>
<option value="component">Component</option>
<option value="dynamic">Dynamic</option>
<option value="deployment">Deployment</option>
</select>
</div>
<div className="flex items-end">
<label className="flex items-center gap-2">
<input
type="checkbox"
checked={detailed}
onChange={(e) => setDetailed(e.target.checked)}
className="rounded"
/>
<span>Detailed (show all elements)</span>
</label>
</div>
</div>
</div>
{isLoading && <LoadingSpinner />}
{error && (
<div className="text-red-500 p-4">
Error loading diagram: {error instanceof Error ? error.message : 'Unknown error'}
</div>
)}
{diagramData && (diagramData as { mermaid?: string }).mermaid && (
<DiagramRenderer mermaidCode={(diagramData as { mermaid: string }).mermaid} />
)}
</div>
)
}
export { DiagramViewer }
