/**
 * WorthDoing.ai
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File: src/components/wd/ScorePanel.tsx
 * Description: Dimension score bars — thin single-hue magnitude bars with per-dimension confidence, labels in ink.
 */
import { cn } from "@/lib/utils";

export type UiScore = {
  dimension: string;
  score: number;
  confidence: number;
  reasoning: string;
};

const DIMENSION_LABELS: Record<string, string> = {
  demand: "Demand",
  neglectedness: "Neglectedness",
  feasibility: "Feasibility",
  why_now: "Why now",
  impact: "Impact",
  competition: "Competitive position",
  risk: "Risk manageability",
};

export function ScorePanel({ scores }: { scores: UiScore[] }) {
  const ordered = [...scores].sort((a, b) => b.score - a.score);
  return (
    <div className="space-y-4">
      {ordered.map((s) => (
        <div key={s.dimension}>
          <div className="flex items-baseline justify-between gap-2">
            <span className="text-[13px] font-medium text-ink">
              {DIMENSION_LABELS[s.dimension] ?? s.dimension}
            </span>
            <span className="font-mono text-[12px] tabular-nums text-ink">
              {Math.round(s.score)}
              <span
                className={cn(
                  "ml-2 text-[10px] uppercase tracking-wider",
                  s.confidence >= 0.7 ? "text-verdict" : s.confidence >= 0.45 ? "text-signal" : "text-rust",
                )}
              >
                {Math.round(s.confidence * 100)}% conf
              </span>
            </span>
          </div>
          <div className="mt-1.5 h-2 w-full overflow-hidden rounded-[4px] bg-line/60">
            <div
              className="wd-bar h-full rounded-[4px] bg-verdict"
              style={{ width: `${Math.max(0, Math.min(100, s.score))}%` }}
            />
          </div>
          <p className="mt-1.5 text-xs leading-relaxed text-ink-soft">{s.reasoning}</p>
        </div>
      ))}
    </div>
  );
}