breakpilot-compliance/admin-compliance/app/sdk/vvt/_components/TabVerzeichnis.tsx

'use client'

import { useState, useCallback } from 'react'
import {
  ART9_CATEGORIES,
  BUSINESS_FUNCTION_LABELS,
  STATUS_LABELS,
  STATUS_COLORS,
} from '@/lib/sdk/vvt-types'
import type { VVTActivity } from '@/lib/sdk/vvt-types'
import {
  generateActivities,
  prefillFromScopeAnswers,
} from '@/lib/sdk/vvt-profiling'
import { apiListTemplates, type ProcessTemplate } from './api'

const PROTECTION_LEVEL_LABELS: Record<string, string> = { LOW: 'Niedrig', MEDIUM: 'Mittel', HIGH: 'Hoch', VERY_HIGH: 'Sehr hoch' }

export function TabVerzeichnis({
  activities, allActivities, activeCount, draftCount, thirdCountryCount, art9Count,
  filter, setFilter, searchQuery, setSearchQuery, sortBy, setSortBy,
  scopeAnswers, onEdit, onNew, onDelete, onAdoptGenerated, onNewFromTemplate,
}: {
  activities: VVTActivity[]
  allActivities: VVTActivity[]
  activeCount: number
  draftCount: number
  thirdCountryCount: number
  art9Count: number
  filter: string
  setFilter: (f: string) => void
  searchQuery: string
  setSearchQuery: (q: string) => void
  sortBy: string
  setSortBy: (s: 'name' | 'date' | 'status') => void
  scopeAnswers?: import('@/lib/sdk/compliance-scope-types').ScopeProfilingAnswer[]
  onEdit: (id: string) => void
  onNew: () => void
  onDelete: (id: string) => void
  onAdoptGenerated: (activities: VVTActivity[]) => void
  onNewFromTemplate: (templateId: string) => void
}) {
  const [scopePreview, setScopePreview] = useState<VVTActivity[] | null>(null)
  const [isGenerating, setIsGenerating] = useState(false)
  const [showTemplatePicker, setShowTemplatePicker] = useState(false)
  const [templates, setTemplates] = useState<ProcessTemplate[]>([])
  const [templateFilter, setTemplateFilter] = useState<string>('all')
  const [templatesLoading, setTemplatesLoading] = useState(false)

  const handleGenerateFromScope = useCallback(() => {
    if (!scopeAnswers) return
    setIsGenerating(true)
    try {
      const profilingAnswers = prefillFromScopeAnswers(scopeAnswers)
      const result = generateActivities(profilingAnswers)
      setScopePreview(result.generatedActivities)
    } finally {
      setIsGenerating(false)
    }
  }, [scopeAnswers])

  const handleAdoptPreview = useCallback(() => {
    if (!scopePreview) return
    onAdoptGenerated(scopePreview)
    setScopePreview(null)
  }, [scopePreview, onAdoptGenerated])

  // Preview mode for generated activities
  if (scopePreview) {
    return (
      <div className="space-y-4">
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-2">Generierte Verarbeitungen</h3>
          <p className="text-sm text-gray-500 mb-4">
            Basierend auf Ihrer Scope-Analyse wurden {scopePreview.length} Verarbeitungstaetigkeiten generiert.
            Sie koennen einzelne Eintraege abwaehlen, bevor Sie diese uebernehmen.
          </p>
          <div className="space-y-2">
            {scopePreview.map((a, i) => (
              <div key={a.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <input type="checkbox" defaultChecked className="w-4 h-4 text-purple-600 rounded"
                  onChange={(e) => {
                    if (!e.target.checked) {
                      setScopePreview(scopePreview.filter((_, j) => j !== i))
                    }
                  }} />
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-gray-400">{a.vvtId}</span>
                    <span className="text-sm font-medium text-gray-900">{a.name}</span>
                    <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">{BUSINESS_FUNCTION_LABELS[a.businessFunction]}</span>
                  </div>
                  <p className="text-xs text-gray-500 truncate">{a.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="flex items-center justify-between">
          <button onClick={() => setScopePreview(null)} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">
            Abbrechen
          </button>
          <button onClick={handleAdoptPreview} className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
            Alle {scopePreview.length} uebernehmen
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {/* Scope Generate Button */}
      {scopeAnswers && scopeAnswers.length > 0 && (
        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 flex items-center justify-between">
          <div>
            <h4 className="text-sm font-medium text-blue-900">Aus Scope-Analyse generieren</h4>
            <p className="text-xs text-blue-700 mt-0.5">
              Erstellen Sie automatisch Verarbeitungstaetigkeiten basierend auf Ihren Scope-Profiling-Antworten.
            </p>
          </div>
          <button
            onClick={handleGenerateFromScope}
            disabled={isGenerating}
            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm whitespace-nowrap disabled:opacity-50"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            {isGenerating ? 'Generiere...' : 'Generieren'}
          </button>
        </div>
      )}

      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        <StatCard label="Gesamt" value={allActivities.length} color="gray" />
        <StatCard label="Genehmigt" value={activeCount} color="green" />
        <StatCard label="Entwurf" value={draftCount} color="yellow" />
        <StatCard label="Drittland" value={thirdCountryCount} color="orange" />
        <StatCard label="Art. 9 Daten" value={art9Count} color="red" />
      </div>

      {/* Search + Filter + New */}
      <div className="flex flex-col md:flex-row items-start md:items-center gap-3">
        <div className="flex-1 relative w-full">
          <svg className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="VVT-ID, Name oder Beschreibung suchen..."
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          {[
            { key: 'all', label: 'Alle' },
            { key: 'DRAFT', label: 'Entwurf' },
            { key: 'REVIEW', label: 'Pruefung' },
            { key: 'APPROVED', label: 'Genehmigt' },
            { key: 'thirdcountry', label: 'Drittland' },
            { key: 'art9', label: 'Art. 9' },
          ].map(f => (
            <button
              key={f.key}
              onClick={() => setFilter(f.key)}
              className={`px-3 py-1 text-sm rounded-full transition-colors ${
                filter === f.key ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              {f.label}
            </button>
          ))}
        </div>
        <select
          value={sortBy}
          onChange={(e) => setSortBy(e.target.value as 'name' | 'date' | 'status')}
          className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
        >
          <option value="name">Name</option>
          <option value="date">Datum</option>
          <option value="status">Status</option>
        </select>
        <button
          onClick={async () => {
            setShowTemplatePicker(true)
            if (templates.length === 0) {
              setTemplatesLoading(true)
              try {
                const t = await apiListTemplates()
                setTemplates(t)
              } finally {
                setTemplatesLoading(false)
              }
            }
          }}
          className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-sm whitespace-nowrap"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414A1 1 0 0121 8.414V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
          </svg>
          Aus Vorlage
        </button>
        <button
          onClick={onNew}
          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm whitespace-nowrap"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Neue Verarbeitung
        </button>
      </div>

      {/* Activity Cards */}
      <div className="space-y-3">
        {activities.map(activity => (
          <ActivityCard key={activity.id} activity={activity} onEdit={onEdit} onDelete={onDelete} />
        ))}
      </div>

      {activities.length === 0 && (
        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
          <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">Keine Verarbeitungen gefunden</h3>
          <p className="mt-2 text-gray-500 max-w-md mx-auto">
            Erstellen Sie eine neue Verarbeitung manuell oder generieren Sie Eintraege automatisch aus Ihrer Scope-Analyse.
          </p>
        </div>
      )}

      {/* Template Picker Modal */}
      {showTemplatePicker && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
            <div className="p-6 border-b border-gray-200">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-gray-900">Vorlage auswaehlen</h3>
                <button onClick={() => setShowTemplatePicker(false)} className="text-gray-400 hover:text-gray-600">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
              <div className="flex gap-2 mt-4 flex-wrap">
                {['all', 'hr', 'it', 'marketing', 'finance', 'legal', 'operations'].map(f => (
                  <button key={f} onClick={() => setTemplateFilter(f)}
                    className={`px-3 py-1 text-xs rounded-full ${templateFilter === f ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}>
                    {f === 'all' ? 'Alle' : f.toUpperCase()}
                  </button>
                ))}
              </div>
            </div>
            <div className="flex-1 overflow-y-auto p-6">
              {templatesLoading ? (
                <div className="flex items-center justify-center py-12">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
                </div>
              ) : (
                <div className="space-y-2">
                  {templates
                    .filter(t => templateFilter === 'all' || t.business_function === templateFilter)
                    .map(t => (
                      <button key={t.id} onClick={() => { onNewFromTemplate(t.id); setShowTemplatePicker(false) }}
                        className="w-full text-left p-4 border border-gray-200 rounded-xl hover:border-indigo-300 hover:bg-indigo-50 transition-colors">
                        <div className="flex items-start justify-between gap-3">
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-1 flex-wrap">
                              <span className="text-sm font-medium text-gray-900">{t.name}</span>
                              <span className="px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded-full">{t.business_function.toUpperCase()}</span>
                              <span className={`px-2 py-0.5 text-xs rounded-full ${PROTECTION_LEVEL_LABELS[t.protection_level] ? 'bg-gray-100 text-gray-600' : 'bg-gray-100 text-gray-600'}`}>
                                {PROTECTION_LEVEL_LABELS[t.protection_level] || t.protection_level}
                              </span>
                              {t.dpia_required && (
                                <span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">DSFA</span>
                              )}
                            </div>
                            {t.description && <p className="text-xs text-gray-500 line-clamp-1">{t.description}</p>}
                            {t.tags.length > 0 && (
                              <div className="flex gap-1 mt-1 flex-wrap">
                                {t.tags.slice(0, 3).map(tag => (
                                  <span key={tag} className="px-1.5 py-0.5 text-xs bg-gray-100 text-gray-500 rounded">{tag}</span>
                                ))}
                              </div>
                            )}
                          </div>
                          {t.risk_score !== undefined && (
                            <span className={`text-xs font-medium px-2 py-1 rounded-lg whitespace-nowrap ${
                              t.risk_score >= 7 ? 'bg-red-100 text-red-700' : t.risk_score >= 4 ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'
                            }`}>Risiko {t.risk_score}</span>
                          )}
                        </div>
                      </button>
                    ))}
                  {templates.filter(t => templateFilter === 'all' || t.business_function === templateFilter).length === 0 && (
                    <p className="text-center text-gray-500 py-8 text-sm">Keine Vorlagen fuer diesen Bereich gefunden.</p>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
  const borderColors: Record<string, string> = {
    gray: 'border-gray-200', green: 'border-green-200', yellow: 'border-yellow-200', orange: 'border-orange-200', red: 'border-red-200',
  }
  const textColors: Record<string, string> = {
    gray: 'text-gray-600', green: 'text-green-600', yellow: 'text-yellow-600', orange: 'text-orange-600', red: 'text-red-600',
  }
  return (
    <div className={`bg-white rounded-xl border ${borderColors[color]} p-4`}>
      <div className={`text-sm ${textColors[color]}`}>{label}</div>
      <div className={`text-2xl font-bold ${textColors[color]}`}>{value}</div>
    </div>
  )
}

function ActivityCard({ activity, onEdit, onDelete }: { activity: VVTActivity; onEdit: (id: string) => void; onDelete: (id: string) => void }) {
  const hasArt9 = activity.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
  const hasThirdCountry = activity.thirdCountryTransfers.length > 0

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-200 transition-colors">
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1 flex-wrap">
            <span className="text-xs font-mono text-gray-400">{activity.vvtId}</span>
            <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[activity.status] || 'bg-gray-100 text-gray-600'}`}>
              {STATUS_LABELS[activity.status] || activity.status}
            </span>
            {hasArt9 && (
              <span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">Art. 9</span>
            )}
            {hasThirdCountry && (
              <span className="px-2 py-0.5 text-xs bg-orange-100 text-orange-700 rounded-full">Drittland</span>
            )}
            {activity.dpiaRequired && (
              <span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">DSFA</span>
            )}
            {(activity as any).sourceTemplateId && (
              <span className="px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded-full">Vorlage</span>
            )}
          </div>
          <h3 className="text-base font-semibold text-gray-900 truncate">{activity.name || '(Ohne Namen)'}</h3>
          {activity.description && (
            <p className="text-sm text-gray-500 mt-0.5 line-clamp-1">{activity.description}</p>
          )}
          <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
            <span>{BUSINESS_FUNCTION_LABELS[activity.businessFunction]}</span>
            <span>{activity.responsible || 'Kein Verantwortlicher'}</span>
            <span>Aktualisiert: {new Date(activity.updatedAt).toLocaleDateString('de-DE')}</span>
            {(activity as any).art30Completeness !== undefined && (
              <span className={`font-medium ${
                (activity as any).art30Completeness >= 80 ? 'text-green-600' :
                (activity as any).art30Completeness >= 50 ? 'text-yellow-600' : 'text-red-500'
              }`}>Art.30: {(activity as any).art30Completeness}%</span>
            )}
          </div>
        </div>
        <div className="flex items-center gap-1 ml-4">
          <button
            onClick={() => onEdit(activity.id)}
            className="px-3 py-1.5 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
          >
            Bearbeiten
          </button>
          <button
            onClick={() => { if (confirm('Verarbeitung loeschen?')) onDelete(activity.id) }}
            className="px-2 py-1.5 text-sm text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}