'use client'

import type { ScopeDecision, ApplicableRegulation, SupervisoryAuthorityInfo } from '@/lib/sdk/compliance-scope-types'
import { DEPTH_LEVEL_LABELS, DEPTH_LEVEL_DESCRIPTIONS, DEPTH_LEVEL_COLORS, DOCUMENT_TYPE_LABELS } from '@/lib/sdk/compliance-scope-types'

// =============================================================================
// Helpers
// =============================================================================

export const getScoreColor = (score: number): string => {
  if (score >= 80) return 'from-red-500 to-red-600'
  if (score >= 60) return 'from-orange-500 to-orange-600'
  if (score >= 40) return 'from-yellow-500 to-yellow-600'
  return 'from-green-500 to-green-600'
}

export const getSeverityBadge = (severity: string) => {
  const s = severity.toLowerCase()
  const colors: Record<string, string> = {
    low: 'bg-gray-100 text-gray-800',
    medium: 'bg-yellow-100 text-yellow-800',
    high: 'bg-orange-100 text-orange-800',
    critical: 'bg-red-100 text-red-800',
  }
  const labels: Record<string, string> = {
    low: 'Niedrig',
    medium: 'Mittel',
    high: 'Hoch',
    critical: 'Kritisch',
  }
  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[s] || colors.medium}`}>
      {labels[s] || severity}
    </span>
  )
}

export const ScoreBar = ({ label, score }: { label: string; score: number | undefined }) => {
  const value = score ?? 0
  return (
    <div className="space-y-2">
      <div className="flex justify-between items-center">
        <span className="text-sm font-medium text-gray-700">{label}</span>
        <span className="text-sm font-bold text-gray-900">{value}/100</span>
      </div>
      <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
        <div
          className={`h-full bg-gradient-to-r ${getScoreColor(value)} transition-all duration-500`}
          style={{ width: `${value}%` }}
        />
      </div>
    </div>
  )
}

// =============================================================================
// LevelCard
// =============================================================================

export function LevelCard({ decision }: { decision: ScopeDecision }) {
  return (
    <div className={`${DEPTH_LEVEL_COLORS[decision.determinedLevel].bg} border-2 ${DEPTH_LEVEL_COLORS[decision.determinedLevel].border} rounded-xl p-6`}>
      <div className="flex items-start gap-6">
        <div className={`flex-shrink-0 w-20 h-20 ${DEPTH_LEVEL_COLORS[decision.determinedLevel].badge} rounded-xl flex items-center justify-center`}>
          <span className={`text-3xl font-bold ${DEPTH_LEVEL_COLORS[decision.determinedLevel].text}`}>
            {decision.determinedLevel}
          </span>
        </div>
        <div className="flex-1">
          <h2 className={`text-2xl font-bold ${DEPTH_LEVEL_COLORS[decision.determinedLevel].text} mb-2`}>
            {DEPTH_LEVEL_LABELS[decision.determinedLevel]}
          </h2>
          <p className="text-gray-700 mb-3">{DEPTH_LEVEL_DESCRIPTIONS[decision.determinedLevel]}</p>
          {decision.reasoning && decision.reasoning.length > 0 && (
            <p className="text-sm text-gray-600 italic">{decision.reasoning.map(r => r.description).filter(Boolean).join('. ')}</p>
          )}
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// ScoreBreakdown
// =============================================================================

export function ScoreBreakdown({ decision }: { decision: ScopeDecision }) {
  if (!decision.scores) return null
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Score-Analyse</h3>
      <div className="space-y-4">
        <ScoreBar label="Risiko-Score" score={decision.scores.risk_score} />
        <ScoreBar label="Komplexitäts-Score" score={decision.scores.complexity_score} />
        <ScoreBar label="Assurance-Score" score={decision.scores.assurance_need} />
        <div className="pt-4 border-t border-gray-200">
          <ScoreBar label="Gesamt-Score" score={decision.scores.composite_score} />
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// RegulationsPanel
// =============================================================================

interface RegulationsPanelProps {
  applicableRegulations?: ApplicableRegulation[]
  supervisoryAuthorities?: SupervisoryAuthorityInfo[]
  regulationAssessmentLoading?: boolean
  onGoToObligations?: () => void
}

export function RegulationsPanel({
  applicableRegulations,
  supervisoryAuthorities,
  regulationAssessmentLoading,
  onGoToObligations,
}: RegulationsPanelProps) {
  if (!applicableRegulations && !regulationAssessmentLoading) return null
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Anwendbare Regulierungen</h3>
      {regulationAssessmentLoading ? (
        <div className="flex items-center gap-3 text-gray-500">
          <svg className="animate-spin h-5 w-5" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
          <span>Regulierungen werden geprueft...</span>
        </div>
      ) : applicableRegulations && applicableRegulations.length > 0 ? (
        <div className="space-y-3">
          {applicableRegulations.map((reg) => (
            <div key={reg.id} className="flex items-center justify-between border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
              <div className="flex items-center gap-3">
                <div className="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                  <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <span className="font-semibold text-gray-900">{reg.name}</span>
                  {reg.classification && (
                    <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
                      {reg.classification}
                    </span>
                  )}
                </div>
              </div>
              <div className="text-right text-sm text-gray-600">
                <span>{reg.obligation_count} Pflichten</span>
                {reg.control_count > 0 && <span className="ml-2">{reg.control_count} Controls</span>}
              </div>
            </div>
          ))}

          {supervisoryAuthorities && supervisoryAuthorities.length > 0 && (
            <div className="mt-4 pt-4 border-t border-gray-200">
              <h4 className="text-sm font-semibold text-gray-700 mb-3">Zustaendige Aufsichtsbehoerden</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {supervisoryAuthorities.map((sa, idx) => (
                  <div key={idx} className="flex items-start gap-3 bg-gray-50 rounded-lg p-3">
                    <div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded flex items-center justify-center mt-0.5">
                      <svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                      </svg>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-900">{sa.authority.abbreviation}</span>
                      <span className="text-xs text-gray-500 ml-1">({sa.domain})</span>
                      <p className="text-xs text-gray-600 mt-0.5">{sa.authority.name}</p>
                      {sa.authority.url && (
                        <a href={sa.authority.url} target="_blank" rel="noopener noreferrer" className="text-xs text-purple-600 hover:text-purple-700">
                          Website →
                        </a>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {onGoToObligations && (
            <div className="mt-4 pt-4 border-t border-gray-200">
              <button
                onClick={onGoToObligations}
                className="inline-flex items-center gap-2 px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
              >
                Pflichten anzeigen
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </button>
            </div>
          )}
        </div>
      ) : (
        <p className="text-gray-500 text-sm">Keine anwendbaren Regulierungen ermittelt.</p>
      )}
    </div>
  )
}

// =============================================================================
// HardTriggersPanel
// =============================================================================

export function HardTriggersPanel({
  decision,
  expandedTrigger,
  onToggle,
}: {
  decision: ScopeDecision
  expandedTrigger: number | null
  onToggle: (idx: number) => void
}) {
  if (!decision.triggeredHardTriggers || decision.triggeredHardTriggers.length === 0) return null
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Hard-Trigger</h3>
      <div className="space-y-3">
        {decision.triggeredHardTriggers.map((trigger, idx) => (
          <div key={idx} className="border rounded-lg overflow-hidden border-red-300 bg-red-50">
            <button
              type="button"
              onClick={() => onToggle(idx)}
              className="w-full px-4 py-3 flex items-center justify-between hover:bg-opacity-80 transition-colors"
            >
              <div className="flex items-center gap-3">
                <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <span className="font-medium text-gray-900">{trigger.description}</span>
                <span className="text-xs px-2 py-0.5 rounded-full bg-red-200 text-red-800 font-medium">Min. {trigger.minimumLevel}</span>
              </div>
              <svg className={`w-5 h-5 text-gray-500 transition-transform ${expandedTrigger === idx ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            {expandedTrigger === idx && (
              <div className="px-4 pb-4 pt-2 border-t border-gray-200">
                <p className="text-sm text-gray-700 mb-2">{trigger.description}</p>
                {trigger.legalReference && (
                  <p className="text-xs text-gray-600 mb-2"><span className="font-medium">Rechtsgrundlage:</span> {trigger.legalReference}</p>
                )}
                {trigger.mandatoryDocuments && trigger.mandatoryDocuments.length > 0 && (
                  <p className="text-xs text-gray-700"><span className="font-medium">Pflichtdokumente:</span> {trigger.mandatoryDocuments.join(', ')}</p>
                )}
                {trigger.requiresDSFA && (
                  <p className="text-xs text-orange-700 font-medium mt-1">DSFA erforderlich</p>
                )}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

// =============================================================================
// RequiredDocumentsPanel
// =============================================================================

export function RequiredDocumentsPanel({ decision }: { decision: ScopeDecision }) {
  if (!decision.requiredDocuments || decision.requiredDocuments.length === 0) return null
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Erforderliche Dokumente</h3>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b border-gray-200">
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Dokument</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Priorität</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Aufwand</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Trigger</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Aktion</th>
            </tr>
          </thead>
          <tbody>
            {decision.requiredDocuments.map((doc, idx) => (
              <tr key={idx} className="border-b border-gray-100 last:border-b-0 hover:bg-gray-50">
                <td className="py-3 px-4">
                  <div className="flex items-center gap-2">
                    <span className="font-medium text-gray-900">{DOCUMENT_TYPE_LABELS[doc.documentType] || doc.documentType}</span>
                    {doc.requirement === 'mandatory' && (
                      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Pflicht</span>
                    )}
                  </div>
                </td>
                <td className="py-3 px-4 text-sm text-gray-700 capitalize">{doc.priority}</td>
                <td className="py-3 px-4 text-sm text-gray-700">{doc.estimatedEffort ? `${doc.estimatedEffort}h` : '-'}</td>
                <td className="py-3 px-4">
                  {doc.triggeredBy && doc.triggeredBy.length > 0 && (
                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">{doc.triggeredBy.join(', ')}</span>
                  )}
                </td>
                <td className="py-3 px-4">
                  {doc.sdkStepUrl && (
                    <a href={doc.sdkStepUrl} className="text-sm text-purple-600 hover:text-purple-700 font-medium">Zum SDK-Schritt →</a>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

// =============================================================================
// RiskFlagsPanel
// =============================================================================

export function RiskFlagsPanel({ decision }: { decision: ScopeDecision }) {
  if (!decision.riskFlags || decision.riskFlags.length === 0) return null
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Risiko-Flags</h3>
      <div className="space-y-4">
        {decision.riskFlags.map((flag, idx) => (
          <div key={idx} className="border border-gray-200 rounded-lg p-4">
            <div className="flex items-start justify-between mb-2">
              <h4 className="font-semibold text-gray-900">{flag.message}</h4>
              {getSeverityBadge(flag.severity)}
            </div>
            {flag.legalReference && <p className="text-xs text-gray-500 mb-2">{flag.legalReference}</p>}
            <p className="text-sm text-gray-600"><span className="font-medium">Empfehlung:</span> {flag.recommendation}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

// =============================================================================
// GapAnalysisPanel
// =============================================================================

export function GapAnalysisPanel({ decision }: { decision: ScopeDecision }) {
  if (!decision.gaps || decision.gaps.length === 0) return null
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Gap-Analyse</h3>
      <div className="space-y-4">
        {decision.gaps.map((gap, idx) => (
          <div key={idx} className="border border-gray-200 rounded-lg p-4">
            <div className="flex items-start justify-between mb-2">
              <h4 className="font-semibold text-gray-900">{gap.description}</h4>
              {getSeverityBadge(gap.severity)}
            </div>
            <p className="text-sm text-gray-700 mb-2"><span className="font-medium">Ist:</span> {gap.currentState}</p>
            <p className="text-sm text-gray-600 mb-2"><span className="font-medium">Soll:</span> {gap.targetState}</p>
            <div className="flex items-center gap-4 text-xs text-gray-500">
              <span>Aufwand: ~{gap.effort}h</span>
              <span>Level: {gap.requiredFor}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

// =============================================================================
// NextActionsPanel
// =============================================================================

export function NextActionsPanel({ decision }: { decision: ScopeDecision }) {
  if (!decision.nextActions || decision.nextActions.length === 0) return null
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Nächste Schritte</h3>
      <div className="space-y-4">
        {decision.nextActions.map((action, idx) => (
          <div key={idx} className="flex gap-4">
            <div className="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
              <span className="text-sm font-bold text-purple-700">{idx + 1}</span>
            </div>
            <div className="flex-1">
              <h4 className="font-semibold text-gray-900 mb-1">{action.title}</h4>
              <p className="text-sm text-gray-700 mb-2">{action.description}</p>
              <div className="flex items-center gap-3">
                {action.estimatedEffort > 0 && (
                  <span className="text-xs text-gray-600"><span className="font-medium">Aufwand:</span> ~{action.estimatedEffort}h</span>
                )}
                {action.sdkStepUrl && (
                  <a href={action.sdkStepUrl} className="text-xs text-purple-600 hover:text-purple-700">Zum SDK-Schritt →</a>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

// =============================================================================
// AuditTrailPanel
// =============================================================================

export function AuditTrailPanel({
  decision,
  showAuditTrail,
  onToggle,
}: {
  decision: ScopeDecision
  showAuditTrail: boolean
  onToggle: () => void
}) {
  if (!decision.reasoning || decision.reasoning.length === 0) return null
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <button type="button" onClick={onToggle} className="w-full flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-gray-900">Audit-Trail</h3>
        <svg className={`w-5 h-5 text-gray-500 transition-transform ${showAuditTrail ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {showAuditTrail && (
        <div className="space-y-3">
          {decision.reasoning.map((entry, idx) => (
            <div key={idx} className="border-l-2 border-purple-300 pl-4 py-2">
              <h4 className="font-medium text-gray-900 mb-1">{entry.step}</h4>
              <p className="text-sm text-gray-700 mb-2">{entry.description}</p>
              {entry.factors && entry.factors.length > 0 && (
                <ul className="text-xs text-gray-600 space-y-1">
                  {entry.factors.map((factor, factorIdx) => <li key={factorIdx}>• {factor}</li>)}
                </ul>
              )}
              {entry.impact && <p className="text-xs text-purple-700 font-medium mt-1">{entry.impact}</p>}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}