import * as React from "react"
import { CheckCircle2, XCircle, Clock, ChevronDown, ChevronRight, Info, AlertCircle } from "lucide-react"
import { cn } from "@/lib/utils"

interface TestSummary {
  total: number;
  passed: number;
  failed: number;
  skipped: number;
  duration: number;
}

const TestResultsContext = React.createContext<{
  summary: TestSummary;
} | null>(null)

export function TestResults({ summary, children, className }: { summary: TestSummary, children: React.ReactNode, className?: string }) {
  return (
    <TestResultsContext.Provider value={{ summary }}>
      <div className={cn("bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm", className)}>
        {children}
      </div>
    </TestResultsContext.Provider>
  )
}

export function TestResultsHeader({ children }: { children: React.ReactNode }) {
  return (
    <div className="px-5 py-4 border-b border-slate-100 bg-slate-50/30 flex items-center justify-between">
      {children}
    </div>
  )
}

export function TestResultsSummary() {
  const context = React.useContext(TestResultsContext)
  if (!context) return null
  const { summary } = context
  return (
    <div className="flex items-center gap-4">
      <div className="flex items-center gap-1.5">
        <div className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
        <span className="text-[11px] font-black text-slate-600 uppercase tracking-tighter">{summary.passed} Passed</span>
      </div>
      <div className="flex items-center gap-1.5">
        <div className="w-2.5 h-2.5 rounded-full bg-rose-500" />
        <span className="text-[11px] font-black text-slate-600 uppercase tracking-tighter">{summary.failed} Failed</span>
      </div>
    </div>
  )
}

export function TestResultsDuration() {
  const context = React.useContext(TestResultsContext)
  if (!context) return null
  return (
    <div className="flex items-center gap-1.5 text-slate-400">
      <Clock className="w-3.5 h-3.5" />
      <span className="text-[11px] font-black uppercase tracking-widest">
        {context.summary.duration}ms Analysis
      </span>
    </div>
  )
}

export function TestResultsProgress() {
  const context = React.useContext(TestResultsContext)
  if (!context) return null
  const { summary } = context
  const percent = (summary.passed / (summary.total || 1)) * 100
  return (
    <div className="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
      <div 
        className="h-full bg-emerald-500 transition-all duration-1000" 
        style={{ width: `${percent}%` }} 
      />
    </div>
  )
}

export function TestResultsContent({ children }: { children: React.ReactNode }) {
  return <div className="divide-y divide-slate-50">{children}</div>
}

export function TestSuite({ name, status, defaultOpen = false, children }: { name: string; status: 'passed' | 'failed' | 'skipped'; defaultOpen?: boolean; children: React.ReactNode }) {
  const [isOpen, setIsOpen] = React.useState(defaultOpen)
  return (
    <div className="group">
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="w-full px-5 py-3.5 flex items-center justify-between hover:bg-slate-50/50 transition-all"
      >
        <div className="flex items-center gap-3">
          {isOpen ? <ChevronDown className="w-4 h-4 text-slate-400" /> : <ChevronRight className="w-4 h-4 text-slate-400" />}
          <span className="text-[13px] font-black text-slate-900 tracking-tight">{name}</span>
          {status === 'passed' ? (
            <div className="px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-600 text-[9px] font-black uppercase">Success</div>
          ) : (
            <div className="px-2 py-0.5 rounded-full bg-rose-50 text-rose-600 text-[9px] font-black uppercase">Issues Found</div>
          )}
        </div>
      </button>
      {isOpen && <div className="px-5 pb-4 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">{children}</div>}
    </div>
  )
}

export function TestSuiteName() { return null }
export function TestSuiteContent({ children }: { children: React.ReactNode }) {
  return <div className="space-y-1 ml-7">{children}</div>
}

export function Test({ name, status, duration, children }: { name: string; status: 'passed' | 'failed' | 'skipped'; duration?: number; children?: React.ReactNode }) {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between py-1 group/test">
        <div className="flex items-center gap-2.5">
          {status === 'passed' && <CheckCircle2 className="w-4 h-4 text-emerald-500 shadow-sm" />}
          {status === 'failed' && <XCircle className="w-4 h-4 text-rose-500" />}
          {status === 'skipped' && <Info className="w-4 h-4 text-slate-300" />}
          <span className={cn("text-[12px] font-bold text-slate-600", status === 'failed' && "text-rose-600")}>{name}</span>
        </div>
        {duration && <span className="text-[10px] font-medium text-slate-400 tabular-nums">{duration}ms</span>}
      </div>
      {children && <div className="ml-6 mt-1 flex flex-col gap-1.5">{children}</div>}
    </div>
  )
}

export function TestError({ children }: { children: React.ReactNode }) {
  return (
    <div className="p-3 bg-rose-50/50 border border-rose-100 rounded-lg space-y-1.5 animate-in zoom-in-95 duration-200">
      {children}
    </div>
  )
}

export function TestErrorMessage({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex items-start gap-2 text-rose-700 text-[11px] font-bold leading-tight">
      <AlertCircle className="w-3.5 h-3.5 shrink-0" />
      {children}
    </div>
  )
}

export function TestErrorStack({ children }: { children: React.ReactNode }) {
  return (
    <div className="text-[10px] text-rose-400 font-medium leading-relaxed font-mono mt-1 opacity-70">
      {children}
    </div>
  )
}