'use client'
import React, { useState } from 'react'
import type { ScopeDecision, ApplicableRegulation, SupervisoryAuthorityInfo } from '@/lib/sdk/compliance-scope-types'
import {
  LevelCard,
  ScoreBreakdown,
  RegulationsPanel,
  HardTriggersPanel,
  RequiredDocumentsPanel,
  RiskFlagsPanel,
  GapAnalysisPanel,
  NextActionsPanel,
  AuditTrailPanel,
} from './ScopeDecisionSections'

interface ScopeDecisionTabProps {
  decision: ScopeDecision | null
  answers?: unknown[]
  onBackToWizard?: () => void
  onGoToExport?: () => void
  canEvaluate?: boolean
  onEvaluate?: () => void
  isEvaluating?: boolean
  applicableRegulations?: ApplicableRegulation[]
  supervisoryAuthorities?: SupervisoryAuthorityInfo[]
  regulationAssessmentLoading?: boolean
  onGoToObligations?: () => void
}

export function ScopeDecisionTab({
  decision,
  onBackToWizard,
  onGoToExport,
  canEvaluate,
  onEvaluate,
  isEvaluating,
  applicableRegulations,
  supervisoryAuthorities,
  regulationAssessmentLoading,
  onGoToObligations,
}: 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>
    )
  }

  return (
    <div className="space-y-6">
      <LevelCard decision={decision} />

      <ScoreBreakdown decision={decision} />

      <RegulationsPanel
        applicableRegulations={applicableRegulations}
        supervisoryAuthorities={supervisoryAuthorities}
        regulationAssessmentLoading={regulationAssessmentLoading}
        onGoToObligations={onGoToObligations}
      />

      <HardTriggersPanel
        decision={decision}
        expandedTrigger={expandedTrigger}
        onToggle={(idx) => setExpandedTrigger(expandedTrigger === idx ? null : idx)}
      />

      <RequiredDocumentsPanel decision={decision} />

      <RiskFlagsPanel decision={decision} />

      <GapAnalysisPanel decision={decision} />

      <NextActionsPanel decision={decision} />

      {/* Action Buttons */}
      <div className="flex items-center gap-3">
        {onBackToWizard && (
          <button
            onClick={onBackToWizard}
            className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
          >
            Zurueck zum Wizard
          </button>
        )}
        {canEvaluate && onEvaluate && (
          <button
            onClick={onEvaluate}
            disabled={isEvaluating}
            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
          >
            {isEvaluating ? 'Bewertung laeuft...' : 'Neu bewerten'}
          </button>
        )}
        {onGoToExport && (
          <button
            onClick={onGoToExport}
            className="px-4 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
          >
            Zum Export
          </button>
        )}
      </div>

      <AuditTrailPanel
        decision={decision}
        showAuditTrail={showAuditTrail}
        onToggle={() => setShowAuditTrail(!showAuditTrail)}
      />
    </div>
  )
}