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

'use client'

import React, { useState, useEffect } from 'react'

interface PaymentControl {
  control_id: string
  domain: string
  title: string
  objective: string
  check_target: string
  evidence: string[]
  automation: string
}

interface PaymentDomain {
  id: string
  name: string
  description: string
}

interface Assessment {
  id: string
  project_name: string
  tender_reference: string
  customer_name: string
  system_type: string
  total_controls: number
  controls_passed: number
  controls_failed: number
  controls_partial: number
  controls_not_applicable: number
  controls_not_checked: number
  compliance_score: number
  status: string
  created_at: string
}

interface TenderAnalysis {
  id: string
  file_name: string
  file_size: number
  project_name: string
  customer_name: string
  status: string
  total_requirements: number
  matched_count: number
  unmatched_count: number
  partial_count: number
  requirements?: Array<{ req_id: string; text: string; obligation_level: string; technical_domain: string; confidence: number }>
  match_results?: Array<{ req_id: string; req_text: string; verdict: string; matched_controls: Array<{ control_id: string; title: string; relevance: number }>; gap_description?: string }>
  created_at: string
}

const AUTOMATION_STYLES: Record<string, { bg: string; text: string }> = {
  high: { bg: 'bg-green-100', text: 'text-green-700' },
  medium: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
  partial: { bg: 'bg-orange-100', text: 'text-orange-700' },
  low: { bg: 'bg-red-100', text: 'text-red-700' },
}

const TARGET_ICONS: Record<string, string> = {
  code: '💻', system: '🖥️', config: '⚙️', process: '📋',
  repository: '📦', certificate: '📜',
}

