breakpilot-compliance/admin-compliance/app/sdk/document-generator/components/DataPointsPreview.tsx

'use client'

import { useMemo, useState } from 'react'
import {
  DataPoint,
  DataPointCategory,
  CATEGORY_METADATA,
  RISK_LEVEL_STYLING,
  RiskLevel,
} from '@/lib/sdk/einwilligungen/types'

interface DataPointsPreviewProps {
  dataPoints: DataPoint[]
  onInsertPlaceholder: (placeholder: string) => void
  language?: 'de' | 'en'
}

/**
 * Platzhalter-Definitionen mit Beschreibungen
 */
const PLACEHOLDERS = [
  {
    placeholder: '[DATENPUNKTE_TABLE]',
    label: { de: 'Tabelle', en: 'Table' },
    description: { de: 'Markdown-Tabelle mit allen Datenpunkten', en: 'Markdown table with all data points' },
  },
  {
    placeholder: '[DATENPUNKTE_LIST]',
    label: { de: 'Liste', en: 'List' },
    description: { de: 'Kommaseparierte Liste der Namen', en: 'Comma-separated list of names' },
  },
  {
    placeholder: '[VERARBEITUNGSZWECKE]',
    label: { de: 'Zwecke', en: 'Purposes' },
    description: { de: 'Alle Verarbeitungszwecke', en: 'All processing purposes' },
  },
  {
    placeholder: '[RECHTSGRUNDLAGEN]',
    label: { de: 'Rechtsgrundlagen', en: 'Legal Bases' },
    description: { de: 'DSGVO-Artikel', en: 'GDPR articles' },
  },
  {
    placeholder: '[SPEICHERFRISTEN]',
    label: { de: 'Speicherfristen', en: 'Retention' },
    description: { de: 'Fristen nach Kategorie', en: 'Periods by category' },
  },
  {
    placeholder: '[EMPFAENGER]',
    label: { de: 'Empfänger', en: 'Recipients' },
    description: { de: 'Liste aller Drittparteien', en: 'List of third parties' },
  },
  {
    placeholder: '[BESONDERE_KATEGORIEN]',
    label: { de: 'Art. 9', en: 'Art. 9' },
    description: { de: 'Abschnitt für sensible Daten', en: 'Section for sensitive data' },
  },
  {
    placeholder: '[DRITTLAND_TRANSFERS]',
    label: { de: 'Drittländer', en: 'Third Countries' },
    description: { de: 'Datenübermittlung außerhalb EU', en: 'Data transfers outside EU' },
  },
]

/**
 * Risiko-Badge Farben
 */
function getRiskBadgeColor(riskLevel: RiskLevel): string {
  switch (riskLevel) {
    case 'HIGH':
      return 'bg-red-100 text-red-700 border-red-200'
    case 'MEDIUM':
      return 'bg-yellow-100 text-yellow-700 border-yellow-200'
    case 'LOW':
    default:
      return 'bg-green-100 text-green-700 border-green-200'
  }
}

/**
 * DataPointsPreview Komponente
 */
