/**
 * WorthDoing.ai
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File: src/components/wd/HypothesisPanel.tsx
 * Description: Hypotheses panel — live confidence bars that strengthen/weaken with real events.
 */
"use client";

import { cn } from "@/lib/utils";
import type { UiHypothesis } from "@/lib/ui/api";
import { HypothesisBadge } from "./badges";
import { ConfidenceBar } from "./ConfidenceBar";

export function HypothesisPanel({ hypotheses }: { hypotheses: UiHypothesis[] }) {
  if (hypotheses.length === 0) {
    return <p className="py-6 text-center font-mono text-xs text-ink-soft">no hypotheses formed yet</p>;
  }
  return (
    <ul className="space-y-4">
      {hypotheses.map((h) => (
        <li key={h.id} className={cn("wd-enter", h.status === "rejected" && "opacity-60")}>
          <div className="flex items-start justify-between gap-2">
            <p className={cn("text-[13px] font-medium leading-snug text-ink", h.status === "rejected" && "line-through decoration-rust/50")}>
              {h.title}
            </p>
            <HypothesisBadge status={h.status} />
          </div>
          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-ink-soft">{h.statement}</p>
          <div className="mt-2 flex items-center gap-2">
            <ConfidenceBar
              value={h.confidence}
              tone={h.status === "rejected" ? "rust" : "auto"}
              className="flex-1"
            />
            <span className="w-9 text-right font-mono text-[11px] text-ink-soft">
              {Math.round(h.confidence * 100)}%
            </span>
          </div>
          <div className="mt-1 flex items-center gap-2 font-mono text-[10px] uppercase tracking-wider text-ink-soft/80">
            {h.adversarialChecked ? (
              <span className="text-verdict">skeptic-tested ✓</span>
            ) : h.status !== "rejected" ? (
              <span>awaiting skeptic</span>
            ) : null}
            {h.parentHypothesisId && <span>· branch</span>}
          </div>
        </li>
      ))}
    </ul>
  );
}