'use client'

import { useState, useEffect } from 'react'
import type { Requirement, Regulation, RequirementUpdate, AIInterpretation } from '../types'
import { IMPLEMENTATION_STATUS, AUDIT_STATUS } from '../types'

export default function RequirementDetailPanel({
  requirement,
  regulation,
  onUpdate,
  saving,
}: {
  requirement: Requirement
  regulation: Regulation | undefined
  onUpdate: (updates: RequirementUpdate) => void
  saving: boolean
}) {
  const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
  const [editMode, setEditMode] = useState(false)
  const [aiLoading, setAiLoading] = useState(false)
  const [aiInterpretation, setAiInterpretation] = useState<AIInterpretation | null>(null)
  const [showAiPanel, setShowAiPanel] = useState(false)
  const [localData, setLocalData] = useState({
    implementation_status: requirement.implementation_status,
    implementation_details: requirement.implementation_details || '',
    evidence_description: requirement.evidence_description || '',
    audit_status: requirement.audit_status,
    auditor_notes: requirement.auditor_notes || '',
    is_applicable: requirement.is_applicable,
    applicability_reason: requirement.applicability_reason || '',
  })
  const [newCodeRef, setNewCodeRef] = useState({ file: '', line: '', description: '' })

  useEffect(() => {
    setLocalData({
      implementation_status: requirement.implementation_status,
      implementation_details: requirement.implementation_details || '',
      evidence_description: requirement.evidence_description || '',
      audit_status: requirement.audit_status,
      auditor_notes: requirement.auditor_notes || '',
      is_applicable: requirement.is_applicable,
      applicability_reason: requirement.applicability_reason || '',
    })
    setEditMode(false)
    setAiInterpretation(null)
    setShowAiPanel(false)
  }, [requirement.id])

  const generateAiInterpretation = async () => {
    setAiLoading(true)
    setShowAiPanel(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/ai/interpret`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ requirement_id: requirement.id }),
      })
      if (res.ok) {
        setAiInterpretation(await res.json())
      } else {
        const err = await res.json()
        setAiInterpretation({
          summary: '', applicability: '', technical_measures: [],
          affected_modules: [], risk_level: 'unknown', implementation_hints: [],
          confidence_score: 0, error: err.detail || 'Fehler bei AI-Analyse'
        })
      }
    } catch (err) {
      setAiInterpretation({
        summary: '', applicability: '', technical_measures: [],
        affected_modules: [], risk_level: 'unknown', implementation_hints: [],
        confidence_score: 0, error: 'Netzwerkfehler bei AI-Analyse'
      })
    } finally {
      setAiLoading(false)
    }
  }

  const handleSave = () => {
    onUpdate(localData)
    setEditMode(false)
  }

  const addCodeReference = () => {
    if (!newCodeRef.file) return
    const refs = requirement.code_references || []
    onUpdate({
      code_references: [...refs, {
        file: newCodeRef.file,
        line: newCodeRef.line ? parseInt(newCodeRef.line) : undefined,
        description: newCodeRef.description,
      }],
    })
    setNewCodeRef({ file: '', line: '', description: '' })
  }

  return (
    <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
      {/* Header */}
      <div className="p-4 border-b border-slate-200 bg-slate-50">
        <div className="flex items-start justify-between">
          <div>
            <div className="flex items-center gap-3">
              <span className="font-mono text-lg font-semibold text-slate-900">
                {requirement.article}{requirement.paragraph ? ` ${requirement.paragraph}` : ''}
              </span>
              <span className={`px-2 py-0.5 text-xs font-medium rounded ${
                AUDIT_STATUS[requirement.audit_status as keyof typeof AUDIT_STATUS]?.color || 'bg-slate-200'
              } text-white`}>
                {AUDIT_STATUS[requirement.audit_status as keyof typeof AUDIT_STATUS]?.label || requirement.audit_status}
              </span>
              <span className={`px-2 py-0.5 text-xs font-medium rounded ${
                IMPLEMENTATION_STATUS[requirement.implementation_status as keyof typeof IMPLEMENTATION_STATUS]?.color || 'bg-slate-200'
              } text-white`}>
                {IMPLEMENTATION_STATUS[requirement.implementation_status as keyof typeof IMPLEMENTATION_STATUS]?.label || requirement.implementation_status}
              </span>
            </div>
            <h2 className="text-lg font-medium text-slate-900 mt-1">{requirement.title}</h2>
          </div>
          <div className="flex gap-2">
            {editMode ? (
              <>
                <button onClick={() => setEditMode(false)} className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-800">Abbrechen</button>
                <button onClick={handleSave} disabled={saving} className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50">
                  {saving ? 'Speichern...' : 'Speichern'}
                </button>
              </>
            ) : (
              <button onClick={() => setEditMode(true)} className="px-3 py-1.5 text-sm bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200">Bearbeiten</button>
            )}
          </div>
        </div>
      </div>

      <div className="p-4 space-y-6">
        {/* Original Requirement Text */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2 flex items-center gap-2">
            <svg className="w-4 h-4" 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>
            Originaler Anforderungstext
          </h3>
          <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
            <p className="text-sm text-slate-700 whitespace-pre-wrap">{requirement.requirement_text || 'Kein Originaltext hinterlegt'}</p>
            {requirement.source_page && (
              <p className="text-xs text-slate-500 mt-2">Quelle: {regulation?.code} Seite {requirement.source_page}{requirement.source_section ? `, ${requirement.source_section}` : ''}</p>
            )}
          </div>
        </section>

        {/* Applicability */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2">Anwendbarkeit auf Breakpilot</h3>
          {editMode ? (
            <div className="space-y-2">
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={localData.is_applicable} onChange={(e) => setLocalData({ ...localData, is_applicable: e.target.checked })} className="rounded" />
                <span className="text-sm text-slate-700">Anwendbar</span>
              </label>
              <textarea value={localData.applicability_reason} onChange={(e) => setLocalData({ ...localData, applicability_reason: e.target.value })} placeholder="Begruendung fuer Anwendbarkeit..." className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" rows={2} />
            </div>
          ) : (
            <div className="flex items-start gap-3">
              <span className={`px-2 py-1 text-xs font-medium rounded ${requirement.is_applicable ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'}`}>
                {requirement.is_applicable ? 'Anwendbar' : 'Nicht anwendbar'}
              </span>
              {requirement.applicability_reason && <p className="text-sm text-slate-600">{requirement.applicability_reason}</p>}
            </div>
          )}
        </section>

        {/* Interpretation & AI Analysis */}
        <section>
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide flex items-center gap-2">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
              Interpretation
            </h3>
            <button onClick={generateAiInterpretation} disabled={aiLoading} className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg hover:from-purple-700 hover:to-pink-700 disabled:opacity-50 transition-all">
              {aiLoading ? (
                <><svg className="animate-spin h-3 w-3" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /></svg> AI analysiert...</>
              ) : (
                <><svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> AI Analyse</>
              )}
            </button>
          </div>
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-3">
            <p className="text-sm text-blue-800">{requirement.breakpilot_interpretation || 'Keine Interpretation hinterlegt'}</p>
          </div>

          {/* AI Panel */}
          {showAiPanel && (
            <div className="bg-gradient-to-br from-purple-50 to-pink-50 border border-purple-200 rounded-lg p-4 space-y-3">
              <div className="flex items-center justify-between">
                <h4 className="text-sm font-semibold text-purple-800 flex items-center gap-2">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                  AI-generierte Analyse
                </h4>
                {aiInterpretation?.confidence_score ? <span className="text-xs text-purple-600">Konfidenz: {Math.round(aiInterpretation.confidence_score * 100)}%</span> : null}
              </div>
              {aiLoading && <div className="text-center py-4"><div className="animate-pulse text-purple-600">Claude analysiert die Anforderung...</div></div>}
              {aiInterpretation?.error && <div className="bg-red-100 text-red-700 p-3 rounded text-sm">{aiInterpretation.error}</div>}
              {aiInterpretation && !aiInterpretation.error && !aiLoading && (
                <div className="space-y-3 text-sm">
                  {aiInterpretation.summary && <div><div className="font-medium text-purple-700 mb-1">Zusammenfassung</div><p className="text-slate-700">{aiInterpretation.summary}</p></div>}
                  {aiInterpretation.applicability && <div><div className="font-medium text-purple-700 mb-1">Anwendbarkeit auf Breakpilot</div><p className="text-slate-700">{aiInterpretation.applicability}</p></div>}
                  {aiInterpretation.risk_level && (
                    <div className="flex items-center gap-2">
                      <span className="font-medium text-purple-700">Risiko:</span>
                      <span className={`px-2 py-0.5 rounded text-xs font-medium ${aiInterpretation.risk_level === 'critical' ? 'bg-red-100 text-red-700' : aiInterpretation.risk_level === 'high' ? 'bg-orange-100 text-orange-700' : aiInterpretation.risk_level === 'medium' ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'}`}>{aiInterpretation.risk_level}</span>
                    </div>
                  )}
                  {aiInterpretation.technical_measures?.length > 0 && <div><div className="font-medium text-purple-700 mb-1">Technische Massnahmen</div><ul className="list-disc list-inside text-slate-700 space-y-1">{aiInterpretation.technical_measures.map((m, i) => <li key={i}>{m}</li>)}</ul></div>}
                  {aiInterpretation.affected_modules?.length > 0 && <div><div className="font-medium text-purple-700 mb-1">Betroffene Module</div><div className="flex flex-wrap gap-1">{aiInterpretation.affected_modules.map((m, i) => <span key={i} className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">{m}</span>)}</div></div>}
                  {aiInterpretation.implementation_hints?.length > 0 && <div><div className="font-medium text-purple-700 mb-1">Implementierungshinweise</div><ul className="list-disc list-inside text-slate-700 space-y-1">{aiInterpretation.implementation_hints.map((h, i) => <li key={i}>{h}</li>)}</ul></div>}
                </div>
              )}
            </div>
          )}
        </section>

        {/* Implementation Details */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2 flex items-center gap-2">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
            Umsetzung (fuer Auditor)
          </h3>
          {editMode ? (
            <div className="space-y-3">
              <div>
                <label className="block text-xs text-slate-500 mb-1">Implementierungsstatus</label>
                <select value={localData.implementation_status} onChange={(e) => setLocalData({ ...localData, implementation_status: e.target.value })} className="px-3 py-2 border border-slate-300 rounded-lg text-sm">
                  {Object.entries(IMPLEMENTATION_STATUS).map(([key, { label }]) => <option key={key} value={key}>{label}</option>)}
                </select>
              </div>
              <textarea value={localData.implementation_details} onChange={(e) => setLocalData({ ...localData, implementation_details: e.target.value })} placeholder="Beschreiben Sie, wie diese Anforderung in Breakpilot umgesetzt wurde..." className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" rows={4} />
            </div>
          ) : (
            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
              <p className="text-sm text-green-800 whitespace-pre-wrap">{requirement.implementation_details || 'Noch keine Umsetzungsdetails dokumentiert'}</p>
            </div>
          )}
        </section>

        {/* Code References */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2">Code-Referenzen</h3>
          <div className="space-y-2">
            {(requirement.code_references || []).map((ref, idx) => (
              <div key={idx} className="flex items-center gap-2 bg-slate-50 p-2 rounded-lg text-sm">
                <code className="text-primary-600">{ref.file}{ref.line ? `:${ref.line}` : ''}</code>
                <span className="text-slate-500">-</span>
                <span className="text-slate-700">{ref.description}</span>
              </div>
            ))}
            {editMode && (
              <div className="flex gap-2">
                <input type="text" value={newCodeRef.file} onChange={(e) => setNewCodeRef({ ...newCodeRef, file: e.target.value })} placeholder="Datei (z.B. backend/auth.py)" className="flex-1 px-2 py-1.5 text-sm border border-slate-300 rounded" />
                <input type="text" value={newCodeRef.line} onChange={(e) => setNewCodeRef({ ...newCodeRef, line: e.target.value })} placeholder="Zeile" className="w-20 px-2 py-1.5 text-sm border border-slate-300 rounded" />
                <input type="text" value={newCodeRef.description} onChange={(e) => setNewCodeRef({ ...newCodeRef, description: e.target.value })} placeholder="Beschreibung" className="flex-1 px-2 py-1.5 text-sm border border-slate-300 rounded" />
                <button onClick={addCodeReference} className="px-3 py-1.5 bg-primary-600 text-white rounded text-sm">+</button>
              </div>
            )}
          </div>
        </section>

        {/* Evidence */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2 flex items-center gap-2">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
            Nachweis / Evidence
          </h3>
          {editMode ? (
            <textarea value={localData.evidence_description} onChange={(e) => setLocalData({ ...localData, evidence_description: e.target.value })} placeholder="Welche Nachweise belegen die Erfuellung dieser Anforderung?" className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" rows={3} />
          ) : (
            <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
              <p className="text-sm text-amber-800">{requirement.evidence_description || 'Keine Nachweise beschrieben'}</p>
            </div>
          )}
        </section>

        {/* Auditor Section */}
        <section className="border-t border-slate-200 pt-4">
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2 flex items-center gap-2">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
            Auditor-Bereich
          </h3>
          {editMode ? (
            <div className="space-y-3">
              <div>
                <label className="block text-xs text-slate-500 mb-1">Audit-Status</label>
                <select value={localData.audit_status} onChange={(e) => setLocalData({ ...localData, audit_status: e.target.value })} className="px-3 py-2 border border-slate-300 rounded-lg text-sm">
                  {Object.entries(AUDIT_STATUS).map(([key, { label }]) => <option key={key} value={key}>{label}</option>)}
                </select>
              </div>
              <textarea value={localData.auditor_notes} onChange={(e) => setLocalData({ ...localData, auditor_notes: e.target.value })} placeholder="Notizen des Auditors..." className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" rows={3} />
            </div>
          ) : (
            <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
              <p className="text-sm text-slate-700">{requirement.auditor_notes || 'Keine Auditor-Notizen'}</p>
            </div>
          )}
        </section>
      </div>
    </div>
  )
}
