"use client"

import { memo, useMemo } from "react"
import { CodeHighlighter, CODE_STYLE } from "./code-highlighter"
import { stripCodeHeader, formatTime } from "./timeline-helpers"
import type { TimelineSectionContent } from "./timeline-types"

interface RankingContentProps {
  content: Extract<TimelineSectionContent, { type: "ranking" }>
}

export const RankingContent = memo(function RankingContent({ content }: RankingContentProps) {
  const strippedCodes = useMemo(
    () => new Map(content.rankings.map(item => [item.id, stripCodeHeader(item.code)])),
    [content.rankings]
  )

  return (
    <div className="space-y-4">
      {content.explanation && (
        <div className="p-3 bg-zinc-50 dark:bg-zinc-800/50 rounded border border-zinc-200 dark:border-zinc-700">
          <p className="text-sm text-zinc-600 dark:text-zinc-400 whitespace-pre-wrap">
            {content.explanation}
          </p>
        </div>
      )}

      {content.rankings.length >= 1 && (
        <div className="space-y-4">
          {content.rankings.map((item) => (
            <div
              key={item.id}
              className={`rounded border ${
                item.isBest
                  ? "border-emerald-300 dark:border-emerald-700"
                  : "border-zinc-300 dark:border-zinc-600"
              }`}
            >
              <div
                className={`flex items-center gap-2 px-3 py-2 border-b flex-wrap ${
                  item.isBest
                    ? "bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800"
                    : "bg-zinc-100 dark:bg-zinc-700 border-zinc-200 dark:border-zinc-700"
                }`}
              >
                <span className="text-sm font-medium text-zinc-900 dark:text-white">
                  {item.label}
                </span>
                <span className="bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 text-xs px-2 py-0.5 rounded font-semibold">
                  Rank #{item.rank}
                </span>
                {item.isBest && (
                  <span className="bg-emerald-100 dark:bg-emerald-900 text-emerald-800 dark:text-emerald-200 text-xs px-2 py-0.5 rounded font-semibold">
                    Best
                  </span>
                )}
                {item.isBest && content.usedForPr && (
                  <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-2 py-0.5 rounded font-semibold">
                    Used for PR
                  </span>
                )}
              </div>
              <div className="max-h-80 overflow-auto">
                <CodeHighlighter
                  code={strippedCodes.get(item.id)!}
                  language="python"
                  customStyle={CODE_STYLE}
                />
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
})

interface SummaryContentProps {
  content: Extract<TimelineSectionContent, { type: "summary" }>
}

export const SummaryContent = memo(function SummaryContent({ content }: SummaryContentProps) {
  const { metrics } = content
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-md">
        <div className="text-xs text-zinc-500 dark:text-zinc-400 mb-1">Total Duration</div>
        <div className="text-xl font-semibold text-zinc-900 dark:text-white">
          {formatTime(metrics.totalDuration)}
        </div>
      </div>
      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-md">
        <div className="text-xs text-zinc-500 dark:text-zinc-400 mb-1">Total Cost</div>
        <div className="text-xl font-semibold text-zinc-900 dark:text-white">
          ${metrics.totalCost.toFixed(4)}
        </div>
      </div>
      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-md">
        <div className="text-xs text-zinc-500 dark:text-zinc-400 mb-1">Total Tokens</div>
        <div className="text-xl font-semibold text-zinc-900 dark:text-white">
          {metrics.totalTokens.toLocaleString()}
        </div>
      </div>
      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-md">
        <div className="text-xs text-zinc-500 dark:text-zinc-400 mb-1">Candidates</div>
        <div className="text-xl font-semibold text-zinc-900 dark:text-white">
          {metrics.candidatesCount}
        </div>
      </div>
    </div>
  )
})
