'use client'

import { useState } from 'react'
import type { DewarpResult, DewarpDetection } from '@/app/(admin)/ai/ocr-kombi/types'
import { METHOD_LABELS } from './dewarp-constants'
import { ConfBar } from './ConfBar'

interface DewarpSummaryBannerProps {
  dewarpResult: DewarpResult
  showGrid: boolean
  onToggleGrid: () => void
}

export function DewarpSummaryBanner({ dewarpResult, showGrid, onToggleGrid }: DewarpSummaryBannerProps) {
  const detections = dewarpResult.detections || []
  const wasRejected = dewarpResult.method_used === 'none' && detections.length > 0
  const wasApplied = dewarpResult.method_used !== 'none' && dewarpResult.method_used !== 'manual' && dewarpResult.method_used !== 'manual_combined'

  const [showDetails, setShowDetails] = useState(false)

  return (
    <div className={`rounded-lg border p-4 ${
      wasRejected
        ? 'bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-700'
        : wasApplied
          ? 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700'
          : 'bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700'
    }`}>
      {/* Status line */}
      <div className="flex items-center gap-2 mb-3">
        <span className={`text-lg ${wasRejected ? '' : wasApplied ? '' : ''}`}>
          {wasRejected ? '\u26A0\uFE0F' : wasApplied ? '\u2705' : '\u2796'}
        </span>
        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
          {wasRejected
            ? 'Quality Gate: Korrektur verworfen (Projektion nicht verbessert)'
            : wasApplied
              ? `Korrektur angewendet: ${dewarpResult.shear_degrees.toFixed(2)}\u00B0`
              : dewarpResult.method_used === 'manual' || dewarpResult.method_used === 'manual_combined'
                ? `Manuelle Korrektur: ${dewarpResult.shear_degrees.toFixed(2)}\u00B0`
                : 'Keine Korrektur noetig'}
        </span>
      </div>

      {/* Key metrics */}
      <div className="flex flex-wrap items-center gap-4 text-sm">
        <div>
          <span className="text-gray-500">Scherung:</span>{' '}
          <span className="font-mono font-medium">{dewarpResult.shear_degrees.toFixed(2)}\u00B0</span>
        </div>
        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
        <div>
          <span className="text-gray-500">Methode:</span>{' '}
          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300">
            {dewarpResult.method_used.includes('+')
              ? `Ensemble (${dewarpResult.method_used.split('+').map(m => METHOD_LABELS[m] || m).join(' + ')})`
              : METHOD_LABELS[dewarpResult.method_used] || dewarpResult.method_used}
          </span>
        </div>
        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
        <div className="flex items-center gap-1.5">
          <span className="text-gray-500">Konfidenz:</span>
          <ConfBar value={dewarpResult.confidence} />
        </div>
      </div>

      {/* Toggles row */}
      <div className="flex gap-2 mt-3">
        <button
          onClick={onToggleGrid}
          className={`text-xs px-3 py-1 rounded-full border transition-colors ${
            showGrid
              ? 'bg-teal-100 border-teal-300 text-teal-700 dark:bg-teal-900/40 dark:border-teal-600 dark:text-teal-300'
              : 'border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400'
          }`}
        >
          Raster
        </button>
        {detections.length > 0 && (
          <button
            onClick={() => setShowDetails(v => !v)}
            className={`text-xs px-3 py-1 rounded-full border transition-colors ${
              showDetails
                ? 'bg-blue-100 border-blue-300 text-blue-700 dark:bg-blue-900/40 dark:border-blue-600 dark:text-blue-300'
                : 'border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400'
            }`}
          >
            Details ({detections.length} Methoden)
          </button>
        )}
      </div>

      {/* Detailed detections */}
      {showDetails && detections.length > 0 && (
        <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
          <div className="text-xs text-gray-500 mb-2">Einzelne Detektoren:</div>
          <div className="space-y-1.5">
            {detections.map((d: DewarpDetection) => {
              const isUsed = dewarpResult.method_used.includes(d.method)
              const aboveThreshold = d.confidence >= 0.5
              return (
                <div
                  key={d.method}
                  className={`flex items-center gap-3 text-xs px-2 py-1.5 rounded ${
                    isUsed
                      ? 'bg-teal-50 dark:bg-teal-900/20'
                      : 'bg-gray-50 dark:bg-gray-800'
                  }`}
                >
                  <span className="w-4 text-center">
                    {isUsed ? '\u2713' : aboveThreshold ? '\u2012' : '\u2717'}
                  </span>
                  <span className={`w-40 ${isUsed ? 'font-medium text-gray-800 dark:text-gray-200' : 'text-gray-500'}`}>
                    {METHOD_LABELS[d.method] || d.method}
                  </span>
                  <span className="font-mono w-16 text-right">
                    {d.shear_degrees.toFixed(2)}\u00B0
                  </span>
                  <ConfBar value={d.confidence} />
                  {!aboveThreshold && (
                    <span className="text-gray-400 ml-1">(unter Schwelle)</span>
                  )}
                </div>
              )
            })}
          </div>
          {wasRejected && (
            <div className="mt-2 text-xs text-amber-600 dark:text-amber-400">
              Die Korrektur wurde verworfen, weil die horizontale Projektions-Varianz nach Anwendung nicht besser war als vorher.
            </div>
          )}
        </div>
      )}
    </div>
  )
}