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

'use client'

import React, { useState } from 'react'
import { ScanResult } from './_components/ScanResult'
import { DocCheckTab } from './_components/DocCheckTab'
import { BannerCheckTab } from './_components/BannerCheckTab'
import { ImpressumCheckTab } from './_components/ImpressumCheckTab'
import { ComplianceFAQ } from './_components/ComplianceFAQ'

type AnalysisTab = 'scan' | 'doc-check' | 'banner-check' | 'impressum-check'

const TABS: { id: AnalysisTab; label: string; desc: string }[] = [
  { id: 'scan', label: 'Website-Scan', desc: 'Rechtliche Dokumente finden + Dienstleister erkennen' },
  { id: 'doc-check', label: 'Dokumenten-Pruefung', desc: 'DSI, AGB, Cookie-Richtlinie inhaltlich pruefen' },
  { id: 'banner-check', label: 'Banner-Check', desc: 'Cookie-Banner auf DSGVO-Konformitaet testen' },
  { id: 'impressum-check', label: 'Impressum-Check', desc: 'Impressum auf §5 TMG Pflichtangaben pruefen' },
]

export default function AgentPage() {
  const [url, setUrl] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('agent-scan-url') || '' : '')
  const [tab, setTab] = useState<AnalysisTab>(() => (typeof window !== 'undefined' ? localStorage.getItem('agent-scan-tab') as AnalysisTab : null) || 'scan')
  const [scanLoading, setScanLoading] = useState(false)
  const [scanError, setScanError] = useState<string | null>(null)
  const [scanData, setScanData] = useState<any>(() => {
    if (typeof window === 'undefined') return null
    try { const s = localStorage.getItem('agent-scan-result'); return s ? JSON.parse(s) : null } catch { return null }
  })
  const [scanProgress, setScanProgress] = useState<string>('')
  const [activeScanId, setActiveScanId] = useState<string>(() => typeof window !== 'undefined' ? localStorage.getItem('agent-scan-id') || '' : '')
  const [scanHistory, setScanHistory] = useState<{ url: string; date: string; findings: number; docs: number; resultKey: string }[]>(() => {
    if (typeof window === 'undefined') return []
    try { return JSON.parse(localStorage.getItem('agent-scan-history') || '[]') } catch { return [] }
  })

  React.useEffect(() => { localStorage.setItem('agent-scan-url', url) }, [url])
  React.useEffect(() => { localStorage.setItem('agent-scan-tab', tab) }, [tab])

  // Resume polling if scan was in progress
  React.useEffect(() => {
    if (!activeScanId || scanData?.services) return
    let cancelled = false
    setScanLoading(true)
    setScanProgress('Scan laeuft noch...')
    const poll = async () => {
      while (!cancelled) {
        await new Promise(r => setTimeout(r, 5000))
        try {
          const res = await fetch(`/api/sdk/v1/agent/scan?scan_id=${activeScanId}`)
          if (!res.ok) continue
          const data = await res.json()
          if (data.progress) setScanProgress(data.progress)
          if (data.status === 'completed' && data.result) {
            setScanData(data.result)
            setScanProgress('')
            setScanLoading(false)
            localStorage.setItem('agent-scan-result', JSON.stringify(data.result))
            localStorage.removeItem('agent-scan-id')
            setActiveScanId('')
            _addToHistory(data.result)
            return
          }
          if (data.status === 'failed' || data.status === 'not_found') {
            if (data.status === 'failed') setScanError(data.error || 'Scan fehlgeschlagen')
            setScanProgress('')
            setScanLoading(false)
            localStorage.removeItem('agent-scan-id')
            setActiveScanId('')
            return
          }
        } catch { /* retry */ }
      }
    }
    poll()
    return () => { cancelled = true }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  const _addToHistory = (result: any) => {
    const resultKey = `scan-result-${Date.now()}`
    try { localStorage.setItem(resultKey, JSON.stringify(result)) } catch {}
    const entry = {
      url: url || result.url || '',
      date: new Date().toISOString(),
      findings: result.findings?.length || 0,
      docs: result.discovered_documents?.length || 0,
      resultKey,
    }
    const updated = [entry, ...scanHistory].slice(0, 30)
    setScanHistory(updated)
    localStorage.setItem('agent-scan-history', JSON.stringify(updated))
  }

  const handleScan = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!url.trim()) return
    setScanLoading(true)
    setScanError(null)
    setScanData(null)
    setScanProgress('Scan wird gestartet...')
    try {
      const startRes = await fetch('/api/sdk/v1/agent/scan', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url: url.trim(), mode: 'post_launch' }),
      })
      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')
      setActiveScanId(scan_id)
      localStorage.setItem('agent-scan-id', scan_id)

      let attempts = 0
      while (attempts < 120) {
        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 pollData = await pollRes.json()
        if (pollData.progress) setScanProgress(pollData.progress)
        if (pollData.status === 'completed' && pollData.result) {
          setScanData(pollData.result)
          setScanProgress('')
          localStorage.setItem('agent-scan-result', JSON.stringify(pollData.result))
          localStorage.removeItem('agent-scan-id')
          setActiveScanId('')
          _addToHistory(pollData.result)
          break
        }
        if (pollData.status === 'failed') throw new Error(pollData.error || 'Scan fehlgeschlagen')
        attempts++
      }
      if (attempts >= 120) throw new Error('Scan-Timeout (10 Minuten)')
    } catch (e) {
      setScanError(e instanceof Error ? e.message : 'Unbekannter Fehler')
      setScanProgress('')
    } finally {
      setScanLoading(false)
    }
  }

  // Navigate to a specialized tab with a pre-filled URL
  const navigateToCheck = (targetTab: AnalysisTab, checkUrl: string) => {
    // Store the URL in the target tab's localStorage key
    const keyMap: Record<string, string> = {
      'doc-check': 'doc-check-prefill-url',
      'banner-check': 'banner-check-url',
      'impressum-check': 'impressum-check-url',
    }
    if (keyMap[targetTab]) {
      localStorage.setItem(keyMap[targetTab], checkUrl)
    }
    setTab(targetTab)
  }

  // Extract discovered documents for quick-action buttons
  const discoveredDocs = scanData?.discovered_documents || []
  const scannedUrl = scanData?.url || url

  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 Webseiten und Dokumente auf DSGVO-Konformitaet.</p>
      </div>

      {/* Tab Selection */}
      <div className="flex border-b border-gray-200 overflow-x-auto">
        {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 whitespace-nowrap ${
              tab === t.id
                ? 'border-purple-500 text-purple-700'
                : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
            {t.label}
          </button>
        ))}
      </div>

      {/* Website-Scan Tab */}
      {tab === 'scan' && (
        <div className="space-y-4">
          <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
            <h3 className="text-sm font-semibold text-indigo-900">Website-Scan (Discovery)</h3>
            <p className="text-xs text-indigo-700 mt-1">
              Findet alle rechtlichen Dokumente (DSI, AGB, Impressum, Cookie, Widerruf),
              erkennt eingesetzte Drittdienste und prueft ob sie in der DSE dokumentiert sind.
            </p>
          </div>

          <form onSubmit={handleScan} className="flex gap-3">
            <input type="url" value={url} onChange={e => setUrl(e.target.value)}
              placeholder="https://www.example.com/"
              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={scanLoading} required />
            <button type="submit" disabled={scanLoading || !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 whitespace-nowrap">
              {scanLoading ? (
                <><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>Scanne...</>
              ) : 'Website scannen'}
            </button>
          </form>

          {scanProgress && (
            <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-sm text-purple-700 flex items-center gap-3">
              <svg className="animate-spin w-5 h-5 text-purple-500 shrink-0" 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>
              {scanProgress}
            </div>
          )}

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

          {/* Quick Action Buttons — navigate to specialized tabs */}
          {scanData && (
            <div className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
              <h4 className="text-sm font-semibold text-gray-800 mb-3">Jetzt pruefen</h4>
              <div className="grid grid-cols-2 gap-2">
                <button onClick={() => navigateToCheck('banner-check', scannedUrl)}
                  className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
                  <div className="text-sm font-medium text-gray-900">Cookie-Banner pruefen</div>
                  <div className="text-xs text-gray-500 mt-0.5">3-Phasen Dark-Pattern-Analyse</div>
                </button>
                <button onClick={() => navigateToCheck('impressum-check', scannedUrl + '/impressum')}
                  className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
                  <div className="text-sm font-medium text-gray-900">Impressum pruefen</div>
                  <div className="text-xs text-gray-500 mt-0.5">§5 TMG Pflichtangaben</div>
                </button>
                {discoveredDocs.map((doc: any, i: number) => (
                  <button key={i} onClick={() => navigateToCheck('doc-check', doc.url)}
                    className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
                    <div className="text-sm font-medium text-gray-900 truncate">{doc.title || doc.url}</div>
                    <div className="text-xs text-gray-500 mt-0.5">
                      {doc.doc_type?.toUpperCase()} · {doc.word_count || '?'} Woerter
                      {doc.completeness_pct != null && ` · ${doc.completeness_pct}%`}
                    </div>
                  </button>
                ))}
              </div>
            </div>
          )}

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

          {/* Scan History */}
          {scanHistory.length > 0 && (
            <div className="border border-gray-200 rounded-xl p-4">
              <h4 className="text-sm font-medium text-gray-700 mb-3">Letzte Scans</h4>
              <div className="space-y-2">
                {scanHistory.map((h, i) => (
                  <button key={i} onClick={() => {
                    setUrl(h.url)
                    if (h.resultKey) {
                      try { const s = localStorage.getItem(h.resultKey); if (s) { setScanData(JSON.parse(s)); return } } catch {}
                    }
                    try { const l = localStorage.getItem('agent-scan-result'); if (l) setScanData(JSON.parse(l)) } catch {}
                  }}
                    className="w-full flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:border-purple-200 hover:bg-purple-50/30 transition-all text-left">
                    <div className="min-w-0 flex-1">
                      <div className="text-sm font-medium text-gray-900 truncate">{h.url}</div>
                      <div className="text-xs text-gray-500">
                        {new Date(h.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
                      </div>
                    </div>
                    <div className="flex items-center gap-3 shrink-0 ml-3">
                      {h.docs > 0 && <span className="text-xs text-purple-600">{h.docs} Dok.</span>}
                      <span className={`text-xs font-medium ${h.findings > 0 ? 'text-red-600' : 'text-green-600'}`}>
                        {h.findings} Findings
                      </span>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Specialized Tabs */}
      {tab === 'doc-check' && <DocCheckTab />}
      {tab === 'banner-check' && <BannerCheckTab />}
      {tab === 'impressum-check' && <ImpressumCheckTab />}

      {/* FAQ */}
      <ComplianceFAQ />
    </div>
  )
}