'use client'

import { useState, useEffect } from 'react'
import {
  ArrowLeft, ExternalLink, BookOpen, Scale, FileText,
  Eye, CheckCircle2, Trash2, Pencil, Clock,
  ChevronLeft, SkipForward, GitMerge, Search,
} from 'lucide-react'
import {
  CanonicalControl, EFFORT_LABELS, BACKEND_URL,
  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge, TargetAudienceBadge,
  VERIFICATION_METHODS, CATEGORY_OPTIONS,
} from './helpers'

interface SimilarControl {
  control_id: string
  title: string
  severity: string
  release_state: string
  tags: string[]
  license_rule: number | null
  verification_method: string | null
  category: string | null
  similarity: number
}

interface ControlDetailProps {
  ctrl: CanonicalControl
  onBack: () => void
  onEdit: () => void
  onDelete: (controlId: string) => void
  onReview: (controlId: string, action: string) => void
  onRefresh?: () => void
  // Review mode navigation
  reviewMode?: boolean
  reviewIndex?: number
  reviewTotal?: number
  onReviewPrev?: () => void
  onReviewNext?: () => void
}

export function ControlDetail({
  ctrl,
  onBack,
  onEdit,
  onDelete,
  onReview,
  onRefresh,
  reviewMode,
  reviewIndex = 0,
  reviewTotal = 0,
  onReviewPrev,
  onReviewNext,
}: ControlDetailProps) {
  const [similarControls, setSimilarControls] = useState<SimilarControl[]>([])
  const [loadingSimilar, setLoadingSimilar] = useState(false)
  const [selectedDuplicates, setSelectedDuplicates] = useState<Set<string>>(new Set())
  const [merging, setMerging] = useState(false)

  useEffect(() => {
    loadSimilarControls()
    setSelectedDuplicates(new Set())
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ctrl.control_id])

  const loadSimilarControls = async () => {
    setLoadingSimilar(true)
    try {
      const res = await fetch(`${BACKEND_URL}?endpoint=similar&id=${ctrl.control_id}`)
      if (res.ok) {
        setSimilarControls(await res.json())
      }
    } catch { /* ignore */ }
    finally { setLoadingSimilar(false) }
  }

  const toggleDuplicate = (controlId: string) => {
    setSelectedDuplicates(prev => {
      const next = new Set(prev)
      if (next.has(controlId)) next.delete(controlId)
      else next.add(controlId)
      return next
    })
  }

  const handleMergeDuplicates = async () => {
    if (selectedDuplicates.size === 0) return
    if (!confirm(`${selectedDuplicates.size} Controls als Duplikate markieren und Tags/Anchors in ${ctrl.control_id} zusammenfuehren?`)) return

    setMerging(true)
    try {
      // For each duplicate: mark as deprecated
      for (const dupId of selectedDuplicates) {
        await fetch(`${BACKEND_URL}?endpoint=update-control&id=${dupId}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ release_state: 'deprecated' }),
        })
      }
      // Refresh to show updated state
      if (onRefresh) onRefresh()
      setSelectedDuplicates(new Set())
      loadSimilarControls()
    } catch {
      alert('Fehler beim Zusammenfuehren')
    } finally {
      setMerging(false)
    }
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="border-b border-gray-200 bg-white px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button onClick={onBack} className="text-gray-400 hover:text-gray-600">
            <ArrowLeft className="w-5 h-5" />
          </button>
          <div>
            <div className="flex items-center gap-2">
              <span className="text-sm font-mono text-purple-600 bg-purple-50 px-2 py-0.5 rounded">{ctrl.control_id}</span>
              <SeverityBadge severity={ctrl.severity} />
              <StateBadge state={ctrl.release_state} />
              <LicenseRuleBadge rule={ctrl.license_rule} />
              <VerificationMethodBadge method={ctrl.verification_method} />
              <CategoryBadge category={ctrl.category} />
              <TargetAudienceBadge audience={ctrl.target_audience} />
            </div>
            <h2 className="text-lg font-semibold text-gray-900 mt-1">{ctrl.title}</h2>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {reviewMode && (
            <div className="flex items-center gap-1 mr-3">
              <button onClick={onReviewPrev} disabled={reviewIndex === 0} className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">
                <ChevronLeft className="w-4 h-4" />
              </button>
              <span className="text-xs text-gray-500 font-medium">{reviewIndex + 1} / {reviewTotal}</span>
              <button onClick={onReviewNext} disabled={reviewIndex >= reviewTotal - 1} className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">
                <SkipForward className="w-4 h-4" />
              </button>
            </div>
          )}
          <button onClick={onEdit} className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
            <Pencil className="w-3.5 h-3.5 inline mr-1" />Bearbeiten
          </button>
          <button onClick={() => onDelete(ctrl.control_id)} className="px-3 py-1.5 text-sm text-red-600 border border-red-300 rounded-lg hover:bg-red-50">
            <Trash2 className="w-3.5 h-3.5 inline mr-1" />Loeschen
          </button>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-6 max-w-4xl mx-auto w-full space-y-6">
        {/* Objective */}
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Ziel</h3>
          <p className="text-sm text-gray-700 leading-relaxed">{ctrl.objective}</p>
        </section>

        {/* Rationale */}
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Begruendung</h3>
          <p className="text-sm text-gray-700 leading-relaxed">{ctrl.rationale}</p>
        </section>

        {/* Gesetzliche Grundlage (Rule 1 + 2) */}
        {ctrl.source_citation && (
          <section className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <Scale className="w-4 h-4 text-blue-600" />
              <h3 className="text-sm font-semibold text-blue-900">Gesetzliche Grundlage</h3>
              {ctrl.license_rule === 1 && (
                <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">Direkte gesetzliche Pflicht</span>
              )}
              {ctrl.license_rule === 2 && (
                <span className="text-xs bg-teal-100 text-teal-700 px-2 py-0.5 rounded-full">Standard mit Zitationspflicht</span>
              )}
            </div>
            <div className="flex items-start gap-3">
              <div className="flex-1">
                {ctrl.source_citation.source && (
                  <p className="text-sm font-medium text-blue-900 mb-1">{ctrl.source_citation.source}</p>
                )}
                {ctrl.source_citation.license && (
                  <p className="text-xs text-blue-600">Lizenz: {ctrl.source_citation.license}</p>
                )}
                {ctrl.source_citation.license_notice && (
                  <p className="text-xs text-blue-600 mt-0.5">{ctrl.source_citation.license_notice}</p>
                )}
              </div>
              {ctrl.source_citation.url && (
                <a
                  href={ctrl.source_citation.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 whitespace-nowrap"
                >
                  <ExternalLink className="w-3.5 h-3.5" />Quelle
                </a>
              )}
            </div>
            {ctrl.source_original_text && (
              <details className="mt-3">
                <summary className="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Originaltext anzeigen</summary>
                <p className="text-xs text-gray-600 mt-2 p-2 bg-white rounded border border-blue-100 leading-relaxed max-h-40 overflow-y-auto whitespace-pre-wrap">
                  {ctrl.source_original_text}
                </p>
              </details>
            )}
          </section>
        )}

        {/* Impliziter Gesetzesbezug (Rule 3 — kein Originaltext, aber ggf. Gesetzesbezug ueber Anchors) */}
        {!ctrl.source_citation && ctrl.open_anchors.length > 0 && (
          <section className="bg-amber-50 border border-amber-200 rounded-lg p-3">
            <div className="flex items-center gap-2">
              <Scale className="w-4 h-4 text-amber-600" />
              <p className="text-xs text-amber-700">
                Dieser Control setzt implizit gesetzliche Anforderungen um (z.B. DSGVO Art. 32, NIS2 Art. 21).
                Die konkreten Massnahmen leiten sich aus den Open-Source-Referenzen unten ab.
              </p>
            </div>
          </section>
        )}

        {/* Scope */}
        {(ctrl.scope.platforms?.length || ctrl.scope.components?.length || ctrl.scope.data_classes?.length) ? (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Geltungsbereich</h3>
            <div className="grid grid-cols-3 gap-4 text-xs">
              {ctrl.scope.platforms?.length ? (
                <div><span className="text-gray-500">Plattformen:</span> <span className="text-gray-700">{ctrl.scope.platforms.join(', ')}</span></div>
              ) : null}
              {ctrl.scope.components?.length ? (
                <div><span className="text-gray-500">Komponenten:</span> <span className="text-gray-700">{ctrl.scope.components.join(', ')}</span></div>
              ) : null}
              {ctrl.scope.data_classes?.length ? (
                <div><span className="text-gray-500">Datenklassen:</span> <span className="text-gray-700">{ctrl.scope.data_classes.join(', ')}</span></div>
              ) : null}
            </div>
          </section>
        ) : null}

        {/* Requirements */}
        {ctrl.requirements.length > 0 && (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Anforderungen</h3>
            <ol className="list-decimal list-inside space-y-1">
              {ctrl.requirements.map((r, i) => (
                <li key={i} className="text-sm text-gray-700">{r}</li>
              ))}
            </ol>
          </section>
        )}

        {/* Test Procedure */}
        {ctrl.test_procedure.length > 0 && (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Pruefverfahren</h3>
            <ol className="list-decimal list-inside space-y-1">
              {ctrl.test_procedure.map((s, i) => (
                <li key={i} className="text-sm text-gray-700">{s}</li>
              ))}
            </ol>
          </section>
        )}

        {/* Evidence */}
        {ctrl.evidence.length > 0 && (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Nachweise</h3>
            <div className="space-y-2">
              {ctrl.evidence.map((ev, i) => (
                <div key={i} className="flex items-start gap-2 text-sm text-gray-700">
                  <FileText className="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" />
                  <div><span className="font-medium">{ev.type}:</span> {ev.description}</div>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Meta */}
        <section className="grid grid-cols-3 gap-4 text-xs text-gray-500">
          {ctrl.risk_score !== null && <div>Risiko-Score: <span className="text-gray-700 font-medium">{ctrl.risk_score}</span></div>}
          {ctrl.implementation_effort && <div>Aufwand: <span className="text-gray-700 font-medium">{EFFORT_LABELS[ctrl.implementation_effort] || ctrl.implementation_effort}</span></div>}
          {ctrl.tags.length > 0 && (
            <div className="col-span-3 flex items-center gap-1 flex-wrap">
              {ctrl.tags.map(t => (
                <span key={t} className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{t}</span>
              ))}
            </div>
          )}
        </section>

        {/* Open Anchors */}
        <section className="bg-green-50 border border-green-200 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-3">
            <BookOpen className="w-4 h-4 text-green-700" />
            <h3 className="text-sm font-semibold text-green-900">Open-Source-Referenzen ({ctrl.open_anchors.length})</h3>
          </div>
          {ctrl.open_anchors.length > 0 ? (
            <div className="space-y-2">
              {ctrl.open_anchors.map((anchor, i) => (
                <div key={i} className="flex items-center gap-2 text-sm">
                  <ExternalLink className="w-3.5 h-3.5 text-green-600 flex-shrink-0" />
                  <span className="font-medium text-green-800">{anchor.framework}</span>
                  <span className="text-green-700">{anchor.ref}</span>
                  {anchor.url && (
                    <a href={anchor.url} target="_blank" rel="noopener noreferrer" className="text-green-600 hover:text-green-800 underline text-xs ml-auto">
                      Link
                    </a>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-green-600">Keine Referenzen vorhanden.</p>
          )}
        </section>

        {/* Generation Metadata (internal) */}
        {ctrl.generation_metadata && (
          <section className="bg-gray-50 border border-gray-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-2">
              <Clock className="w-4 h-4 text-gray-500" />
              <h3 className="text-sm font-semibold text-gray-700">Generierungsdetails (intern)</h3>
            </div>
            <div className="text-xs text-gray-600 space-y-1">
              <p>Pfad: {String(ctrl.generation_metadata.processing_path || '-')}</p>
              {ctrl.generation_metadata.similarity_status && (
                <p className="text-red-600">Similarity: {String(ctrl.generation_metadata.similarity_status)}</p>
              )}
              {Array.isArray(ctrl.generation_metadata.similar_controls) && (
                <div>
                  <p className="font-medium">Aehnliche Controls:</p>
                  {(ctrl.generation_metadata.similar_controls as Array<Record<string, unknown>>).map((s, i) => (
                    <p key={i} className="ml-2">{String(s.control_id)} — {String(s.title)} ({String(s.similarity)})</p>
                  ))}
                </div>
              )}
            </div>
          </section>
        )}

        {/* Similar Controls (Dedup) */}
        <section className="bg-gray-50 border border-gray-200 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-3">
            <Search className="w-4 h-4 text-gray-600" />
            <h3 className="text-sm font-semibold text-gray-800">Aehnliche Controls</h3>
            {loadingSimilar && <span className="text-xs text-gray-400">Laden...</span>}
          </div>

          {similarControls.length > 0 ? (
            <>
              <div className="mb-3 p-2 bg-white border border-gray-100 rounded flex items-center gap-2">
                <input type="radio" checked readOnly className="text-purple-600" />
                <span className="text-sm font-medium text-purple-700">{ctrl.control_id} — {ctrl.title}</span>
                <span className="text-xs text-gray-400 ml-auto">Behalten (Haupt-Control)</span>
              </div>

              <div className="space-y-2">
                {similarControls.map(sim => (
                  <div key={sim.control_id} className="p-2 bg-white border border-gray-100 rounded flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={selectedDuplicates.has(sim.control_id)}
                      onChange={() => toggleDuplicate(sim.control_id)}
                      className="text-red-600"
                    />
                    <span className="text-xs font-mono text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{sim.control_id}</span>
                    <span className="text-sm text-gray-700 flex-1">{sim.title}</span>
                    <span className="text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded">
                      {(sim.similarity * 100).toFixed(1)}%
                    </span>
                    <LicenseRuleBadge rule={sim.license_rule} />
                    <VerificationMethodBadge method={sim.verification_method} />
                  </div>
                ))}
              </div>

              {selectedDuplicates.size > 0 && (
                <button
                  onClick={handleMergeDuplicates}
                  disabled={merging}
                  className="mt-3 flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50"
                >
                  <GitMerge className="w-3.5 h-3.5" />
                  {merging ? 'Zusammenfuehren...' : `${selectedDuplicates.size} Duplikat(e) zusammenfuehren`}
                </button>
              )}
            </>
          ) : (
            <p className="text-sm text-gray-500">
              {loadingSimilar ? 'Suche aehnliche Controls...' : 'Keine aehnlichen Controls gefunden.'}
            </p>
          )}
        </section>

        {/* Review Actions */}
        {['needs_review', 'too_close', 'duplicate'].includes(ctrl.release_state) && (
          <section className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <Eye className="w-4 h-4 text-yellow-700" />
              <h3 className="text-sm font-semibold text-yellow-900">Review erforderlich</h3>
              {reviewMode && (
                <span className="text-xs text-yellow-600 ml-auto">Review-Modus aktiv</span>
              )}
            </div>
            <div className="flex items-center gap-2">
              <button
                onClick={() => onReview(ctrl.control_id, 'approve')}
                className="px-3 py-1.5 text-sm text-white bg-green-600 rounded-lg hover:bg-green-700"
              >
                <CheckCircle2 className="w-3.5 h-3.5 inline mr-1" />
                Akzeptieren
              </button>
              <button
                onClick={() => onReview(ctrl.control_id, 'reject')}
                className="px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700"
              >
                <Trash2 className="w-3.5 h-3.5 inline mr-1" />
                Ablehnen
              </button>
              <button
                onClick={onEdit}
                className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
              >
                <Pencil className="w-3.5 h-3.5 inline mr-1" />
                Ueberarbeiten
              </button>
            </div>
          </section>
        )}
      </div>
    </div>
  )
}