import { useState } from 'react'
import { X, Check, SkipForward, Sparkles, ChevronDown, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { AIFixProposal } from '@/types'

interface AIFixReviewModalProps {
  fixes: AIFixProposal[]
  onApply: (fix: AIFixProposal) => void
  onApplyAll: () => void
  onClose: () => void
}

export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixReviewModalProps) {
  const [appliedIds, setAppliedIds] = useState<Set<string>>(new Set())
  const [skippedIds, setSkippedIds] = useState<Set<string>>(new Set())
  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(fixes.map(f => f.target_node_id)))

  const handleApply = (fix: AIFixProposal) => {
    onApply(fix)
    setAppliedIds(prev => new Set(prev).add(fix.target_node_id))
  }

  const handleSkip = (fix: AIFixProposal) => {
    setSkippedIds(prev => new Set(prev).add(fix.target_node_id))
  }

  const toggleExpanded = (id: string) => {
    setExpandedIds(prev => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  const pendingFixes = fixes.filter(
    f => !appliedIds.has(f.target_node_id) && !skippedIds.has(f.target_node_id)
  )
  const allHandled = pendingFixes.length === 0

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
      <div className="relative flex h-[80vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-border px-6 py-4">
          <div className="flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-primary" />
            <h2 className="text-lg font-semibold text-foreground">
              AI Fix Proposals ({fixes.length})
            </h2>
          </div>
          <button
            onClick={onClose}
            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto p-4 space-y-3">
          {fixes.map((fix) => {
            const isApplied = appliedIds.has(fix.target_node_id)
            const isSkipped = skippedIds.has(fix.target_node_id)
            const isExpanded = expandedIds.has(fix.target_node_id)

            return (
              <div
                key={fix.target_node_id}
                className={cn(
                  'rounded-lg border p-4',
                  isApplied
                    ? 'border-emerald-400/30 bg-emerald-400/5'
                    : isSkipped
                      ? 'border-border bg-accent/30 opacity-60'
                      : 'border-border bg-card'
                )}
              >
                {/* Fix header */}
                <div className="flex items-start justify-between gap-3">
                  <div className="flex-1">
                    <p className="text-sm text-red-400 mb-1">{fix.error_message}</p>
                    <p className="text-sm text-foreground">{fix.description}</p>
                    <p className="text-xs text-muted-foreground mt-1">
                      Node: {fix.target_node_id}
                    </p>
                  </div>
                  {isApplied && (
                    <span className="flex items-center gap-1 rounded-full bg-emerald-400/10 px-2 py-1 text-xs text-emerald-400">
                      <Check className="h-3 w-3" /> Applied
                    </span>
                  )}
                  {isSkipped && (
                    <span className="text-xs text-muted-foreground">Skipped</span>
                  )}
                </div>

                {/* Expand/collapse detail */}
                {!isApplied && !isSkipped && (
                  <>
                    <button
                      onClick={() => toggleExpanded(fix.target_node_id)}
                      className="mt-2 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
                    >
                      {isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
                      {isExpanded ? 'Hide' : 'Show'} details
                    </button>

                    {isExpanded && (
                      <div className="mt-3 grid grid-cols-2 gap-3">
                        <div>
                          <p className="text-xs font-medium text-muted-foreground mb-1">Before</p>
                          <pre className="overflow-x-auto rounded bg-accent/50 p-2 text-xs text-muted-foreground max-h-48 overflow-y-auto">
                            {JSON.stringify(fix.original_node, null, 2)}
                          </pre>
                        </div>
                        <div>
                          <p className="text-xs font-medium text-emerald-400 mb-1">After</p>
                          <pre className="overflow-x-auto rounded bg-emerald-400/5 p-2 text-xs text-foreground max-h-48 overflow-y-auto">
                            {JSON.stringify(fix.fixed_node, null, 2)}
                          </pre>
                        </div>
                      </div>
                    )}

                    {/* Action buttons */}
                    <div className="mt-3 flex gap-2">
                      <button
                        onClick={() => handleApply(fix)}
                        className="flex items-center gap-1 rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-sm shadow-primary/20 hover:opacity-90"
                      >
                        <Check className="h-3 w-3" />
                        Apply
                      </button>
                      <button
                        onClick={() => handleSkip(fix)}
                        className="flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
                      >
                        <SkipForward className="h-3 w-3" />
                        Skip
                      </button>
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between border-t border-border px-6 py-4">
          <button
            onClick={onClose}
            className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
          >
            {allHandled ? 'Done' : 'Cancel'}
          </button>
          {!allHandled && (
            <button
              onClick={onApplyAll}
              className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
            >
              Apply All ({pendingFixes.length})
            </button>
          )}
        </div>
      </div>
    </div>
  )
}