'use client'

import { useMemo, useState, useEffect, useCallback } from 'react'
import { DerivedTOM, TOMGeneratorState } from '@/lib/sdk/tom-generator/types'
import { getControlById } from '@/lib/sdk/tom-generator/controls/loader'

interface CanonicalMapping {
  id: string
  canonical_control_code: string
  canonical_title: string | null
  canonical_severity: string | null
  canonical_objective: string | null
  mapping_type: string
}

interface TOMEditorTabProps {
  state: TOMGeneratorState
  selectedTOMId: string | null
  onUpdateTOM: (tomId: string, updates: Partial<DerivedTOM>) => void
  onBack: () => void
}

const STATUS_OPTIONS: { value: DerivedTOM['implementationStatus']; label: string; className: string }[] = [
  { value: 'IMPLEMENTED', label: 'Implementiert', className: 'border-green-300 bg-green-50 text-green-700' },
  { value: 'PARTIAL', label: 'Teilweise implementiert', className: 'border-yellow-300 bg-yellow-50 text-yellow-700' },
  { value: 'NOT_IMPLEMENTED', label: 'Nicht implementiert', className: 'border-red-300 bg-red-50 text-red-700' },
]

const TYPE_BADGES: Record<string, { label: string; className: string }> = {
  TECHNICAL: { label: 'Technisch', className: 'bg-blue-100 text-blue-700' },
  ORGANIZATIONAL: { label: 'Organisatorisch', className: 'bg-indigo-100 text-indigo-700' },
}

interface VVTActivity {
  id: string
  name?: string
  title?: string
  structuredToms?: { category?: string }[]
}

