import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { apiFetch } from '@core/lib/api'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'

export default function CILProjectDetailPage() {
  const { id } = useParams<{ id: string }>()
  const [project, setProject] = useState<any>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (!id) return
    setLoading(true)
    apiFetch(`/api/admin-data?entity=items&id=${encodeURIComponent(id)}`)
      .then(r => r.json())
      .then(json => {
        if (json.error) throw new Error(json.error)
        setProject(json.data || null)
      })
      .catch(err => {
        setError(err.message || 'Failed to load project')
      })
      .finally(() => setLoading(false))
  }, [id])

  if (!id) return <p className="p-6 text-destructive text-sm">Project id is required.</p>
  if (loading) return <p className="p-6 text-muted-foreground text-sm">Loading project...</p>
  if (error) return <p className="p-6 text-destructive text-sm">{error}</p>
  if (!project) return <p className="p-6 text-muted-foreground text-sm">Project not found.</p>

  return (
    <div className="p-6 space-y-4">
      <h1 className="text-2xl font-bold tracking-tight">{project.title || 'CIL Project'}</h1>
      <p className="text-muted-foreground text-sm font-mono">{project.id}</p>
      <Card>
        <CardHeader><CardTitle>Configuration</CardTitle></CardHeader>
        <CardContent className="p-4">
          <pre className="text-xs bg-muted p-2 rounded overflow-auto">{JSON.stringify(project.data || {}, null, 2)}</pre>
        </CardContent>
      </Card>
      <p className="text-muted-foreground text-sm">
        Advanced CIL operations (search, graph, ingest, health, proposals, agent) are available through the <code>spine_cil_*</code> MCP tools on the <code>spine-framework</code> MCP server.
      </p>
    </div>
  )
}