'use client'

import { ReportType, ExportFormat } from '@/lib/sdk/vendor-compliance'

const REPORT_TYPE_META: Record<
  ReportType,
  { title: string; description: string; icon: string; formats: ExportFormat[]; defaultFormat: ExportFormat }
> = {
  VVT_EXPORT: {
    title: 'Verarbeitungsverzeichnis (VVT)',
    description: 'Vollständiges Verarbeitungsverzeichnis gemäß Art. 30 DSGVO mit allen Pflichtangaben',
    icon: '📋',
    formats: ['PDF', 'DOCX', 'XLSX'],
    defaultFormat: 'DOCX',
  },
  ROPA: {
    title: 'Records of Processing Activities (RoPA)',
    description: 'Processor-Perspektive: Alle Verarbeitungen als Auftragsverarbeiter',
    icon: '📝',
    formats: ['PDF', 'DOCX', 'XLSX'],
    defaultFormat: 'DOCX',
  },
  VENDOR_AUDIT: {
    title: 'Vendor Audit Pack',
    description: 'Vollständige Dokumentation eines Vendors inkl. Verträge, Findings und Risikobewertung',
    icon: '🔍',
    formats: ['PDF', 'DOCX'],
    defaultFormat: 'PDF',
  },
  MANAGEMENT_SUMMARY: {
    title: 'Management Summary',
    description: 'Übersicht für die Geschäftsführung: Risiken, offene Findings, Compliance-Status',
    icon: '📊',
    formats: ['PDF', 'DOCX', 'XLSX'],
    defaultFormat: 'PDF',
  },
  DPIA_INPUT: {
    title: 'DSFA-Input',
    description: 'Vorbereitete Daten für eine Datenschutz-Folgenabschätzung (DSFA/DPIA)',
    icon: '⚠️',
    formats: ['PDF', 'DOCX'],
    defaultFormat: 'DOCX',
  },
}

export { REPORT_TYPE_META }

export function ReportTypeGrid({
  selectedReportType,
  onSelect,
}: {
  selectedReportType: ReportType
  onSelect: (type: ReportType) => void
}) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Report-Typ wählen</h2>
      </div>
      <div className="p-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
        {(Object.entries(REPORT_TYPE_META) as [ReportType, typeof REPORT_TYPE_META[ReportType]][]).map(
          ([type, meta]) => (
            <button
              key={type}
              onClick={() => onSelect(type)}
              className={`p-4 rounded-lg border-2 text-left transition-all ${
                selectedReportType === type
                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
              }`}
            >
              <div className="flex items-center gap-3">
                <span className="text-2xl">{meta.icon}</span>
                <div>
                  <h3 className="font-medium text-gray-900 dark:text-white">{meta.title}</h3>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{meta.description}</p>
                </div>
              </div>
            </button>
          )
        )}
      </div>
    </div>
  )
}