export function TOMEditorTab({ state, selectedTOMId, onUpdateTOM, onBack }: TOMEditorTabProps) {
  const tom = useMemo(() => {
    if (!selectedTOMId) return null
    return state.derivedTOMs.find(t => t.id === selectedTOMId) || null
  }, [state.derivedTOMs, selectedTOMId])

  const control = useMemo(() => {
    if (!tom) return null
    return getControlById(tom.controlId)
  }, [tom])

  const [implementationStatus, setImplementationStatus] = useState<DerivedTOM['implementationStatus']>('NOT_IMPLEMENTED')
  const [responsiblePerson, setResponsiblePerson] = useState('')
  const [implementationDate, setImplementationDate] = useState('')
  const [notes, setNotes] = useState('')
  const [linkedEvidence, setLinkedEvidence] = useState<string[]>([])
  const [selectedEvidenceId, setSelectedEvidenceId] = useState('')
  const [canonicalMappings, setCanonicalMappings] = useState<CanonicalMapping[]>([])
  const [showCanonical, setShowCanonical] = useState(false)

  // Load canonical controls for this TOM's category
  useEffect(() => {
    if (!control?.category) { setCanonicalMappings([]); return }
    fetch(`/api/sdk/v1/compliance/tom-mappings/by-tom/${encodeURIComponent(control.category)}`)
      .then(r => r.ok ? r.json() : null)
      .then(data => { if (data?.mappings) setCanonicalMappings(data.mappings) })
      .catch(() => setCanonicalMappings([]))
  }, [control?.category])

  useEffect(() => {
    if (tom) {
      setImplementationStatus(tom.implementationStatus)
      setResponsiblePerson(tom.responsiblePerson || '')
      setImplementationDate(tom.implementationDate ? new Date(tom.implementationDate).toISOString().slice(0, 10) : '')
      setNotes(tom.aiGeneratedDescription || '')
      setLinkedEvidence(tom.linkedEvidence || [])
    }
  }, [tom])

  const vvtActivities = useMemo(() => {
    if (!control) return []
    try {
      const raw = localStorage.getItem('bp_vvt')
      if (!raw) return []
      const activities: VVTActivity[] = JSON.parse(raw)
      return activities.filter(a =>
        a.structuredToms?.some(t => t.category === control.category)
      )
    } catch {
      return []
    }
  }, [control])

  const availableDocuments = useMemo(() => {
    return (state.documents || []).filter(
      doc => !linkedEvidence.includes(doc.id)
    )
  }, [state.documents, linkedEvidence])

  const linkedDocuments = useMemo(() => {
    return linkedEvidence
      .map(id => (state.documents || []).find(d => d.id === id))
      .filter(Boolean)
  }, [state.documents, linkedEvidence])

  const evidenceGaps = useMemo(() => {
    if (!control?.evidenceRequirements) return []
    return control.evidenceRequirements.map(req => {
      const hasMatch = (state.documents || []).some(doc =>
        linkedEvidence.includes(doc.id) &&
        (doc.filename?.toLowerCase().includes(req.toLowerCase()) ||
         doc.documentType?.toLowerCase().includes(req.toLowerCase()))
      )
      return { requirement: req, fulfilled: hasMatch }
    })
  }, [control, state.documents, linkedEvidence])

  const handleSave = () => {
    if (!tom) return
    onUpdateTOM(tom.id, {
      implementationStatus,
      responsiblePerson: responsiblePerson || null,
      implementationDate: implementationDate ? new Date(implementationDate) : null,
      aiGeneratedDescription: notes || null,
      linkedEvidence,
    })
  }

  const handleAddEvidence = () => {
    if (!selectedEvidenceId) return
    setLinkedEvidence(prev => [...prev, selectedEvidenceId])
    setSelectedEvidenceId('')
  }

  const handleRemoveEvidence = (docId: string) => {
    setLinkedEvidence(prev => prev.filter(id => id !== docId))
  }

  if (!selectedTOMId || !tom) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-center">
        <div className="text-gray-400 mb-4">
          <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
          </svg>
        </div>
        <h3 className="text-lg font-semibold text-gray-700 mb-2">Keine TOM ausgewaehlt</h3>
        <p className="text-gray-500">Waehlen Sie eine TOM aus der Uebersicht, um sie zu bearbeiten.</p>
      </div>
    )
  }

  const typeBadge = TYPE_BADGES[control?.type || 'TECHNICAL'] || TYPE_BADGES.TECHNICAL

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <button
          onClick={onBack}
          className="text-sm text-purple-600 hover:text-purple-800 font-medium flex items-center gap-1"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Zurueck zur Uebersicht
        </button>
        <button
          onClick={handleSave}
          className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
        >
          Aenderungen speichern
        </button>
      </div>

      {/* TOM Header Card */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-start gap-3 mb-3">
          <span className="text-xs font-mono bg-gray-100 text-gray-600 px-2 py-1 rounded">{control?.code || tom.controlId}</span>
          <span className={`text-xs px-2 py-1 rounded-full font-medium ${typeBadge.className}`}>
            {typeBadge.label}
          </span>
          <span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full font-medium">
            {control?.category || 'Unbekannt'}
          </span>
        </div>
        <h2 className="text-xl font-bold text-gray-900 mb-2">{control?.name?.de || tom.controlId}</h2>
        {control?.description?.de && (
          <p className="text-sm text-gray-600 leading-relaxed">{control.description.de}</p>
        )}
      </div>

      {/* Implementation Status */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-sm font-semibold text-gray-700 mb-4">Implementierungsstatus</h3>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          {STATUS_OPTIONS.map(opt => (
            <label
              key={opt.value}
              className={`flex items-center gap-3 border rounded-lg p-3 cursor-pointer transition-all ${
                implementationStatus === opt.value
                  ? opt.className + ' ring-2 ring-offset-1 ring-current'
                  : 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50'
              }`}
            >
              <input
                type="radio"
                name="implementationStatus"
                value={opt.value}
                checked={implementationStatus === opt.value}
                onChange={() => setImplementationStatus(opt.value)}
                className="sr-only"
              />
              <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                implementationStatus === opt.value ? 'border-current' : 'border-gray-300'
              }`}>
                {implementationStatus === opt.value && (
                  <div className="w-2 h-2 rounded-full bg-current" />
                )}
              </div>
              <span className="text-sm font-medium">{opt.label}</span>
            </label>
          ))}
        </div>
      </div>

      {/* Responsible Person */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-sm font-semibold text-gray-700 mb-4">Verantwortliche Person</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label className="block text-xs font-medium text-gray-600 mb-1">Umgesetzt von</label>
            <input
              type="text"
              value={responsiblePerson}
              onChange={e => setResponsiblePerson(e.target.value)}
              placeholder="Name der verantwortlichen Person"
              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
            />
          </div>
          <div>
            <label className="block text-xs font-medium text-gray-600 mb-1">Umsetzungsdatum</label>
            <input
              type="date"
              value={implementationDate}
              onChange={e => setImplementationDate(e.target.value)}
              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
            />
          </div>
        </div>
      </div>

      {/* Notes */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-sm font-semibold text-gray-700 mb-4">Anmerkungen</h3>
        <textarea
          value={notes}
          onChange={e => setNotes(e.target.value)}
          rows={4}
          placeholder="Anmerkungen zur Umsetzung, Besonderheiten, etc."
          className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-y"
        />
      </div>

      {/* Evidence Section */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-sm font-semibold text-gray-700 mb-4">Nachweisdokumente</h3>

        {linkedDocuments.length > 0 ? (
          <div className="space-y-2 mb-4">
            {linkedDocuments.map(doc => doc && (
              <div key={doc.id} className="flex items-center justify-between bg-gray-50 rounded-lg px-3 py-2">
                <div className="flex items-center gap-2">
                  <svg className="w-4 h-4 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>
                  <span className="text-sm text-gray-700">{doc.originalName || doc.filename || doc.id}</span>
                </div>
                <button
                  onClick={() => handleRemoveEvidence(doc.id)}
                  className="text-red-500 hover:text-red-700 text-xs font-medium"
                >
                  Entfernen
                </button>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-gray-400 mb-4">Keine Nachweisdokumente verknuepft.</p>
        )}

        {availableDocuments.length > 0 && (
          <div className="flex items-end gap-2">
            <div className="flex-1">
              <label className="block text-xs font-medium text-gray-600 mb-1">Dokument hinzufuegen</label>
              <select
                value={selectedEvidenceId}
                onChange={e => setSelectedEvidenceId(e.target.value)}
                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
              >
                <option value="">Dokument auswaehlen...</option>
                {availableDocuments.map(doc => (
                  <option key={doc.id} value={doc.id}>{doc.originalName || doc.filename || doc.id}</option>
                ))}
              </select>
            </div>
            <button
              onClick={handleAddEvidence}
              disabled={!selectedEvidenceId}
              className="bg-purple-600 text-white hover:bg-purple-700 disabled:bg-gray-300 disabled:cursor-not-allowed rounded-lg px-4 py-2 text-sm font-medium transition-colors"
            >
              Hinzufuegen
            </button>
          </div>
        )}
      </div>

      {/* Evidence Gaps */}
      {evidenceGaps.length > 0 && (
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <h3 className="text-sm font-semibold text-gray-700 mb-4">Nachweis-Anforderungen</h3>
          <div className="space-y-2">
            {evidenceGaps.map((gap, idx) => (
              <div key={idx} className="flex items-center gap-3">
                <div className={`w-5 h-5 rounded flex items-center justify-center flex-shrink-0 ${
                  gap.fulfilled ? 'bg-green-100 text-green-600' : 'bg-red-50 text-red-400'
                }`}>
                  {gap.fulfilled ? (
                    <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                  ) : (
                    <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                  )}
                </div>
                <span className={`text-sm ${gap.fulfilled ? 'text-gray-700' : 'text-gray-500'}`}>
                  {gap.requirement}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* VVT Cross-References */}
      {vvtActivities.length > 0 && (
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <h3 className="text-sm font-semibold text-gray-700 mb-4">VVT-Querverweise</h3>
          <div className="space-y-2">
            {vvtActivities.map(activity => (
              <div key={activity.id} className="flex items-center gap-2 bg-purple-50 rounded-lg px-3 py-2">
                <svg className="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                </svg>
                <span className="text-sm text-purple-700">{activity.name || activity.title || activity.id}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Canonical Controls (Belegende Security-Controls) */}
      {canonicalMappings.length > 0 && (
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-sm font-semibold text-gray-700">
              Belegende Security-Controls ({canonicalMappings.length})
            </h3>
            <button
              onClick={() => setShowCanonical(!showCanonical)}
              className="text-xs text-purple-600 hover:text-purple-700 font-medium"
            >
              {showCanonical ? 'Einklappen' : 'Alle anzeigen'}
            </button>
          </div>
          <div className="space-y-2">
            {(showCanonical ? canonicalMappings : canonicalMappings.slice(0, 5)).map(m => (
              <div key={m.id} className="flex items-start gap-3 bg-gray-50 rounded-lg px-3 py-2">
                <div className="flex-shrink-0">
                  <span className="text-xs font-mono bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">
                    {m.canonical_control_code}
                  </span>
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-gray-700 font-medium truncate">{m.canonical_title || m.canonical_control_code}</p>
                  {m.canonical_objective && showCanonical && (
                    <p className="text-xs text-gray-500 mt-0.5 line-clamp-2">{m.canonical_objective}</p>
                  )}
                </div>
                <div className="flex-shrink-0 flex items-center gap-1.5">
                  {m.canonical_severity && (
                    <span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${
                      m.canonical_severity === 'critical' ? 'bg-red-100 text-red-700' :
                      m.canonical_severity === 'high' ? 'bg-orange-100 text-orange-700' :
                      m.canonical_severity === 'medium' ? 'bg-yellow-100 text-yellow-700' :
                      'bg-gray-100 text-gray-600'
                    }`}>
                      {m.canonical_severity}
                    </span>
                  )}
                  <span className={`text-xs px-1.5 py-0.5 rounded-full ${
                    m.mapping_type === 'manual' ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-500'
                  }`}>
                    {m.mapping_type === 'manual' ? 'manuell' : 'auto'}
                  </span>
                </div>
              </div>
            ))}
          </div>
          {!showCanonical && canonicalMappings.length > 5 && (
            <p className="text-xs text-gray-400 mt-2">
              + {canonicalMappings.length - 5} weitere Controls
            </p>
          )}
        </div>
      )}

      {/* Framework Mappings */}
      {control?.mappings && control.mappings.length > 0 && (
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <h3 className="text-sm font-semibold text-gray-700 mb-4">Framework-Zuordnungen</h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            {control.mappings.map((mapping, idx) => (
              <div key={idx} className="flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2">
                <span className="text-xs font-semibold text-gray-500 uppercase">{mapping.framework}</span>
                <span className="text-sm text-gray-700">{mapping.reference}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Bottom Save */}
      <div className="flex items-center justify-between pt-2">
        <button
          onClick={onBack}
          className="text-sm text-gray-500 hover:text-gray-700 font-medium"
        >
          Zurueck zur Uebersicht
        </button>
        <button
          onClick={handleSave}
          className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-6 py-2.5 font-medium transition-colors"
        >
          Aenderungen speichern
        </button>
      </div>
    </div>
  )
}