"use client"

import React, { memo } from "react"
import {
  Clock,
  CheckCircle2,
  XCircle,
  AlertCircle,
} from "lucide-react"
import { TYPE_CONFIG, formatTime } from "./timeline-helpers"
import { LLMCallDebugDialog } from "./llm-call-debug-dialog"
import { TestContent } from "./test-content"
import { CandidateContent } from "./candidate-content"
import { RankingContent, SummaryContent } from "./ranking-content"
import type { TimelineSection } from "./timeline-types"

function getStatusIcon(status: string): React.JSX.Element {
  switch (status) {
    case "success":
      return <CheckCircle2 className="h-4 w-4 text-green-500" />
    case "failed":
      return <XCircle className="h-4 w-4 text-red-500" />
    case "partial":
      return <AlertCircle className="h-4 w-4 text-yellow-500" />
    default:
      return <Clock className="h-4 w-4 text-zinc-400" />
  }
}

export const TimelineSectionCard = memo(function TimelineSectionCard({
  section,
  isActive,
  index,
  totalSections,
}: {
  section: TimelineSection
  isActive: boolean
  index: number
  totalSections: number
}) {
  const config = TYPE_CONFIG[section.type]
  const Icon = config.icon

  return (
    <div
      className={`relative ${
        isActive ? "opacity-100" : "opacity-60"
      }`}
    >
      <div className="absolute right-6 top-0 bottom-0 w-px bg-zinc-200 dark:bg-zinc-700" />

      <div className="mr-14 mb-6">
        <div className="flex items-center gap-3 mb-2">
          <span className="text-xs font-mono text-zinc-500 dark:text-zinc-400">
            +{formatTime(section.timestamp)}
          </span>
          {section.duration && (
            <>
              <span className="text-zinc-300 dark:text-zinc-600">{"\u00b7"}</span>
              <span className="text-xs text-zinc-400 dark:text-zinc-500">
                {formatTime(section.duration)}
              </span>
            </>
          )}
          <div className="flex-1" />
          <span className="text-xs text-zinc-400 dark:text-zinc-500">
            {index + 1}/{totalSections}
          </span>
        </div>

        <div
          className={`rounded-md border overflow-hidden ${
            isActive
              ? "border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800"
              : "border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50"
          }`}
        >
          <div className="px-4 py-3 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800">
            <div className="flex items-center gap-3">
              <Icon className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
              <div className="flex-1">
                <h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                  {section.title}
                </h3>
                {section.subtitle && (
                  <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
                    {section.subtitle}
                  </p>
                )}
              </div>
              <div className="flex items-center gap-2">
                {getStatusIcon(section.status)}
                {section.model && (
                  <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">
                    {section.model}
                  </span>
                )}
                {section.cost != null && (
                  <span className="text-xs text-zinc-500 dark:text-zinc-400">
                    ${section.cost.toFixed(4)}
                  </span>
                )}
                {section.debugData && (
                  <LLMCallDebugDialog
                    debugData={section.debugData}
                    title={section.title}
                    model={section.model}
                  />
                )}
              </div>
            </div>
          </div>

          <div className="p-4 bg-white dark:bg-zinc-800">
            {section.content.type === "tests" && (
              <TestContent content={section.content} />
            )}
            {(section.content.type === "candidate" ||
              section.content.type === "refinement") && (
              <CandidateContent content={section.content} isActive={isActive} />
            )}
            {section.content.type === "ranking" && (
              <RankingContent content={section.content} />
            )}
            {section.content.type === "summary" && (
              <SummaryContent content={section.content} />
            )}
          </div>
        </div>
      </div>
    </div>
  )
})
