'use client'

import { useEffect, useState } from 'react'

interface RepoOpt { repo_id: string; count: number }

// Pull-flow control: pick a scanner repo → useCRA assesses its real findings.
// Empty selection keeps the demo/linked assessment.
export function ScannerRepoPicker({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  const [repos, setRepos] = useState<RepoOpt[]>([])
  const [loaded, setLoaded] = useState(false)

  useEffect(() => {
    let cancelled = false
    fetch('/api/v1/cra/scanner-repos')
      .then((r) => (r.ok ? r.json() : { repos: [] }))
      .then((j) => { if (!cancelled) { setRepos(j.repos || []); setLoaded(true) } })
      .catch(() => { if (!cancelled) setLoaded(true) })
    return () => { cancelled = true }
  }, [])

  if (loaded && repos.length === 0) {
    return (
      <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 text-sm text-gray-500">
        Kein Repo-Scanner verbunden — es wird das Demo-Szenario gezeigt.
      </div>
    )
  }

  return (
    <div className="rounded-lg border border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/20 px-4 py-3 flex flex-wrap items-center gap-3">
      <span className="text-sm font-medium text-gray-700 dark:text-gray-200">Repo-Scanner:</span>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1.5"
      >
        <option value="">Demo-Szenario (kein echtes Repo)</option>
        {repos.map((r) => (
          <option key={r.repo_id} value={r.repo_id}>{r.repo_id} ({r.count} Befunde)</option>
        ))}
      </select>
      {value && <span className="text-sm text-purple-700 dark:text-purple-300">Echte Scanner-Befunde werden bewertet.</span>}
    </div>
  )
}