export function DataPointsPreview({
  dataPoints,
  onInsertPlaceholder,
  language = 'de',
}: DataPointsPreviewProps) {
  const [expandedCategories, setExpandedCategories] = useState<string[]>([])

  // Gruppiere Datenpunkte nach Kategorie
  const byCategory = useMemo(() => {
    return dataPoints.reduce((acc, dp) => {
      if (!acc[dp.category]) {
        acc[dp.category] = []
      }
      acc[dp.category].push(dp)
      return acc
    }, {} as Record<DataPointCategory, DataPoint[]>)
  }, [dataPoints])

  // Statistiken berechnen
  const stats = useMemo(() => {
    const riskCounts: Record<RiskLevel, number> = { LOW: 0, MEDIUM: 0, HIGH: 0 }
    let specialCategoryCount = 0

    dataPoints.forEach(dp => {
      riskCounts[dp.riskLevel]++
      if (dp.isSpecialCategory) specialCategoryCount++
    })

    return {
      riskCounts,
      specialCategoryCount,
      categoryCount: Object.keys(byCategory).length,
    }
  }, [dataPoints, byCategory])

  // Sortierte Kategorien (nach Code)
  const sortedCategories = useMemo(() => {
    return Object.entries(byCategory).sort((a, b) => {
      const codeA = CATEGORY_METADATA[a[0] as DataPointCategory]?.code || 'Z'
      const codeB = CATEGORY_METADATA[b[0] as DataPointCategory]?.code || 'Z'
      return codeA.localeCompare(codeB)
    })
  }, [byCategory])

  const toggleCategory = (category: string) => {
    setExpandedCategories(prev =>
      prev.includes(category)
        ? prev.filter(c => c !== category)
        : [...prev, category]
    )
  }

  if (dataPoints.length === 0) {
    return (
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h4 className="font-semibold text-gray-900 flex items-center gap-2 mb-3">
          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
          </svg>
          {language === 'de' ? 'Einwilligungen' : 'Consents'}
        </h4>
        <p className="text-sm text-gray-500">
          {language === 'de'
            ? 'Keine Datenpunkte ausgewählt. Wählen Sie Datenpunkte im Einwilligungs-Schritt aus.'
            : 'No data points selected. Select data points in the consent step.'}
        </p>
      </div>
    )
  }

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6 h-full flex flex-col">
      {/* Header */}
      <div className="mb-4">
        <h4 className="font-semibold text-gray-900 flex items-center gap-2">
          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
          </svg>
          {language === 'de' ? 'Einwilligungen' : 'Consents'}
        </h4>
        <p className="text-sm text-gray-500 mt-1">
          {dataPoints.length} {language === 'de' ? 'Datenpunkte aus' : 'data points from'}{' '}
          {stats.categoryCount} {language === 'de' ? 'Kategorien' : 'categories'}
        </p>
      </div>

      {/* Statistik-Badges */}
      <div className="flex flex-wrap gap-2 mb-4">
        {stats.riskCounts.HIGH > 0 && (
          <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">
            {stats.riskCounts.HIGH} {language === 'de' ? 'Hoch' : 'High'}
          </span>
        )}
        {stats.riskCounts.MEDIUM > 0 && (
          <span className="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-700">
            {stats.riskCounts.MEDIUM} {language === 'de' ? 'Mittel' : 'Medium'}
          </span>
        )}
        {stats.riskCounts.LOW > 0 && (
          <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
            {stats.riskCounts.LOW} {language === 'de' ? 'Niedrig' : 'Low'}
          </span>
        )}
        {stats.specialCategoryCount > 0 && (
          <span className="px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-700 flex items-center gap-1">
            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            {stats.specialCategoryCount} Art. 9
          </span>
        )}
      </div>

      <div className="border-t border-gray-200 my-3"></div>

      {/* Datenpunkte nach Kategorie */}
      <div className="flex-1 overflow-y-auto space-y-2 max-h-64">
        {sortedCategories.map(([category, points]) => {
          const metadata = CATEGORY_METADATA[category as DataPointCategory]
          if (!metadata) return null
          const isExpanded = expandedCategories.includes(category)

          return (
            <div key={category} className="border border-gray-100 rounded-lg">
              <button
                onClick={() => toggleCategory(category)}
                className="w-full flex items-center justify-between p-2 text-sm hover:bg-gray-50 rounded-lg"
              >
                <div className="flex items-center gap-2">
                  <span className="font-mono text-xs text-gray-400">{metadata.code}</span>
                  <span className="font-medium text-gray-900">
                    {language === 'de' ? metadata.name.de : metadata.name.en}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="px-1.5 py-0.5 text-xs rounded bg-gray-100 text-gray-600">
                    {points.length}
                  </span>
                  <svg
                    className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </div>
              </button>

              {isExpanded && (
                <ul className="px-2 pb-2 space-y-1">
                  {points.map(dp => (
                    <li
                      key={dp.id}
                      className="flex items-center justify-between text-sm py-1 pl-6"
                    >
                      <span className="truncate max-w-[160px] text-gray-700">
                        {language === 'de' ? dp.name.de : dp.name.en}
                      </span>
                      <div className="flex items-center gap-1">
                        {dp.isSpecialCategory && (
                          <svg className="w-3 h-3 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                          </svg>
                        )}
                        <span className={`px-1.5 py-0.5 text-[10px] rounded border ${getRiskBadgeColor(dp.riskLevel)}`}>
                          {RISK_LEVEL_STYLING[dp.riskLevel].label[language]}
                        </span>
                      </div>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          )
        })}
      </div>

      <div className="border-t border-gray-200 my-3"></div>

      {/* Schnell-Einfügen Buttons */}
      <div>
        <p className="text-xs font-medium text-gray-500 mb-2">
          {language === 'de' ? 'Platzhalter einfügen:' : 'Insert placeholder:'}
        </p>
        <div className="flex flex-wrap gap-1.5">
          {PLACEHOLDERS.slice(0, 4).map(({ placeholder, label }) => (
            <button
              key={placeholder}
              onClick={() => onInsertPlaceholder(placeholder)}
              className="px-2 py-1 text-xs bg-purple-50 text-purple-700 rounded hover:bg-purple-100 transition-colors"
              title={placeholder}
            >
              {language === 'de' ? label.de : label.en}
            </button>
          ))}
        </div>
        <div className="flex flex-wrap gap-1.5 mt-1.5">
          {PLACEHOLDERS.slice(4).map(({ placeholder, label }) => (
            <button
              key={placeholder}
              onClick={() => onInsertPlaceholder(placeholder)}
              className="px-2 py-1 text-xs bg-purple-50 text-purple-700 rounded hover:bg-purple-100 transition-colors"
              title={placeholder}
            >
              {language === 'de' ? label.de : label.en}
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

export default DataPointsPreview