import { useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { apiFetch } from '@core/lib/api'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import { Button } from '@core/components/ui/button'
import { Plus } from 'lucide-react'

export default function CILProjectsPage() {
  const navigate = useNavigate()
  const [projects, setProjects] = useState<any[]>([])
  const [loading, setLoading] = useState(false)
  const [creating, setCreating] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const load = async () => {
    setLoading(true)
    setError(null)
    try {
      const r = await apiFetch('/api/admin-data?entity=items&type_slug=cil_project&status=active&limit=200')
      const json = await r.json()
      if (json.error) throw new Error(json.error)
      setProjects(Array.isArray(json.data) ? json.data : [])
    } catch (err: any) {
      setError(err.message || 'Failed to load projects')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => { load() }, [])

  const handleNew = async () => {
    setCreating(true)
    try {
      const r = await apiFetch('/api/admin-data?entity=items', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          type_slug: 'cil_project',
          title: 'New CIL Project',
          status: 'active',
          data: {},
        })
      })
      const json = await r.json()
      if (json.error) throw new Error(json.error)
      navigate(`/workbench/cil/projects/${json.data?.id || json.data?.data?.id}`)
    } catch (err: any) {
      setError(err.message || 'Failed to create project')
    } finally {
      setCreating(false)
    }
  }

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold tracking-tight">CIL Projects</h1>
        <Button onClick={handleNew} disabled={creating}><Plus className="h-4 w-4 mr-1" /> New Project</Button>
      </div>
      <p className="text-muted-foreground text-sm">Configured code-intelligence projects for the Workbench.</p>
      {loading && <p className="text-muted-foreground text-sm">Loading projects...</p>}
      {error && <p className="text-destructive text-sm">{error}</p>}
      {projects.length === 0 && !loading && !error && (
        <Card>
          <CardHeader><CardTitle>No projects yet</CardTitle></CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">Click New Project to create the first CIL project.</p>
          </CardContent>
        </Card>
      )}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {projects.map((p: any) => (
          <Card key={p.id}>
            <CardHeader className="pb-2">
              <Link to={`/workbench/cil/projects/${p.id}`} className="hover:underline">
                <CardTitle className="text-base font-mono truncate">{p.title || p.id}</CardTitle>
              </Link>
            </CardHeader>
            <CardContent className="p-4 pt-0">
              <p className="text-sm text-muted-foreground truncate">{p.description || 'No description'}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}