/**
 * WorthDoing.ai
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File: src/components/wd/OpportunityCard.tsx
 * Description: Opportunity card — Worth Score and evidence confidence shown as distinct figures, never blended.
 */
import Link from "next/link";
import { cn } from "@/lib/utils";

export function WorthScore({
  score,
  confidence,
  size = "md",
}: {
  score: number | null;
  confidence: number | null;
  size?: "md" | "lg";
}) {
  const conf = confidence ?? 0;
  const confTone = conf >= 0.7 ? "text-verdict" : conf >= 0.45 ? "text-signal" : "text-rust";
  return (
    <div className="flex flex-col items-end">
      <span
        className={cn(
          "font-heading font-semibold leading-none text-ink tabular-nums",
          size === "lg" ? "text-5xl" : "text-3xl",
        )}
      >
        {score != null ? Math.round(score) : "—"}
      </span>
      <span className={cn("mt-1 font-mono text-[10px] uppercase tracking-wider", confTone)}>
        {confidence != null ? `${Math.round(conf * 100)}% evidence` : "unscored"}
      </span>
    </div>
  );
}

export function OpportunityCard({
  id,
  title,
  summary,
  worthScore,
  evidenceConfidence,
  objective,
  hasReport = true,
}: {
  id: string;
  title: string;
  summary: string;
  worthScore: number | null;
  evidenceConfidence: number | null;
  objective?: string;
  hasReport?: boolean;
}) {
  return (
    <Link
      href={`/opportunity/${id}`}
      className="wd-enter group block rounded-xl border border-line bg-card p-5 transition-all hover:-translate-y-0.5 hover:border-verdict/40 hover:shadow-[0_8px_30px_-12px_rgba(22,107,73,0.25)]"
    >
      <div className="flex items-start justify-between gap-4">
        <div className="min-w-0">
          {objective && (
            <p className="mb-1 truncate font-mono text-[10px] uppercase tracking-wider text-ink-soft">
              {objective}
            </p>
          )}
          <h3 className="font-heading text-lg font-semibold leading-tight text-ink group-hover:text-verdict">
            {title}
          </h3>
        </div>
        <WorthScore score={worthScore} confidence={evidenceConfidence} />
      </div>
      <p className="mt-3 line-clamp-3 text-sm leading-relaxed text-ink-soft">{summary}</p>
      <p className="mt-3 font-mono text-[10px] uppercase tracking-wider text-ink-soft/70">
        {hasReport ? "read the full report →" : "report pending…"}
      </p>
    </Link>
  );
}