'use client'
import React, { useState } from 'react'
import type { ScopeDecision, ComplianceDepthLevel } 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'

interface ScopeDecisionTabProps {
  decision: ScopeDecision | null
}

export function ScopeDecisionTab({ decision }: ScopeDecisionTabProps) {
  const [expandedTrigger, setExpandedTrigger] = useState<number | null>(null)
  const [showAuditTrail, setShowAuditTrail] = useState(false)

  if (!decision) {
    return (
      <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
          <svg className="w-8 h-8 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>
        </div>
        <h3 className="text-xl font-semibold text-gray-900 mb-2">Keine Entscheidung vorhanden</h3>
        <p className="text-gray-600">Bitte führen Sie zuerst das Scope-Profiling durch.</p>
      </div>
    )
  }

  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'
  }

  const getSeverityBadge = (severity: 'low' | 'medium' | 'high' | 'critical') => {
    const colors = {
      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 = {
      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[severity]}`}>
        {labels[severity]}
      </span>
    )
  }

  const renderScoreBar = (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>
    )
  }

  return (
    <div className="space-y-6">
      {/* Level Determination */}
      <div className={`${DEPTH_LEVEL_COLORS[decision.level].bg} border-2 ${DEPTH_LEVEL_COLORS[decision.level].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.level].badge} rounded-xl flex items-center justify-center`}>
            <span className={`text-3xl font-bold ${DEPTH_LEVEL_COLORS[decision.level].text}`}>
              {decision.level}
            </span>
          </div>
          <div className="flex-1">
            <h2 className={`text-2xl font-bold ${DEPTH_LEVEL_COLORS[decision.level].text} mb-2`}>
              {DEPTH_LEVEL_LABELS[decision.level]}
            </h2>
            <p className="text-gray-700 mb-3">{DEPTH_LEVEL_DESCRIPTIONS[decision.level]}</p>
            {decision.reasoning && (
              <p className="text-sm text-gray-600 italic">{decision.reasoning}</p>
            )}
          </div>
        </div>
      </div>

      {/* Score Breakdown */}
      {decision.scores && (
        <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">
            {renderScoreBar('Risiko-Score', decision.scores.riskScore)}
            {renderScoreBar('Komplexitäts-Score', decision.scores.complexityScore)}
            {renderScoreBar('Assurance-Score', decision.scores.assuranceScore)}
            <div className="pt-4 border-t border-gray-200">
              {renderScoreBar('Gesamt-Score', decision.scores.compositeScore)}
            </div>
          </div>
        </div>
      )}

      {/* Hard Triggers */}
      {decision.hardTriggers && decision.hardTriggers.length > 0 && (
        <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.hardTriggers.map((trigger, idx) => (
              <div
                key={idx}
                className={`border rounded-lg overflow-hidden ${
                  trigger.matched ? 'border-red-300 bg-red-50' : 'border-gray-200 bg-gray-50'
                }`}
              >
                <button
                  type="button"
                  onClick={() => setExpandedTrigger(expandedTrigger === idx ? null : 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">
                    {trigger.matched && (
                      <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.label}</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.matchedValue && (
                      <p className="text-xs text-gray-700">
                        <span className="font-medium">Erfasster Wert:</span> {trigger.matchedValue}
                      </p>
                    )}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Required Documents */}
      {decision.requiredDocuments && decision.requiredDocuments.length > 0 && (
        <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">Typ</th>
                  <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Tiefe</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">Status</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.isMandatory && (
                          <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">{doc.depthDescription}</td>
                    <td className="py-3 px-4 text-sm text-gray-700">
                      {doc.effortEstimate ? `${doc.effortEstimate.days} Tage` : '-'}
                    </td>
                    <td className="py-3 px-4">
                      {doc.triggeredByHardTrigger && (
                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
                          Hard-Trigger
                        </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>
      )}

      {/* Risk Flags */}
      {decision.riskFlags && decision.riskFlags.length > 0 && (
        <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.title}</h4>
                  {getSeverityBadge(flag.severity)}
                </div>
                <p className="text-sm text-gray-700 mb-2">{flag.description}</p>
                <p className="text-sm text-gray-600">
                  <span className="font-medium">Empfehlung:</span> {flag.recommendation}
                </p>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Gap Analysis */}
      {decision.gapAnalysis && decision.gapAnalysis.length > 0 && (
        <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.gapAnalysis.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.title}</h4>
                  {getSeverityBadge(gap.severity)}
                </div>
                <p className="text-sm text-gray-700 mb-2">{gap.description}</p>
                <p className="text-sm text-gray-600 mb-2">
                  <span className="font-medium">Empfehlung:</span> {gap.recommendation}
                </p>
                {gap.relatedDocuments && gap.relatedDocuments.length > 0 && (
                  <div className="mt-2">
                    <span className="text-xs text-gray-500">Betroffene Dokumente: </span>
                    {gap.relatedDocuments.map((doc, docIdx) => (
                      <span
                        key={docIdx}
                        className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 mr-1"
                      >
                        {DOCUMENT_TYPE_LABELS[doc] || doc}
                      </span>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Next Actions */}
      {decision.nextActions && decision.nextActions.length > 0 && (
        <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">{action.priority}</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.effortDays && (
                      <span className="text-xs text-gray-600">
                        <span className="font-medium">Aufwand:</span> {action.effortDays} Tage
                      </span>
                    )}
                    {action.relatedDocuments && action.relatedDocuments.length > 0 && (
                      <span className="text-xs text-gray-600">
                        <span className="font-medium">Dokumente:</span> {action.relatedDocuments.length}
                      </span>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Audit Trail */}
      {decision.auditTrail && decision.auditTrail.length > 0 && (
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <button
            type="button"
            onClick={() => setShowAuditTrail(!showAuditTrail)}
            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.auditTrail.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.details && entry.details.length > 0 && (
                    <ul className="text-xs text-gray-600 space-y-1">
                      {entry.details.map((detail, detailIdx) => (
                        <li key={detailIdx}>• {detail}</li>
                      ))}
                    </ul>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  )
}