"use client"

import { useState, memo } from "react"
import {
  ChevronDown,
  FlaskConical,
  CheckCircle2,
} from "lucide-react"
import { CodeHighlighter, CODE_STYLE } from "./code-highlighter"
import type { TimelineSectionContent } from "./timeline-types"

function getEmptyMessage(
  variant: "generated" | "instrumented" | "instrumentedPerf"
): string {
  switch (variant) {
    case "generated":
      return "No generated test available"
    case "instrumented":
      return "No instrumented behavior test available"
    case "instrumentedPerf":
      return "No instrumented perf test available"
    default:
      return "No test available"
  }
}

interface TestContentProps {
  content: Extract<TimelineSectionContent, { type: "tests" }>
}

export const TestContent = memo(function TestContent({ content }: TestContentProps) {
  const [showDetails, setShowDetails] = useState(false)
  const [expandedTest, setExpandedTest] = useState<number | null>(null)
  const [activeVariant, setActiveVariant] = useState<"generated" | "instrumented" | "instrumentedPerf">("generated")

  const testCount = content.testGroups.length
  const hasInstrumented = content.testGroups.some(g => g.instrumented)
  const hasInstrumentedPerf = content.testGroups.some(g => g.instrumentedPerf)

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="flex items-center gap-2">
            <CheckCircle2 className="h-5 w-5 text-green-500" />
            <span className="text-base font-medium text-zinc-700 dark:text-zinc-300">
              {testCount} test{testCount !== 1 ? "s" : ""} generated
            </span>
          </div>
          <div className="flex items-center gap-2">
            {content.testFramework && (
              <span className="text-xs px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-300 rounded">
                {content.testFramework}
              </span>
            )}
            {hasInstrumented && (
              <span className="text-xs px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-300 rounded">
                +behavior
              </span>
            )}
            {hasInstrumentedPerf && (
              <span className="text-xs px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-300 rounded">
                +perf
              </span>
            )}
          </div>
        </div>
        <button
          onClick={() => setShowDetails(!showDetails)}
          className="px-3 py-1.5 text-xs rounded-md bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors flex items-center gap-1.5"
        >
          {showDetails ? "Hide Details" : "View Details"}
          <ChevronDown className={`h-3.5 w-3.5 transition-transform duration-200 ${showDetails ? "" : "-rotate-90"}`} />
        </button>
      </div>

      {showDetails && (
        <div className="space-y-3 pt-2 border-t border-zinc-200 dark:border-zinc-700">
          {content.testGroups.map((group) => {
            const isExpanded = expandedTest === group.index
            const hasMultipleVariants = [group.generated, group.instrumented, group.instrumentedPerf].filter(Boolean).length > 1

            const currentCode = (() => {
              switch (activeVariant) {
                case "generated":
                  return group.generated
                case "instrumented":
                  return group.instrumented
                case "instrumentedPerf":
                  return group.instrumentedPerf
                default:
                  return null
              }
            })()

            return (
              <div key={group.index} className="rounded-md border border-zinc-200 dark:border-zinc-700 overflow-hidden">
                <button
                  onClick={() => setExpandedTest(isExpanded ? null : group.index)}
                  className="w-full px-3 py-2 bg-zinc-100 dark:bg-zinc-800 flex items-center justify-between hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"
                >
                  <div className="flex items-center gap-2">
                    <FlaskConical className="h-3.5 w-3.5 text-zinc-400" />
                    <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
                      Test {group.index}
                    </span>
                    <div className="flex items-center gap-1">
                      {group.generated && (
                        <span className="text-[10px] px-1 py-0.5 bg-zinc-200 dark:bg-zinc-600 text-zinc-600 dark:text-zinc-300 rounded">
                          gen
                        </span>
                      )}
                      {group.instrumented && (
                        <span className="text-[10px] px-1 py-0.5 bg-zinc-200 dark:bg-zinc-600 text-zinc-600 dark:text-zinc-300 rounded">
                          beh
                        </span>
                      )}
                      {group.instrumentedPerf && (
                        <span className="text-[10px] px-1 py-0.5 bg-zinc-200 dark:bg-zinc-600 text-zinc-600 dark:text-zinc-300 rounded">
                          perf
                        </span>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-zinc-500">
                      {group.generated?.lines ?? group.instrumented?.lines ?? group.instrumentedPerf?.lines} lines
                    </span>
                    <ChevronDown className={`h-4 w-4 text-zinc-400 transition-transform duration-200 ${isExpanded ? "" : "-rotate-90"}`} />
                  </div>
                </button>

                {isExpanded && (
                  <div>
                    {hasMultipleVariants && (
                      <div className="flex items-center gap-1 px-3 py-2 bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
                        {group.generated && (
                          <button
                            onClick={() => setActiveVariant("generated")}
                            className={`px-2 py-1 text-xs rounded transition-colors ${
                              activeVariant === "generated"
                                ? "bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-zinc-100"
                                : "text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"
                            }`}
                          >
                            Generated
                          </button>
                        )}
                        {group.instrumented && (
                          <button
                            onClick={() => setActiveVariant("instrumented")}
                            className={`px-2 py-1 text-xs rounded transition-colors ${
                              activeVariant === "instrumented"
                                ? "bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-zinc-100"
                                : "text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"
                            }`}
                          >
                            Behavior
                          </button>
                        )}
                        {group.instrumentedPerf && (
                          <button
                            onClick={() => setActiveVariant("instrumentedPerf")}
                            className={`px-2 py-1 text-xs rounded transition-colors ${
                              activeVariant === "instrumentedPerf"
                                ? "bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-zinc-100"
                                : "text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"
                            }`}
                          >
                            Perf
                          </button>
                        )}
                      </div>
                    )}

                    <div className="max-h-[50vh] overflow-y-auto">
                      {currentCode ? (
                        <CodeHighlighter
                          language="python"
                          code={currentCode.code}
                          customStyle={CODE_STYLE}
                        />
                      ) : (
                        <div className="p-4 text-sm text-zinc-500 dark:text-zinc-400 italic">
                          {getEmptyMessage(activeVariant)}
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
})
