'use client'

import { ReactNode } from 'react'
import { useTheme } from '@/lib/ThemeContext'

export type InfoBoxVariant = 'info' | 'tip' | 'warning' | 'success' | 'error'

interface InfoBoxProps {
  icon?: string
  title: string
  children: ReactNode
  variant?: InfoBoxVariant
  className?: string
  collapsible?: boolean
  defaultExpanded?: boolean
}

export function InfoBox({
  icon,
  title,
  children,
  variant = 'info',
  className = '',
  collapsible = false,
  defaultExpanded = true
}: InfoBoxProps) {
  const { isDark } = useTheme()

  // Farben basierend auf Variante und Theme
  const getColors = () => {
    const variants = {
      info: {
        dark: 'bg-blue-500/10 border-blue-500/30 text-blue-100',
        light: 'bg-blue-50 border-blue-200 text-blue-800',
        icon: '💡'
      },
      tip: {
        dark: 'bg-green-500/10 border-green-500/30 text-green-100',
        light: 'bg-green-50 border-green-200 text-green-800',
        icon: '✨'
      },
      warning: {
        dark: 'bg-amber-500/10 border-amber-500/30 text-amber-100',
        light: 'bg-amber-50 border-amber-200 text-amber-800',
        icon: '⚠️'
      },
      success: {
        dark: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-100',
        light: 'bg-emerald-50 border-emerald-200 text-emerald-800',
        icon: '✅'
      },
      error: {
        dark: 'bg-red-500/10 border-red-500/30 text-red-100',
        light: 'bg-red-50 border-red-200 text-red-800',
        icon: '❌'
      }
    }
    return variants[variant]
  }

  const colors = getColors()
  const displayIcon = icon || colors.icon

  return (
    <div className={`p-4 rounded-xl border ${isDark ? colors.dark : colors.light} ${className}`}>
      <div className="flex items-start gap-3">
        <span className="text-2xl flex-shrink-0">{displayIcon}</span>
        <div className="flex-1 min-w-0">
          <h4 className="font-medium mb-1">{title}</h4>
          <div className={`text-sm ${isDark ? 'opacity-80' : 'opacity-90'}`}>
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}

// Spezielle Varianten als eigene Komponenten für Convenience
export function TipBox({ title, children, icon, className }: Omit<InfoBoxProps, 'variant'>) {
  return <InfoBox variant="tip" title={title} icon={icon} className={className}>{children}</InfoBox>
}

export function WarningBox({ title, children, icon, className }: Omit<InfoBoxProps, 'variant'>) {
  return <InfoBox variant="warning" title={title} icon={icon} className={className}>{children}</InfoBox>
}

export function SuccessBox({ title, children, icon, className }: Omit<InfoBoxProps, 'variant'>) {
  return <InfoBox variant="success" title={title} icon={icon} className={className}>{children}</InfoBox>
}

// Step-Anleitung Box für Wizards
interface StepBoxProps {
  step: number
  title: string
  children: ReactNode
  isActive?: boolean
  isCompleted?: boolean
  className?: string
}

export function StepBox({
  step,
  title,
  children,
  isActive = false,
  isCompleted = false,
  className = ''
}: StepBoxProps) {
  const { isDark } = useTheme()

  return (
    <div className={`p-4 rounded-xl border transition-all ${
      isCompleted
        ? isDark
          ? 'bg-green-500/10 border-green-500/30'
          : 'bg-green-50 border-green-200'
        : isActive
          ? isDark
            ? 'bg-blue-500/10 border-blue-500/30'
            : 'bg-blue-50 border-blue-200'
          : isDark
            ? 'bg-white/5 border-white/10'
            : 'bg-slate-50 border-slate-200'
    } ${className}`}>
      <div className="flex items-start gap-3">
        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 ${
          isCompleted
            ? 'bg-green-500 text-white'
            : isActive
              ? 'bg-blue-500 text-white'
              : isDark
                ? 'bg-white/20 text-white/60'
                : 'bg-slate-200 text-slate-500'
        }`}>
          {isCompleted ? '✓' : step}
        </div>
        <div className="flex-1 min-w-0">
          <h4 className={`font-medium mb-1 ${
            isCompleted || isActive
              ? isDark ? 'text-white' : 'text-slate-900'
              : isDark ? 'text-white/60' : 'text-slate-500'
          }`}>
            {title}
          </h4>
          <div className={`text-sm ${
            isCompleted || isActive
              ? isDark ? 'text-white/70' : 'text-slate-600'
              : isDark ? 'text-white/40' : 'text-slate-400'
          }`}>
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}

// Feature-Highlight Box
interface FeatureBoxProps {
  icon: string
  title: string
  description: string
  onClick?: () => void
  isSelected?: boolean
  className?: string
}

export function FeatureBox({
  icon,
  title,
  description,
  onClick,
  isSelected = false,
  className = ''
}: FeatureBoxProps) {
  const { isDark } = useTheme()

  return (
    <button
      onClick={onClick}
      className={`w-full p-4 rounded-xl border text-left transition-all ${
        isSelected
          ? isDark
            ? 'bg-purple-500/20 border-purple-500/50 ring-2 ring-purple-500/30'
            : 'bg-purple-50 border-purple-300 ring-2 ring-purple-200'
          : isDark
            ? 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
            : 'bg-white border-slate-200 hover:bg-slate-50 hover:border-slate-300'
      } ${className}`}
    >
      <div className="flex items-start gap-3">
        <span className="text-2xl">{icon}</span>
        <div>
          <h4 className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{title}</h4>
          <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{description}</p>
        </div>
        {isSelected && (
          <div className="ml-auto">
            <div className={`w-6 h-6 rounded-full flex items-center justify-center ${
              isDark ? 'bg-purple-500' : 'bg-purple-500'
            }`}>
              <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </div>
        )}
      </div>
    </button>
  )
}