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

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

export function ValidationSummary({ errors, onSelectNode }: 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)
    }
  }

  return (
    <div
      className={cn(
        'rounded-lg border',
        errorItems.length > 0
          ? 'border-destructive/50 bg-destructive/5'
          : 'border-yellow-500/50 bg-yellow-50 dark:bg-yellow-900/10'
      )}
    >
      {/* Header */}
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className={cn(
          'flex w-full items-center justify-between p-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5',
          errorItems.length > 0 ? 'text-destructive' : 'text-yellow-700 dark:text-yellow-500'
        )}
      >
        <div className="flex items-center gap-2">
          {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>
        </div>
        {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
      </button>

      {/* 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-destructive/10'
                  : 'cursor-default'
              )}
            >
              <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-destructive" />
              <div className="flex-1">
                <p className="text-destructive">{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-100 dark:hover:bg-yellow-900/20'
                  : 'cursor-default'
              )}
            >
              <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-yellow-600 dark:text-yellow-500" />
              <div className="flex-1">
                <p className="text-yellow-700 dark:text-yellow-500">{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>
  )
}