'use client'

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

const FORMAT_META: Record<ExportFormat, { label: string; icon: string }> = {
  PDF: { label: 'PDF', icon: '📄' },
  DOCX: { label: 'Word (DOCX)', icon: '📝' },
  XLSX: { label: 'Excel (XLSX)', icon: '📊' },
  JSON: { label: 'JSON', icon: '🔧' },
}

export function ExportPanel({
  selectedReportType,
  selectedFormat,
  selectedVendors,
  selectedActivities,
  isGenerating,
  onFormatChange,
  onExport,
}: {
  selectedReportType: ReportType
  selectedFormat: ExportFormat
  selectedVendors: string[]
  selectedActivities: string[]
  isGenerating: boolean
  onFormatChange: (format: ExportFormat) => void
  onExport: () => void
}) {
  const reportMeta = REPORT_TYPE_META[selectedReportType]

  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">Export</h2>
      </div>
      <div className="p-4 space-y-4">
        <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xl">{reportMeta.icon}</span>
            <span className="font-medium text-gray-900 dark:text-white">{reportMeta.title}</span>
          </div>
          <p className="text-sm text-gray-500 dark:text-gray-400">{reportMeta.description}</p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Format</label>
          <div className="flex flex-wrap gap-2">
            {reportMeta.formats.map((format) => (
              <button
                key={format}
                onClick={() => onFormatChange(format)}
                className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                  selectedFormat === format
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                }`}
              >
                {FORMAT_META[format].icon} {FORMAT_META[format].label}
              </button>
            ))}
          </div>
        </div>

        <div className="text-sm text-gray-500 dark:text-gray-400">
          <p>
            {selectedReportType === 'VENDOR_AUDIT'
              ? `${selectedVendors.length || 'Alle'} Vendor(s) ausgewählt`
              : selectedReportType === 'MANAGEMENT_SUMMARY'
              ? 'Gesamtübersicht'
              : `${selectedActivities.length || 'Alle'} Verarbeitung(en) ausgewählt`}
          </p>
        </div>

        <button
          onClick={onExport}
          disabled={isGenerating}
          className={`w-full py-3 px-4 rounded-lg font-medium text-white transition-colors ${
            isGenerating ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'
          }`}
        >
          {isGenerating ? (
            <span className="flex items-center justify-center gap-2">
              <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
              </svg>
              Wird generiert...
            </span>
          ) : (
            `${reportMeta.title} exportieren`
          )}
        </button>
      </div>
    </div>
  )
}