export default function PaymentCompliancePage() {
  const [controls, setControls] = useState<PaymentControl[]>([])
  const [domains, setDomains] = useState<PaymentDomain[]>([])
  const [assessments, setAssessments] = useState<Assessment[]>([])
  const [tenderAnalyses, setTenderAnalyses] = useState<TenderAnalysis[]>([])
  const [selectedTender, setSelectedTender] = useState<TenderAnalysis | null>(null)
  const [selectedDomain, setSelectedDomain] = useState<string>('all')
  const [loading, setLoading] = useState(true)
  const [tab, setTab] = useState<'controls' | 'assessments' | 'tender'>('controls')
  const [uploading, setUploading] = useState(false)
  const [processing, setProcessing] = useState(false)
  const [showNewAssessment, setShowNewAssessment] = useState(false)
  const [newProject, setNewProject] = useState({ project_name: '', tender_reference: '', customer_name: '', system_type: 'full_stack' })

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

  async function loadData() {
    try {
      setLoading(true)
      const [ctrlResp, assessResp, tenderResp] = await Promise.all([
        fetch('/api/sdk/v1/payment-compliance?endpoint=controls'),
        fetch('/api/sdk/v1/payment-compliance?endpoint=assessments'),
        fetch('/api/sdk/v1/payment-compliance/tender'),
      ])
      if (ctrlResp.ok) {
        const data = await ctrlResp.json()
        setControls(data.controls || [])
        setDomains(data.domains || [])
      }
      if (assessResp.ok) {
        const data = await assessResp.json()
        setAssessments(data.assessments || [])
      }
      if (tenderResp.ok) {
        const data = await tenderResp.json()
        setTenderAnalyses(data.analyses || [])
      }
    } catch {}
    finally { setLoading(false) }
  }

  async function handleTenderUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return
    setUploading(true)
    try {
      const formData = new FormData()
      formData.append('file', file)
      formData.append('project_name', file.name.replace(/\.[^.]+$/, ''))
      const resp = await fetch('/api/sdk/v1/payment-compliance/tender', { method: 'POST', body: formData })
      if (resp.ok) {
        const data = await resp.json()
        // Auto-start extraction + matching
        setProcessing(true)
        const extractResp = await fetch(`/api/sdk/v1/payment-compliance/tender/${data.id}?action=extract`, { method: 'POST' })
        if (extractResp.ok) {
          await fetch(`/api/sdk/v1/payment-compliance/tender/${data.id}?action=match`, { method: 'POST' })
        }
        // Reload and show result
        const detailResp = await fetch(`/api/sdk/v1/payment-compliance/tender/${data.id}`)
        if (detailResp.ok) {
          const detail = await detailResp.json()
          setSelectedTender(detail)
        }
        loadData()
      }
    } catch {} finally {
      setUploading(false)
      setProcessing(false)
    }
  }

  async function handleViewTender(id: string) {
    const resp = await fetch(`/api/sdk/v1/payment-compliance/tender/${id}`)
    if (resp.ok) {
      setSelectedTender(await resp.json())
    }
  }

  async function handleCreateAssessment() {
    const resp = await fetch('/api/sdk/v1/payment-compliance', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newProject),
    })
    if (resp.ok) {
      setShowNewAssessment(false)
      setNewProject({ project_name: '', tender_reference: '', customer_name: '', system_type: 'full_stack' })
      loadData()
    }
  }

  const filteredControls = selectedDomain === 'all'
    ? controls
    : controls.filter(c => c.domain === selectedDomain)

  const domainStats = domains.map(d => ({
    ...d,
    count: controls.filter(c => c.domain === d.id).length,
  }))

  return (
    <div className="max-w-6xl mx-auto p-6">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Payment Terminal Compliance</h1>
          <p className="text-sm text-gray-500 mt-1">
            Technische Pruefbibliothek fuer Zahlungssysteme — {controls.length} Controls in {domains.length} Domaenen
          </p>
        </div>
        <div className="flex gap-2">
          <button onClick={() => setTab('controls')}
            className={`px-4 py-2 rounded-lg text-sm font-medium ${tab === 'controls' ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700'}`}>
            Controls ({controls.length})
          </button>
          <button onClick={() => setTab('assessments')}
            className={`px-4 py-2 rounded-lg text-sm font-medium ${tab === 'assessments' ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700'}`}>
            Assessments ({assessments.length})
          </button>
          <button onClick={() => setTab('tender')}
            className={`px-4 py-2 rounded-lg text-sm font-medium ${tab === 'tender' ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700'}`}>
            Ausschreibung ({tenderAnalyses.length})
          </button>
        </div>
      </div>

      {loading ? (
        <div className="text-center py-12 text-gray-500">Lade...</div>
      ) : tab === 'controls' ? (
        <>
          {/* Domain Filter */}
          <div className="grid grid-cols-5 gap-3 mb-6">
            <button onClick={() => setSelectedDomain('all')}
              className={`p-3 rounded-xl border text-center ${selectedDomain === 'all' ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-purple-300'}`}>
              <div className="text-lg font-bold text-purple-700">{controls.length}</div>
              <div className="text-xs text-gray-500">Alle</div>
            </button>
            {domainStats.map(d => (
              <button key={d.id} onClick={() => setSelectedDomain(d.id)}
                className={`p-3 rounded-xl border text-center ${selectedDomain === d.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-purple-300'}`}>
                <div className="text-lg font-bold text-gray-900">{d.count}</div>
                <div className="text-xs text-gray-500 truncate">{d.id}</div>
              </button>
            ))}
          </div>

          {/* Domain Description */}
          {selectedDomain !== 'all' && (
            <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
              <strong>{domains.find(d => d.id === selectedDomain)?.name}:</strong>{' '}
              {domains.find(d => d.id === selectedDomain)?.description}
            </div>
          )}

          {/* Controls List */}
          <div className="space-y-3">
            {filteredControls.map(ctrl => {
              const autoStyle = AUTOMATION_STYLES[ctrl.automation] || AUTOMATION_STYLES.low
              return (
                <div key={ctrl.control_id} className="bg-white rounded-xl border border-gray-200 p-4 hover:border-purple-300 transition-all">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-xs font-mono text-purple-600 bg-purple-50 px-2 py-0.5 rounded">{ctrl.control_id}</span>
                        <span className="text-xs text-gray-400">{TARGET_ICONS[ctrl.check_target] || '🔍'} {ctrl.check_target}</span>
                        <span className={`text-xs px-2 py-0.5 rounded-full ${autoStyle.bg} ${autoStyle.text}`}>
                          {ctrl.automation}
                        </span>
                      </div>
                      <h3 className="text-sm font-semibold text-gray-900">{ctrl.title}</h3>
                      <p className="text-xs text-gray-500 mt-1">{ctrl.objective}</p>
                    </div>
                  </div>
                  <div className="flex gap-1 mt-2">
                    {ctrl.evidence.map(ev => (
                      <span key={ev} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{ev}</span>
                    ))}
                  </div>
                </div>
              )
            })}
          </div>
        </>
      ) : (
        <>
          {/* Assessments Tab */}
          <div className="mb-4">
            <button onClick={() => setShowNewAssessment(true)}
              className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
              + Neues Assessment
            </button>
          </div>

          {showNewAssessment && (
            <div className="mb-6 p-6 bg-white rounded-xl border border-purple-200">
              <h3 className="font-semibold text-gray-900 mb-4">Neues Payment Compliance Assessment</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Projektname *</label>
                  <input value={newProject.project_name} onChange={e => setNewProject(p => ({ ...p, project_name: e.target.value }))}
                    className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500" placeholder="z.B. Ausschreibung Muenchen 2026" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Ausschreibungs-Referenz</label>
                  <input value={newProject.tender_reference} onChange={e => setNewProject(p => ({ ...p, tender_reference: e.target.value }))}
                    className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500" placeholder="z.B. 2026-PAY-001" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Kunde</label>
                  <input value={newProject.customer_name} onChange={e => setNewProject(p => ({ ...p, customer_name: e.target.value }))}
                    className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500" placeholder="z.B. Stadt Muenchen" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Systemtyp</label>
                  <select value={newProject.system_type} onChange={e => setNewProject(p => ({ ...p, system_type: e.target.value }))}
                    className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500">
                    <option value="full_stack">Full Stack (Terminal + Backend)</option>
                    <option value="terminal">Nur Terminal</option>
                    <option value="backend">Nur Backend</option>
                  </select>
                </div>
              </div>
              <div className="flex gap-2 mt-4">
                <button onClick={handleCreateAssessment} disabled={!newProject.project_name}
                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">Erstellen</button>
                <button onClick={() => setShowNewAssessment(false)}
                  className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">Abbrechen</button>
              </div>
            </div>
          )}

          {assessments.length === 0 ? (
            <div className="text-center py-12 text-gray-400">
              <p className="text-lg mb-2">Noch keine Assessments</p>
              <p className="text-sm">Erstelle ein neues Assessment fuer eine Ausschreibung.</p>
            </div>
          ) : (
            <div className="space-y-4">
              {assessments.map(a => (
                <div key={a.id} className="bg-white rounded-xl border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-3">
                    <div>
                      <h3 className="text-lg font-semibold text-gray-900">{a.project_name}</h3>
                      <div className="text-sm text-gray-500">
                        {a.customer_name && <span>{a.customer_name} · </span>}
                        {a.tender_reference && <span>Ref: {a.tender_reference} · </span>}
                        <span>{new Date(a.created_at).toLocaleDateString('de-DE')}</span>
                      </div>
                    </div>
                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                      a.status === 'completed' ? 'bg-green-100 text-green-700' :
                      a.status === 'in_progress' ? 'bg-yellow-100 text-yellow-700' :
                      'bg-gray-100 text-gray-700'
                    }`}>{a.status}</span>
                  </div>
                  <div className="grid grid-cols-6 gap-2">
                    <div className="text-center p-2 bg-gray-50 rounded">
                      <div className="text-lg font-bold">{a.total_controls}</div>
                      <div className="text-xs text-gray-500">Total</div>
                    </div>
                    <div className="text-center p-2 bg-green-50 rounded">
                      <div className="text-lg font-bold text-green-700">{a.controls_passed}</div>
                      <div className="text-xs text-gray-500">Passed</div>
                    </div>
                    <div className="text-center p-2 bg-red-50 rounded">
                      <div className="text-lg font-bold text-red-700">{a.controls_failed}</div>
                      <div className="text-xs text-gray-500">Failed</div>
                    </div>
                    <div className="text-center p-2 bg-yellow-50 rounded">
                      <div className="text-lg font-bold text-yellow-700">{a.controls_partial}</div>
                      <div className="text-xs text-gray-500">Partial</div>
                    </div>
                    <div className="text-center p-2 bg-gray-50 rounded">
                      <div className="text-lg font-bold text-gray-400">{a.controls_not_applicable}</div>
                      <div className="text-xs text-gray-500">N/A</div>
                    </div>
                    <div className="text-center p-2 bg-gray-50 rounded">
                      <div className="text-lg font-bold text-gray-400">{a.controls_not_checked}</div>
                      <div className="text-xs text-gray-500">Offen</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      ) : tab === 'tender' ? (
        <>
          {/* Tender Analysis Tab */}
          <div className="mb-6 p-6 bg-white rounded-xl border-2 border-dashed border-purple-300 text-center">
            <h3 className="text-lg font-semibold text-gray-900 mb-2">Ausschreibung analysieren</h3>
            <p className="text-sm text-gray-500 mb-4">
              Laden Sie ein Ausschreibungsdokument hoch. Die KI extrahiert automatisch alle Anforderungen und matcht sie gegen die Control-Bibliothek.
            </p>
            <label className="inline-block px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 cursor-pointer">
              {uploading ? 'Hochladen...' : processing ? 'Analysiere...' : 'PDF / Dokument hochladen'}
              <input type="file" className="hidden" accept=".pdf,.txt,.doc,.docx" onChange={handleTenderUpload} disabled={uploading || processing} />
            </label>
            <p className="text-xs text-gray-400 mt-2">PDF, TXT oder Word. Max 50 MB. Dokument wird nur fuer diese Analyse verwendet.</p>
          </div>

          {/* Selected Tender Detail */}
          {selectedTender && (
            <div className="mb-6 p-6 bg-white rounded-xl border border-purple-200">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900">{selectedTender.project_name}</h3>
                  <p className="text-sm text-gray-500">{selectedTender.file_name} — {selectedTender.status}</p>
                </div>
                <button onClick={() => setSelectedTender(null)} className="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
              </div>

              {/* Stats */}
              <div className="grid grid-cols-4 gap-3 mb-6">
                <div className="text-center p-3 bg-gray-50 rounded-lg">
                  <div className="text-2xl font-bold">{selectedTender.total_requirements}</div>
                  <div className="text-xs text-gray-500">Anforderungen</div>
                </div>
                <div className="text-center p-3 bg-green-50 rounded-lg">
                  <div className="text-2xl font-bold text-green-700">{selectedTender.matched_count}</div>
                  <div className="text-xs text-gray-500">Abgedeckt</div>
                </div>
                <div className="text-center p-3 bg-yellow-50 rounded-lg">
                  <div className="text-2xl font-bold text-yellow-700">{selectedTender.partial_count}</div>
                  <div className="text-xs text-gray-500">Teilweise</div>
                </div>
                <div className="text-center p-3 bg-red-50 rounded-lg">
                  <div className="text-2xl font-bold text-red-700">{selectedTender.unmatched_count}</div>
                  <div className="text-xs text-gray-500">Luecken</div>
                </div>
              </div>

              {/* Match Results */}
              {selectedTender.match_results && selectedTender.match_results.length > 0 && (
                <div className="space-y-3">
                  <h4 className="font-semibold text-gray-900">Requirement → Control Matching</h4>
                  {selectedTender.match_results.map((mr, idx) => (
                    <div key={idx} className={`p-4 rounded-lg border ${
                      mr.verdict === 'matched' ? 'border-green-200 bg-green-50' :
                      mr.verdict === 'partial' ? 'border-yellow-200 bg-yellow-50' :
                      'border-red-200 bg-red-50'
                    }`}>
                      <div className="flex items-start justify-between mb-2">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="text-xs font-mono bg-white px-2 py-0.5 rounded border">{mr.req_id}</span>
                            <span className={`text-xs px-2 py-0.5 rounded-full ${
                              mr.verdict === 'matched' ? 'bg-green-200 text-green-800' :
                              mr.verdict === 'partial' ? 'bg-yellow-200 text-yellow-800' :
                              'bg-red-200 text-red-800'
                            }`}>
                              {mr.verdict === 'matched' ? 'Abgedeckt' : mr.verdict === 'partial' ? 'Teilweise' : 'Luecke'}
                            </span>
                          </div>
                          <p className="text-sm text-gray-900">{mr.req_text}</p>
                        </div>
                      </div>
                      {mr.matched_controls && mr.matched_controls.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-1">
                          {mr.matched_controls.map(mc => (
                            <span key={mc.control_id} className="text-xs bg-white border px-2 py-0.5 rounded">
                              {mc.control_id} ({Math.round(mc.relevance * 100)}%)
                            </span>
                          ))}
                        </div>
                      )}
                      {mr.gap_description && (
                        <p className="text-xs text-orange-700 mt-2">{mr.gap_description}</p>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Previous Analyses */}
          {tenderAnalyses.length > 0 && (
            <div>
              <h4 className="font-semibold text-gray-900 mb-3">Bisherige Analysen</h4>
              <div className="space-y-3">
                {tenderAnalyses.map(ta => (
                  <button key={ta.id} onClick={() => handleViewTender(ta.id)}
                    className="w-full text-left bg-white rounded-xl border border-gray-200 p-4 hover:border-purple-300 transition-all">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-medium text-gray-900">{ta.project_name}</h3>
                        <p className="text-xs text-gray-500">{ta.file_name} — {new Date(ta.created_at).toLocaleDateString('de-DE')}</p>
                      </div>
                      <div className="flex gap-2">
                        <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">{ta.matched_count} matched</span>
                        {ta.unmatched_count > 0 && (
                          <span className="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full">{ta.unmatched_count} gaps</span>
                        )}
                        <span className={`text-xs px-2 py-0.5 rounded-full ${
                          ta.status === 'matched' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700'
                        }`}>{ta.status}</span>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          )}
        </>
      ) : null}
    </div>
  )
}