"use client";

import { CheckCircle, XCircle, Loader2 } from "lucide-react";
import type { TestResult, VisibleTestCase } from "@/types";

interface TestResultsProps {
  visibleResults: TestResult[];
  hiddenPassedCount: number;
  hiddenTotalCount: number;
  isRunning?: boolean;
  visibleTestCases?: VisibleTestCase[];
}

export function TestResults({
  visibleResults,
  hiddenPassedCount,
  hiddenTotalCount,
  isRunning,
  visibleTestCases,
}: TestResultsProps) {
  if (isRunning) {
    return (
      <div className="p-4 flex items-center gap-2 text-[var(--muted-foreground)]">
        <Loader2 className="h-4 w-4 animate-spin" />
        <span>Running tests...</span>
      </div>
    );
  }

  if (visibleResults.length === 0 && hiddenTotalCount === 0) {
    return (
      <div className="p-4 text-[var(--muted-foreground)]">
        Click &quot;Run Tests&quot; to test your solution with visible test
        cases, or &quot;Submit&quot; to run all tests.
      </div>
    );
  }

  const formatValue = (value: unknown): string => {
    if (value === null || value === undefined) return "null";
    if (typeof value === "string") return `"${value}"`;
    return JSON.stringify(value);
  };

  const formatInput = (input: Record<string, unknown>): string => {
    return Object.entries(input)
      .map(([key, val]) => `${key} = ${formatValue(val)}`)
      .join(", ");
  };

  return (
    <div className="divide-y divide-[var(--border)]">
      {visibleResults.map((result, index) => {
        const testCase = visibleTestCases?.[index];
        return (
          <div key={result.test_id} className="p-4 space-y-2">
            <div className="flex items-center gap-2">
              {result.passed ? (
                <CheckCircle className="h-4 w-4 text-green-500" />
              ) : (
                <XCircle className="h-4 w-4 text-red-500" />
              )}
              <span className="font-medium">
                Test {result.test_id + 1}: {result.passed ? "Passed" : "Failed"}
              </span>
            </div>

            {!result.passed && (
              <div className="ml-6 space-y-1 text-sm">
                {result.input && (
                  <div>
                    <span className="text-[var(--muted-foreground)]">
                      Input:{" "}
                    </span>
                    <code className="bg-[var(--secondary)] px-1 rounded">
                      {formatInput(result.input)}
                    </code>
                  </div>
                )}
                {testCase && (
                  <div>
                    <span className="text-[var(--muted-foreground)]">
                      Expected:{" "}
                    </span>
                    <code className="bg-[var(--secondary)] px-1 rounded text-green-400">
                      {formatValue(testCase.expected)}
                    </code>
                  </div>
                )}
                <div>
                  <span className="text-[var(--muted-foreground)]">Got: </span>
                  <code className="bg-[var(--secondary)] px-1 rounded text-red-400">
                    {result.error ? `Error: ${result.error}` : formatValue(result.actual)}
                  </code>
                </div>
              </div>
            )}
          </div>
        );
      })}

      {hiddenTotalCount > 0 && (
        <div className="p-4">
          <div className="flex items-center gap-2">
            {hiddenPassedCount === hiddenTotalCount ? (
              <CheckCircle className="h-4 w-4 text-green-500" />
            ) : (
              <XCircle className="h-4 w-4 text-red-500" />
            )}
            <span className="font-medium">
              Hidden Tests: {hiddenPassedCount}/{hiddenTotalCount} passed
            </span>
          </div>
          <p className="ml-6 text-sm text-[var(--muted-foreground)] mt-1">
            Hidden test details are not shown to prevent cheating.
          </p>
        </div>
      )}
    </div>
  );
}
