import { useState } from 'react'
import { AlertCircle, AlertTriangle, ChevronDown, ChevronUp, Sparkles, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { ValidationError } from '@/store/treeEditorStore'

interface ValidationSummaryProps {
  errors: ValidationError[]
  onSelectNode: (nodeId: string) => void
  onFixWithAI?: () => void
  isFixing?: boolean
}

export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing }: ValidationSummaryProps) {
  const [isExpanded, setIsExpanded] = useState(true)

  const errorItems = errors.filter(e => e.severity === 'error')
  const warningItems = errors.filter(e => e.severity === 'warning')

  if (errors.length === 0) return null

  const handleErrorClick = (error: ValidationError) => {
    if (error.nodeId) {
      onSelectNode(error.nodeId)
    }
  }

  const hasFixableErrors = errorItems.some(e => e.nodeId)

  return (
    <div
      className={cn(
        'rounded-lg border',
        errorItems.length > 0
          ? 'border-red-400/30 bg-red-400/5'
          : 'border-yellow-400/30 bg-yellow-400/5'
      )}
    >
      {/* Header */}
      <div
        className={cn(
          'flex w-full items-center justify-between p-3 transition-colors',
          errorItems.length > 0 ? 'text-red-400' : 'text-yellow-400'
        )}
      >
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className="flex items-center gap-2 text-left hover:opacity-80"
        >
          {errorItems.length > 0 ? (
            <AlertCircle className="h-5 w-5" />
          ) : (
            <AlertTriangle className="h-5 w-5" />
          )}
          <span className="font-medium">
            {errorItems.length > 0 && (
              <>
                {errorItems.length} {errorItems.length === 1 ? 'Error' : 'Errors'}
              </>
            )}
            {errorItems.length > 0 && warningItems.length > 0 && ', '}
            {warningItems.length > 0 && (
              <>
                {warningItems.length} {warningItems.length === 1 ? 'Warning' : 'Warnings'}
              </>
            )}
          </span>
          {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
        </button>

        {/* Fix with AI button */}
        {onFixWithAI && hasFixableErrors && (
          <button
            onClick={onFixWithAI}
            disabled={isFixing}
            className={cn(
              'flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors',
              isFixing
                ? 'bg-primary/10 text-primary cursor-wait'
                : 'bg-gradient-brand text-white shadow-sm shadow-primary/20 hover:opacity-90'
            )}
          >
            {isFixing ? (
              <>
                <Loader2 className="h-3 w-3 animate-spin" />
                Generating fixes...
              </>
            ) : (
              <>
                <Sparkles className="h-3 w-3" />
                Fix with AI
              </>
            )}
          </button>
        )}
      </div>

      {/* Error/Warning List */}
      {isExpanded && (
        <div className="space-y-1 border-t border-current/10 p-3">
          {/* Errors */}
          {errorItems.map((error, index) => (
            <button
              key={`error-${index}`}
              onClick={() => handleErrorClick(error)}
              className={cn(
                'flex w-full items-start gap-2 rounded p-2 text-left text-sm transition-colors',
                error.nodeId
                  ? 'cursor-pointer hover:bg-red-400/10'
                  : 'cursor-default'
              )}
            >
              <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-red-400" />
              <div className="flex-1">
                <p className="text-red-400">{error.message}</p>
                {error.nodeId && (
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    Click to select node: {error.nodeId}
                  </p>
                )}
              </div>
            </button>
          ))}

          {/* Warnings */}
          {warningItems.map((warning, index) => (
            <button
              key={`warning-${index}`}
              onClick={() => handleErrorClick(warning)}
              className={cn(
                'flex w-full items-start gap-2 rounded p-2 text-left text-sm transition-colors',
                warning.nodeId
                  ? 'cursor-pointer hover:bg-yellow-400/10'
                  : 'cursor-default'
              )}
            >
              <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-yellow-400" />
              <div className="flex-1">
                <p className="text-yellow-400">{warning.message}</p>
                {warning.nodeId && (
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    Click to select node: {warning.nodeId}
                  </p>
                )}
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}