breakpilot-compliance/admin-compliance/app/sdk/agent/page.tsx

'use client'

import React, { useState } from 'react'
import { useAgentAnalysis } from './_hooks/useAgentAnalysis'
import { AnalysisResult } from './_components/AnalysisResult'
import { AnalysisHistory } from './_components/AnalysisHistory'
import { FollowUpQuestions } from './_components/FollowUpQuestions'
import { ScanResult } from './_components/ScanResult'

type AnalysisMode = 'pre_launch' | 'post_launch'
type AnalysisTab = 'quick' | 'scan'

const MODES: { id: AnalysisMode; label: string; desc: string; icon: string }[] = [
  { id: 'pre_launch', label: 'Internes Dokument', desc: 'Vor Veroeffentlichung pruefen', icon: '📋' },
  { id: 'post_launch', label: 'Live-Website', desc: 'Bereits online analysieren', icon: '🌐' },
]

const TABS: { id: AnalysisTab; label: string; desc: string }[] = [
  { id: 'quick', label: 'Schnellanalyse', desc: 'Einzelne Seite klassifizieren + bewerten' },
  { id: 'scan', label: 'Website-Scan', desc: 'Mehrere Seiten scannen + Dienstleister abgleichen' },
]

export default function AgentPage() {
  const [url, setUrl] = useState('')
  const [mode, setMode] = useState<AnalysisMode>('post_launch')
  const [tab, setTab] = useState<AnalysisTab>('quick')
  const [scanLoading, setScanLoading] = useState(false)
  const [scanError, setScanError] = useState<string | null>(null)
  const [scanData, setScanData] = useState<any>(null)
  const { analyze, answerFollowUp, loading, error, result, history } = useAgentAnalysis()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!url.trim()) return

    if (tab === 'quick') {
      analyze(url.trim(), mode)
    } else {
      setScanLoading(true)
      setScanError(null)
      setScanData(null)
      try {
        // Step 1: Start async scan
        const startRes = await fetch('/api/sdk/v1/agent/scan', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ url: url.trim(), mode }),
        })
        if (!startRes.ok) throw new Error(`Scan konnte nicht gestartet werden: ${startRes.status}`)
        const { scan_id } = await startRes.json()
        if (!scan_id) throw new Error('Keine Scan-ID erhalten')

        // Step 2: Poll for results
        let attempts = 0
        const maxAttempts = 120 // 10 min at 5s intervals
        while (attempts < maxAttempts) {
          await new Promise(r => setTimeout(r, 5000))
          const pollRes = await fetch(`/api/sdk/v1/agent/scan?scan_id=${scan_id}`)
          if (!pollRes.ok) { attempts++; continue }
          const status = await pollRes.json()

          // Update progress message
          if (status.progress) {
            setScanError(null)
            // Show progress as temporary "error" (will be cleared when done)
            setScanData({ _progress: status.progress } as any)
          }

          if (status.status === 'completed' && status.result) {
            setScanData(status.result)
            break
          }
          if (status.status === 'failed') {
            throw new Error(status.error || 'Scan fehlgeschlagen')
          }
          attempts++
        }
        if (attempts >= maxAttempts) throw new Error('Scan-Timeout (10 Minuten)')
      } catch (e) {
        setScanError(e instanceof Error ? e.message : 'Unbekannter Fehler')
      } finally {
        setScanLoading(false)
      }
    }
  }

  const isLoading = tab === 'quick' ? loading : scanLoading
  const currentError = tab === 'quick' ? error : scanError

  return (
    <div className="space-y-6 max-w-4xl">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Compliance Agent</h1>
        <p className="text-gray-500 mt-1">Analysiere Dokumente und Webseiten auf DSGVO-Konformitaet.</p>
      </div>

      {/* Mode Selection */}
      <div className="grid grid-cols-2 gap-3">
        {MODES.map(m => (
          <button key={m.id} onClick={() => setMode(m.id)}
            className={`p-3 rounded-xl border-2 text-left transition-all ${
              mode === m.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-gray-300'}`}>
            <div className="flex items-center gap-3">
              <span className="text-xl">{m.icon}</span>
              <div>
                <p className={`text-sm font-semibold ${mode === m.id ? 'text-purple-900' : 'text-gray-900'}`}>{m.label}</p>
                <p className="text-xs text-gray-500">{m.desc}</p>
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* Tab Selection */}
      <div className="flex border-b border-gray-200">
        {TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
              tab === t.id
                ? 'border-purple-500 text-purple-700'
                : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
            {t.label}
          </button>
        ))}
      </div>

      {/* URL Input */}
      <form onSubmit={handleSubmit} className="flex gap-3">
        <input type="url" value={url} onChange={e => setUrl(e.target.value)}
          placeholder={tab === 'scan' ? 'https://www.example.com/' : 'https://example.com/datenschutz'}
          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
          disabled={isLoading} required />
        <button type="submit" disabled={isLoading || !url.trim()}
          className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors flex items-center gap-2 text-sm font-medium">
          {isLoading ? (
            <><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>{tab === 'scan' ? 'Scanne...' : 'Analysiere...'}</>
          ) : tab === 'scan' ? 'Website scannen' : 'Analysieren'}
        </button>
      </form>

      {/* Error */}
      {currentError && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">{currentError}</div>
      )}

      {/* Quick Analysis Result */}
      {tab === 'quick' && result && (
        <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm space-y-6">
          <AnalysisResult result={result} />
          {result.follow_up_questions.length > 0 && (
            <div className="border-t pt-4">
              <FollowUpQuestions questions={result.follow_up_questions} answers={result.follow_up_answers} onAnswer={answerFollowUp} />
            </div>
          )}
        </div>
      )}

      {/* Scan Result */}
      {tab === 'scan' && scanData && (
        <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
          <ScanResult data={scanData} />
        </div>
      )}

      {/* History (quick only) */}
      {tab === 'quick' && (
        <AnalysisHistory history={history} onSelect={r => { setUrl(r.url); analyze(r.url, mode) }} />
      )}
    </div>
  )
}