import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { extractionApi, reposApi } from '../lib/api'
import LoadingSpinner from '../components/LoadingSpinner'
export default function Extraction() {
const queryClient = useQueryClient()
const [selectedRepo, setSelectedRepo] = useState('')
const [selectedRef, setSelectedRef] = useState('main')
const [force, setForce] = useState(false)
const { data: reposData } = useQuery({
queryKey: ['repos'],
queryFn: async () => {
const response = await reposApi.list()
return response.data
},
})
const extractMutation = useMutation({
mutationFn: async ({ repo, ref }: { repo: string; ref: string }) => {
const response = await extractionApi.extract(repo, ref, force)
return response.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['repos'] })
},
})
const extractAllMutation = useMutation({
mutationFn: async () => {
const response = await extractionApi.extractAll({ force })
return response.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['repos'] })
},
})
const repos = (reposData as { repos?: Array<{ name: string; ref: string }> })?.repos || []
const handleExtract = () => {
if (selectedRepo && selectedRef) {
extractMutation.mutate({ repo: selectedRepo, ref: selectedRef })
}
}
return (
<div>
<h1 className="text-3xl font-bold mb-6">Extraction Management</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div className="bg-gray-800 rounded-lg p-6">
<h2 className="text-xl font-semibold mb-4">Extract Single Repo</h2>
<div className="space-y-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="">Select repo</option>
{repos.map((r) => (
<option key={r.name} value={r.name}>
{r.name}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium mb-2">Ref (branch/tag)</label>
<input
type="text"
value={selectedRef}
onChange={(e) => setSelectedRef(e.target.value)}
placeholder="main"
className="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2"
/>
</div>
<div className="flex items-center gap-2">
<input
type="checkbox"
checked={force}
onChange={(e) => setForce(e.target.checked)}
className="rounded"
/>
<label>Force re-extraction</label>
</div>
<button
onClick={handleExtract}
disabled={!selectedRepo || extractMutation.isPending}
className="w-full px-4 py-2 bg-blue-600 rounded hover:bg-blue-700 disabled:opacity-50"
>
{extractMutation.isPending ? 'Extracting...' : 'Extract'}
</button>
</div>
</div>
<div className="bg-gray-800 rounded-lg p-6">
<h2 className="text-xl font-semibold mb-4">Extract All Repos</h2>
<div className="space-y-4">
<div className="flex items-center gap-2">
<input
type="checkbox"
checked={force}
onChange={(e) => setForce(e.target.checked)}
className="rounded"
/>
<label>Force re-extraction</label>
</div>
<button
onClick={() => extractAllMutation.mutate()}
disabled={extractAllMutation.isPending}
className="w-full px-4 py-2 bg-green-600 rounded hover:bg-green-700 disabled:opacity-50"
>
{extractAllMutation.isPending ? 'Extracting all...' : 'Extract All'}
</button>
</div>
</div>
</div>
{(extractMutation.isPending || extractAllMutation.isPending) && <LoadingSpinner />}
{extractMutation.data && (
<div className="bg-gray-800 rounded-lg p-6 mb-4">
<h3 className="text-lg font-semibold mb-2">Extraction Result</h3>
<pre className="bg-gray-900 p-4 rounded overflow-auto text-sm">
{JSON.stringify(extractMutation.data, null, 2)}
</pre>
</div>
)}
{extractAllMutation.data && (
<div className="bg-gray-800 rounded-lg p-6 mb-4">
<h3 className="text-lg font-semibold mb-2">Bulk Extraction Result</h3>
<pre className="bg-gray-900 p-4 rounded overflow-auto text-sm">
{JSON.stringify(extractAllMutation.data, null, 2)}
</pre>
</div>
)}
<div className="bg-gray-800 rounded-lg p-6">
<h2 className="text-xl font-semibold mb-4">Repositories Status</h2>
<div className="space-y-2">
{repos.map((repo) => (
<div
key={repo.name}
className="flex items-center justify-between p-3 bg-gray-700 rounded"
>
<div>
<span className="font-medium">{repo.name}</span>
<span className="text-gray-400 ml-2">({repo.ref})</span>
</div>
<span className="text-green-500 text-sm">Extracted</span>
</div>
))}
</div>
</div>
</div>
)
}
export { Extraction }
