import { formatSnakeLabel, shortSha, workflowLabel } from "@/lib/format";
import type { FullTask, QualitySnapshotRecord, TaskArtifact, TaskPrompt } from "@/types";

interface Props {
  task: FullTask;
  prompts: TaskPrompt[] | undefined;
  artifacts: TaskArtifact[] | undefined;
  qualitySnapshot?: QualitySnapshotRecord;
  qualitySnapshotLoading?: boolean;
  qualitySnapshotError?: boolean;
}

function reviewerVerdict(state: string): string {
  switch (state) {
    case "ready_to_merge": return "Approved";
    case "awaiting_feedback": return "Changes Requested";
    case "addressing_feedback": return "In Progress";
    default: return workflowLabel(state);
  }
}

function elapsedTime(createdAt: string | null, completedAt: string | undefined): string {
  if (!createdAt || !completedAt) return "N/A";
  const ms = new Date(completedAt).getTime() - new Date(createdAt).getTime();
  if (isNaN(ms) || ms < 0) return "N/A";
  const s = Math.floor(ms / 1000);
  if (s < 60) return `${s}s`;
  if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`;
  return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
}

export function ProofOfWorkCard({
  task,
  prompts,
  artifacts,
  qualitySnapshot,
  qualitySnapshotLoading,
  qualitySnapshotError,
}: Props) {
  const snapshot = qualitySnapshot?.snapshot;
  const passedGates = snapshot?.hard_gates.filter((gate) => gate.status === "pass").length ?? 0;
  const totalGates = snapshot?.hard_gates.length ?? 0;
  const failedGates = snapshot?.hard_gates.filter((gate) => gate.status === "fail") ?? [];

  return (
    <div
      className="mt-4 border border-line bg-bg p-3 flex flex-col gap-3 font-mono text-[11px]"
      data-testid="proof-of-work-card"
    >
      <section>
        <div className="text-ink-3 mb-1 uppercase tracking-[0.08em]">PR &amp; GitHub State</div>
        {task.pr_url ? (
          <div className="flex flex-col gap-1">
            <a
              href={task.pr_url}
              target="_blank"
              rel="noreferrer"
              className="text-rust hover:underline break-all"
            >
              {task.pr_url}
            </a>
            {task.workflow?.state && (
              <span className="border border-line bg-bg-1 px-1.5 py-[1px] text-[10px] text-ink-2 self-start">
                {workflowLabel(task.workflow.state)}
              </span>
            )}
          </div>
        ) : (
          <span className="text-ink-3">No PR</span>
        )}
      </section>

      {task.pr_url && (
        <section>
          <div className="text-ink-3 mb-1 uppercase tracking-[0.08em]">Quality Snapshot</div>
          {qualitySnapshotLoading ? (
            <span className="text-ink-3">Loading quality snapshot…</span>
          ) : qualitySnapshotError ? (
            <span className="text-rust">Failed to load quality snapshot</span>
          ) : snapshot ? (
            <div className="flex flex-col gap-2 text-ink">
              <div className="flex flex-wrap gap-2">
                <span className="border border-line bg-bg-1 px-1.5 py-[1px] text-[10px]">
                  Grade {snapshot.final_grade}
                </span>
                <span>Score: {snapshot.final_score}/100</span>
                <span>Run: {formatSnakeLabel(snapshot.run_mode)}</span>
              </div>
              <div className="flex flex-wrap gap-2 text-ink-2">
                <span>Head: {shortSha(snapshot.final_pr?.head_oid)}</span>
                <span>Gates: {passedGates}/{totalGates}</span>
                <span>Recorded: {qualitySnapshot.created_at}</span>
              </div>
              {snapshot.blocker_summary.length > 0 && (
                <div className="border border-line bg-bg-1 p-2 text-rust">
                  {snapshot.blocker_summary[0]}
                </div>
              )}
              {failedGates.length > 0 && (
                <div className="flex flex-col gap-1 text-ink-2">
                  {failedGates.slice(0, 3).map((gate) => (
                    <div key={gate.name}>
                      {formatSnakeLabel(gate.name)}: {gate.message}
                    </div>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <span className="text-ink-3">No quality snapshot recorded</span>
          )}
        </section>
      )}

      <section>
        <div className="text-ink-3 mb-1 uppercase tracking-[0.08em]">Rounds / Elapsed</div>
        <div className="flex gap-4 text-ink">
          <span>Rounds: {task.turn}</span>
          <span>Elapsed: {elapsedTime(task.created_at, task.updated_at ?? undefined)}</span>
        </div>
      </section>

      <section>
        <div className="text-ink-3 mb-1 uppercase tracking-[0.08em]">Reviewer Verdict</div>
        {task.workflow?.state ? (
          <span className="text-ink">{reviewerVerdict(task.workflow.state)}</span>
        ) : (
          <span className="text-ink-3">No reviewer data</span>
        )}
      </section>

      <section>
        <div className="text-ink-3 mb-1 uppercase tracking-[0.08em]">Prompts</div>
        {prompts === undefined ? (
          <span className="text-ink-3">Loading prompts…</span>
        ) : prompts.length === 0 ? (
          <span className="text-ink-3">No prompts recorded</span>
        ) : (
          <div className="flex flex-col gap-2">
            <span className="text-ink">
              {prompts.length} prompt{prompts.length === 1 ? "" : "s"} recorded
            </span>
            <div className="flex flex-col gap-1">
              {prompts.map((p, i) => (
                <div key={i} className="border border-line px-2 py-1 text-ink-2">
                  {p.phase} (turn {p.turn}) · {p.created_at}
                </div>
              ))}
            </div>
          </div>
        )}
      </section>

      <section>
        <div className="text-ink-3 mb-1 uppercase tracking-[0.08em]">Artifacts</div>
        {artifacts === undefined ? (
          <span className="text-ink-3">Loading artifacts…</span>
        ) : artifacts.length === 0 ? (
          <span className="text-ink-3">No artifacts</span>
        ) : (
          <div className="flex flex-col gap-2">
            {artifacts.map((a, i) => (
              <div key={i} className="border border-line p-2">
                <span className="border border-line bg-bg-1 px-1.5 py-[1px] text-[10px] text-ink-2">
                  {a.artifact_type}
                </span>
                <pre className="mt-1 text-ink whitespace-pre-wrap break-words text-[10px]">
                  {a.content}
                </pre>
              </div>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}
