thread-master/apps/web/src/components/radar/OpportunityInboxCard.tsx

import { useState } from "react";
import { Link } from "react-router-dom";
import type { Opportunity, OpportunityRemovalReason } from "../../domain/types";
import { useI18n } from "../../i18n/I18nContext";
import { Badge, Button, Select, Textarea } from "../ui";
import { formatTimeAgo } from "../../lib/time";

const REASON_KEYS = [
  "pain_mismatch",
  "provider_or_ad",
  "stale",
  "already_solved",
  "duplicate",
  "other",
] as const;

type Props = {
  opportunity: Opportunity;
  onOpen: (opportunity: Opportunity) => void;
  onAccept: (opportunity: Opportunity) => void;
  onComplete: (opportunity: Opportunity) => void;
  onRemove: (opportunity: Opportunity, input: { reason: OpportunityRemovalReason; note?: string }) => void;
  onRestore: (opportunity: Opportunity) => void;
  busy?: boolean;
};

export function OpportunityInboxCard({ opportunity, onOpen, onAccept, onComplete, onRemove, onRestore, busy = false }: Props) {
  const { t } = useI18n();
  const [removeOpen, setRemoveOpen] = useState(false);
  const [reason, setReason] = useState<OpportunityRemovalReason>("pain_mismatch");
  const [note, setNote] = useState("");
  const reviewState = opportunity.review_state ?? (opportunity.status === "accepted" ? "completed" : opportunity.status === "dismissed" ? "removed" : "pending");
  const pending = reviewState === "pending";
  const score = opportunity.priority_score ?? opportunity.intent_score;
  const evidence = opportunity.demand_evidence?.[0] ?? opportunity.product_matches?.[0]?.reasons?.[0]?.reason;
  const accepted = opportunity.status === "accepted" || Boolean(opportunity.contact_id);
  const priorityLabel = opportunity.priority_band === "high"
    ? t("radar.card.priority.high")
    : opportunity.priority_band === "review"
      ? t("radar.card.priority.review")
      : opportunity.priority_band === "low"
        ? t("radar.card.priority.low")
        : opportunity.intent_band === "high"
          ? t("radar.inbox.band.high")
          : opportunity.intent_band === "mid"
            ? t("radar.inbox.band.mid")
            : t("radar.inbox.band.low");

  function submitRemove() {
    if (reason === "other" && !note.trim()) return;
    onRemove(opportunity, { reason, note: note.trim() || undefined });
    setRemoveOpen(false);
    setNote("");
  }

  return (
    <article className={`hb-opp-card hb-opp-card--${opportunity.intent_band}`} data-testid={`opportunity-card-${opportunity.id}`}>
      <div className="hb-opp-card__meta">
        <Badge tone={opportunity.priority_band === "high" || opportunity.intent_band === "high" ? "success" : opportunity.priority_band === "review" || opportunity.intent_band === "mid" ? "warning" : "neutral"}>
          {priorityLabel} · {score}
        </Badge>
        {opportunity.primary_product_label ? <Badge tone="brand">{t("radar.card.fitProduct", { label: opportunity.primary_product_label })}</Badge> : <Badge tone="neutral">{t("radar.card.noProduct")}</Badge>}
        <span>{t("radar.card.intent", { n: opportunity.intent_score })} · {formatTimeAgo(opportunity.posted_at)}</span>
      </div>
      <p className="hb-opp-card__text">{opportunity.text}</p>
      {evidence ? <p className="hb-opp-card__evidence"><strong>{t("radar.card.why")}</strong>{evidence}</p> : null}
      <div className="hb-opp-card__source">
        <span>@{opportunity.author_handle || t("radar.card.unknownAuthor")}</span>
        <a href={opportunity.permalink} target="_blank" rel="noreferrer">{t("radar.card.openOriginal")}</a>
      </div>
      <div className="hb-opp-card__actions" aria-label={t("radar.card.actionsAria")}>
        {pending ? <Button type="button" variant="primary" disabled={busy} onClick={() => onComplete(opportunity)}>{t("radar.card.keep")}</Button> : null}
        {pending ? <Button type="button" variant="danger" disabled={busy} onClick={() => setRemoveOpen((value) => !value)}>{t("radar.card.discard")}</Button> : null}
        <Button type="button" variant="ghost" onClick={() => onOpen(opportunity)}>{t("radar.card.whyBtn")}</Button>
        {(pending || reviewState === "completed") && !accepted ? (
          <Button type="button" variant="ghost" disabled={busy} onClick={() => onAccept(opportunity)}>
            {busy ? t("radar.card.busy") : t("radar.card.accept")}
          </Button>
        ) : null}
        {reviewState === "removed" ? <Button type="button" variant="secondary" disabled={busy} onClick={() => onRestore(opportunity)}>{t("radar.card.restore")}</Button> : null}
        {reviewState === "completed" && accepted && opportunity.contact_id ? (
          <Link className="hb-btn hb-btn--secondary" to={`/app/crm?contact=${encodeURIComponent(opportunity.contact_id)}`}>{t("radar.inbox.goCrm")}</Link>
        ) : null}
        {reviewState === "completed" ? <Badge tone="success">{accepted ? t("radar.card.accepted") : t("radar.card.done")}</Badge> : null}
      </div>
      {removeOpen ? (
        <div className="hb-opp-card__remove-form" aria-label={t("radar.card.removeAria")}>
          <strong>{t("radar.card.removeTitle")}</strong>
          <p className="hb-field__hint">{t("radar.card.removeHint")}</p>
          <Select name={`remove-reason-${opportunity.id}`} label={t("radar.card.reason")} value={reason} onChange={(event) => setReason(event.target.value as OpportunityRemovalReason)}>
            {REASON_KEYS.map((key) => <option key={key} value={key}>{t(`radar.card.reason.${key}`)}</option>)}
          </Select>
          {reason === "other" ? <Textarea name={`remove-note-${opportunity.id}`} label={t("radar.card.note")} value={note} onChange={(event) => setNote(event.target.value)} /> : null}
          {reason === "duplicate" ? <p className="hb-field__hint">{t("radar.card.duplicateHint")}</p> : null}
          <div className="hb-opp-card__actions">
            <Button type="button" variant="danger" disabled={busy || (reason === "other" && !note.trim())} onClick={submitRemove}>{t("radar.card.confirmRemove")}</Button>
            <Button type="button" variant="ghost" onClick={() => setRemoveOpen(false)}>{t("common.cancel")}</Button>
          </div>
        </div>
      ) : null}
    </article>
  );
}