'use client'
// =============================================================================
// ReviewExportPanels
// SummaryCard, TOMsTable, GapAnalysisPanel, ExportPanel extracted from
// ReviewExportStep for LOC compliance.
// =============================================================================

import { useEffect, useState } from 'react'
import { useTOMGenerator } from '@/lib/sdk/tom-generator'
import { CONTROL_CATEGORIES } from '@/lib/sdk/tom-generator/types'
import { getControlById } from '@/lib/sdk/tom-generator/controls/loader'
import { generateDOCXBlob } from '@/lib/sdk/tom-generator/export/docx'
import { generatePDFBlob } from '@/lib/sdk/tom-generator/export/pdf'
import { generateZIPBlob } from '@/lib/sdk/tom-generator/export/zip'

// =============================================================================
// SUMMARY CARD COMPONENT
// =============================================================================

interface SummaryCardProps {
  title: string
  value: string | number
  description?: string
  variant?: 'default' | 'success' | 'warning' | 'danger'
}

export function SummaryCard({ title, value, description, variant = 'default' }: SummaryCardProps) {
  const colors = {
    default: 'bg-gray-100 text-gray-800',
    success: 'bg-green-100 text-green-800',
    warning: 'bg-yellow-100 text-yellow-800',
    danger: 'bg-red-100 text-red-800',
  }

  return (
    <div className={`rounded-lg p-4 ${colors[variant]}`}>
      <div className="text-2xl font-bold">{value}</div>
      <div className="font-medium">{title}</div>
      {description && <div className="text-sm opacity-75 mt-1">{description}</div>}
    </div>
  )
}

// =============================================================================
// TOMS TABLE COMPONENT
// =============================================================================

