'use client'

import { useTheme } from '@/lib/ThemeContext'
import type { B2BHit } from '@/lib/AlertsB2BContext'

export function DecisionTraceModal({
  hit,
  onClose
}: {
  hit: B2BHit
  onClose: () => void
}) {
  const { isDark } = useTheme()
  const trace = hit.decisionTrace

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
      <div className={`relative w-full max-w-xl rounded-3xl border p-6 max-h-[90vh] overflow-y-auto ${
        isDark ? 'bg-slate-900 border-white/20' : 'bg-white border-slate-200 shadow-2xl'
      }`}>
        <div className="flex items-center justify-between mb-4">
          <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Decision Trace
          </h3>
          <button onClick={onClose} className={`p-2 rounded-lg ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}>
            <svg className={`w-5 h-5 ${isDark ? 'text-white/60' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {trace ? (
          <div className="space-y-4">
            {/* Rules Triggered */}
            <div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
              <h4 className={`text-sm font-medium mb-2 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
                Regeln ausgeloest
              </h4>
              <div className="flex flex-wrap gap-2">
                {trace.rulesTriggered.map((rule, idx) => (
                  <span key={idx} className={`px-2 py-1 rounded-lg text-xs ${
                    isDark ? 'bg-blue-500/20 text-blue-300' : 'bg-blue-100 text-blue-700'
                  }`}>
                    {rule}
                  </span>
                ))}
              </div>
            </div>

            {/* LLM Used */}
            <div className={`p-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-slate-50'}`}>
              <div className="flex items-center justify-between">
                <span className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>LLM verwendet</span>
                <span className={`px-2 py-1 rounded-lg text-xs ${
                  trace.llmUsed
                    ? isDark ? 'bg-purple-500/20 text-purple-300' : 'bg-purple-100 text-purple-700'
                    : isDark ? 'bg-slate-500/20 text-slate-300' : 'bg-slate-100 text-slate-500'
                }`}>
                  {trace.llmUsed ? `Ja (${Math.round((trace.llmConfidence || 0) * 100)}% Konfidenz)` : 'Nein'}
                </span>
              </div>
            </div>

            {/* Signals */}
            <div className="space-y-3">
              {trace.signals.procurementSignalsFound.length > 0 && (
                <div className={`p-4 rounded-xl ${isDark ? 'bg-green-500/10' : 'bg-green-50'}`}>
                  <h4 className={`text-sm font-medium mb-2 ${isDark ? 'text-green-300' : 'text-green-700'}`}>
                    Beschaffungs-Signale
                  </h4>
                  <p className={`text-sm ${isDark ? 'text-green-200/80' : 'text-green-600'}`}>
                    {trace.signals.procurementSignalsFound.join(', ')}
                  </p>
                </div>
              )}

              {trace.signals.publicBuyerSignalsFound.length > 0 && (
                <div className={`p-4 rounded-xl ${isDark ? 'bg-blue-500/10' : 'bg-blue-50'}`}>
                  <h4 className={`text-sm font-medium mb-2 ${isDark ? 'text-blue-300' : 'text-blue-700'}`}>
                    Oeffentliche Auftraggeber
                  </h4>
                  <p className={`text-sm ${isDark ? 'text-blue-200/80' : 'text-blue-600'}`}>
                    {trace.signals.publicBuyerSignalsFound.join(', ')}
                  </p>
                </div>
              )}

              {trace.signals.productSignalsFound.length > 0 && (
                <div className={`p-4 rounded-xl ${isDark ? 'bg-amber-500/10' : 'bg-amber-50'}`}>
                  <h4 className={`text-sm font-medium mb-2 ${isDark ? 'text-amber-300' : 'text-amber-700'}`}>
                    Produkt-Signale
                  </h4>
                  <p className={`text-sm ${isDark ? 'text-amber-200/80' : 'text-amber-600'}`}>
                    {trace.signals.productSignalsFound.join(', ')}
                  </p>
                </div>
              )}

              {trace.signals.negativesFound.length > 0 && (
                <div className={`p-4 rounded-xl ${isDark ? 'bg-red-500/10' : 'bg-red-50'}`}>
                  <h4 className={`text-sm font-medium mb-2 ${isDark ? 'text-red-300' : 'text-red-700'}`}>
                    Negative Signale
                  </h4>
                  <p className={`text-sm ${isDark ? 'text-red-200/80' : 'text-red-600'}`}>
                    {trace.signals.negativesFound.join(', ')}
                  </p>
                </div>
              )}
            </div>
          </div>
        ) : (
          <p className={`text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
            Kein Decision Trace verfuegbar.
          </p>
        )}
      </div>
    </div>
  )
}