export function TOMsTable() {
  const { state } = useTOMGenerator()
  const [selectedCategory, setSelectedCategory] = useState<string>('all')
  const [selectedApplicability, setSelectedApplicability] = useState<string>('all')

  const filteredTOMs = state.derivedTOMs.filter((tom) => {
    const control = getControlById(tom.controlId)
    const categoryMatch = selectedCategory === 'all' || control?.category === selectedCategory
    const applicabilityMatch = selectedApplicability === 'all' || tom.applicability === selectedApplicability
    return categoryMatch && applicabilityMatch
  })

  const getStatusBadge = (status: string) => {
    const badges: Record<string, { bg: string; text: string }> = {
      IMPLEMENTED: { bg: 'bg-green-100', text: 'text-green-800' },
      PARTIAL: { bg: 'bg-yellow-100', text: 'text-yellow-800' },
      NOT_IMPLEMENTED: { bg: 'bg-red-100', text: 'text-red-800' },
    }
    const labels: Record<string, string> = {
      IMPLEMENTED: 'Umgesetzt',
      PARTIAL: 'Teilweise',
      NOT_IMPLEMENTED: 'Offen',
    }
    const config = badges[status] || badges.NOT_IMPLEMENTED
    return (
      <span className={`px-2 py-1 rounded-full text-xs font-medium ${config.bg} ${config.text}`}>
        {labels[status] || status}
      </span>
    )
  }

  const getApplicabilityBadge = (applicability: string) => {
    const badges: Record<string, { bg: string; text: string }> = {
      REQUIRED: { bg: 'bg-red-100', text: 'text-red-800' },
      RECOMMENDED: { bg: 'bg-blue-100', text: 'text-blue-800' },
      OPTIONAL: { bg: 'bg-gray-100', text: 'text-gray-800' },
      NOT_APPLICABLE: { bg: 'bg-gray-50', text: 'text-gray-500' },
    }
    const labels: Record<string, string> = {
      REQUIRED: 'Erforderlich',
      RECOMMENDED: 'Empfohlen',
      OPTIONAL: 'Optional',
      NOT_APPLICABLE: 'N/A',
    }
    const config = badges[applicability] || badges.OPTIONAL
    return (
      <span className={`px-2 py-1 rounded-full text-xs font-medium ${config.bg} ${config.text}`}>
        {labels[applicability] || applicability}
      </span>
    )
  }

  return (
    <div>
      {/* Filters */}
      <div className="flex flex-wrap gap-4 mb-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
          <select
            value={selectedCategory}
            onChange={(e) => setSelectedCategory(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">Alle Kategorien</option>
            {CONTROL_CATEGORIES.map((cat) => (
              <option key={cat.id} value={cat.id}>{cat.name.de}</option>
            ))}
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Anwendbarkeit</label>
          <select
            value={selectedApplicability}
            onChange={(e) => setSelectedApplicability(e.target.value)}
            className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">Alle</option>
            <option value="REQUIRED">Erforderlich</option>
            <option value="RECOMMENDED">Empfohlen</option>
            <option value="OPTIONAL">Optional</option>
            <option value="NOT_APPLICABLE">Nicht anwendbar</option>
          </select>
        </div>
      </div>

      {/* Table */}
      <div className="overflow-x-auto border rounded-lg">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                ID
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Maßnahme
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Anwendbarkeit
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Status
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Nachweise
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {filteredTOMs.map((tom) => (
              <tr key={tom.id} className="hover:bg-gray-50">
                <td className="px-4 py-3 text-sm font-mono text-gray-900">
                  {tom.controlId}
                </td>
                <td className="px-4 py-3">
                  <div className="text-sm font-medium text-gray-900">{tom.name}</div>
                  <div className="text-xs text-gray-500 max-w-md truncate">{tom.applicabilityReason}</div>
                </td>
                <td className="px-4 py-3">
                  {getApplicabilityBadge(tom.applicability)}
                </td>
                <td className="px-4 py-3">
                  {getStatusBadge(tom.implementationStatus)}
                </td>
                <td className="px-4 py-3 text-sm text-gray-500">
                  {tom.linkedEvidence.length > 0 ? (
                    <span className="text-green-600">{tom.linkedEvidence.length} Dok.</span>
                  ) : tom.evidenceGaps.length > 0 ? (
                    <span className="text-red-600">{tom.evidenceGaps.length} fehlen</span>
                  ) : (
                    '-'
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="mt-2 text-sm text-gray-500">
        {filteredTOMs.length} von {state.derivedTOMs.length} Maßnahmen angezeigt
      </div>
    </div>
  )
}

// =============================================================================
// GAP ANALYSIS PANEL
// =============================================================================

export function GapAnalysisPanel() {
  const { state, runGapAnalysis } = useTOMGenerator()

  useEffect(() => {
    if (!state.gapAnalysis && state.derivedTOMs.length > 0) {
      runGapAnalysis()
    }
  }, [state.derivedTOMs, state.gapAnalysis, runGapAnalysis])

  if (!state.gapAnalysis) {
    return (
      <div className="text-center py-8 text-gray-500">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2" />
        Lückenanalyse wird durchgeführt...
      </div>
    )
  }

  const { overallScore, missingControls, partialControls, recommendations } = state.gapAnalysis

  const getScoreColor = (score: number) => {
    if (score >= 80) return 'text-green-600'
    if (score >= 50) return 'text-yellow-600'
    return 'text-red-600'
  }

  return (
    <div className="space-y-6">
      {/* Score */}
      <div className="text-center">
        <div className={`text-5xl font-bold ${getScoreColor(overallScore)}`}>
          {overallScore}%
        </div>
        <div className="text-gray-600 mt-1">Compliance Score</div>
      </div>

      {/* Progress bar */}
      <div className="h-4 bg-gray-200 rounded-full overflow-hidden">
        <div
          className={`h-full transition-all duration-500 ${
            overallScore >= 80 ? 'bg-green-500' : overallScore >= 50 ? 'bg-yellow-500' : 'bg-red-500'
          }`}
          style={{ width: `${overallScore}%` }}
        />
      </div>

      {/* Missing Controls */}
      {missingControls.length > 0 && (
        <div>
          <h4 className="font-medium text-gray-900 mb-2">
            Fehlende Maßnahmen ({missingControls.length})
          </h4>
          <div className="space-y-2 max-h-48 overflow-y-auto">
            {missingControls.map((mc) => {
              const control = getControlById(mc.controlId)
              return (
                <div key={mc.controlId} className="flex items-center justify-between p-2 bg-red-50 rounded-lg">
                  <div>
                    <span className="font-mono text-sm text-gray-600">{mc.controlId}</span>
                    <span className="ml-2 text-sm text-gray-900">{control?.name.de}</span>
                  </div>
                  <span className={`px-2 py-0.5 text-xs rounded ${
                    mc.priority === 'CRITICAL' ? 'bg-red-200 text-red-800' :
                    mc.priority === 'HIGH' ? 'bg-orange-200 text-orange-800' :
                    'bg-gray-200 text-gray-800'
                  }`}>
                    {mc.priority}
                  </span>
                </div>
              )
            })}
          </div>
        </div>
      )}

      {/* Partial Controls */}
      {partialControls.length > 0 && (
        <div>
          <h4 className="font-medium text-gray-900 mb-2">
            Teilweise umgesetzt ({partialControls.length})
          </h4>
          <div className="space-y-2 max-h-48 overflow-y-auto">
            {partialControls.map((pc) => {
              const control = getControlById(pc.controlId)
              return (
                <div key={pc.controlId} className="p-2 bg-yellow-50 rounded-lg">
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-sm text-gray-600">{pc.controlId}</span>
                    <span className="text-sm text-gray-900">{control?.name.de}</span>
                  </div>
                  <div className="text-xs text-yellow-700 mt-1">
                    Fehlend: {pc.missingAspects.join(', ')}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      )}

      {/* Recommendations */}
      {recommendations.length > 0 && (
        <div>
          <h4 className="font-medium text-gray-900 mb-2">Empfehlungen</h4>
          <ul className="space-y-2">
            {recommendations.map((rec, index) => (
              <li key={index} className="flex items-start gap-2 text-sm text-gray-600">
                <svg className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
                {rec}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  )
}

// =============================================================================
// EXPORT PANEL
// =============================================================================

export function ExportPanel() {
  const { state, addExport } = useTOMGenerator()
  const [isExporting, setIsExporting] = useState<string | null>(null)

  const handleExport = async (format: 'docx' | 'pdf' | 'json' | 'zip') => {
    setIsExporting(format)
    try {
      let blob: Blob
      let filename: string

      switch (format) {
        case 'docx':
          blob = await generateDOCXBlob(state, { language: 'de' })
          filename = `TOM-Dokumentation-${new Date().toISOString().split('T')[0]}.docx`
          break
        case 'pdf':
          blob = await generatePDFBlob(state, { language: 'de' })
          filename = `TOM-Dokumentation-${new Date().toISOString().split('T')[0]}.pdf`
          break
        case 'json':
          blob = new Blob([JSON.stringify(state, null, 2)], { type: 'application/json' })
          filename = `TOM-Export-${new Date().toISOString().split('T')[0]}.json`
          break
        case 'zip':
          blob = await generateZIPBlob(state, { language: 'de' })
          filename = `TOM-Package-${new Date().toISOString().split('T')[0]}.zip`
          break
        default:
          return
      }

      // Download
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = filename
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

      // Record export
      addExport({
        id: `export-${Date.now()}`,
        format: format.toUpperCase() as 'DOCX' | 'PDF' | 'JSON' | 'ZIP',
        generatedAt: new Date(),
        filename,
      })
    } catch (error) {
      console.error('Export failed:', error)
    } finally {
      setIsExporting(null)
    }
  }

  const exportFormats = [
    { id: 'docx', label: 'Word (.docx)', icon: '📄', description: 'Bearbeitbares Dokument' },
    { id: 'pdf', label: 'PDF', icon: '📕', description: 'Druckversion' },
    { id: 'json', label: 'JSON', icon: '💾', description: 'Maschinelles Format' },
    { id: 'zip', label: 'ZIP-Paket', icon: '📦', description: 'Vollständiges Paket' },
  ]

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {exportFormats.map((format) => (
          <button
            key={format.id}
            onClick={() => handleExport(format.id as 'docx' | 'pdf' | 'json' | 'zip')}
            disabled={isExporting !== null}
            className={`p-4 border rounded-lg text-center transition-all ${
              isExporting === format.id
                ? 'bg-blue-50 border-blue-300'
                : 'hover:bg-gray-50 hover:border-gray-300'
            } disabled:opacity-50 disabled:cursor-not-allowed`}
          >
            <div className="text-3xl mb-2">{format.icon}</div>
            <div className="font-medium text-gray-900">{format.label}</div>
            <div className="text-xs text-gray-500">{format.description}</div>
            {isExporting === format.id && (
              <div className="mt-2">
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mx-auto" />
              </div>
            )}
          </button>
        ))}
      </div>

      {/* Export History */}
      {state.exports.length > 0 && (
        <div className="mt-6">
          <h4 className="font-medium text-gray-900 mb-2">Letzte Exporte</h4>
          <div className="space-y-2">
            {state.exports.slice(-5).reverse().map((exp) => (
              <div key={exp.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-lg text-sm">
                <span className="font-medium">{exp.filename}</span>
                <span className="text-gray-500">
                  {new Date(exp.generatedAt).toLocaleString('de-DE')}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}
