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

import type { Opportunity } from "../../domain/types";
import { useI18n } from "../../i18n/I18nContext";
import { Badge, Button } from "../ui";
import { ProductMatchDetails } from "./ProductMatchDetails";

type Props = {
  opportunity: Opportunity;
  onClose: () => void;
  onAccept?: (opportunity: Opportunity) => void;
  onComplete?: (opportunity: Opportunity) => void;
  busy?: boolean;
};

export function OpportunityDetailDrawer({ opportunity, onClose, onAccept, onComplete, busy = false }: Props) {
  const { t } = useI18n();
  const pending = (opportunity.review_state || "pending") === "pending";
  const accepted = opportunity.status === "accepted" || Boolean(opportunity.contact_id);
  return (
    <aside className="hb-opp-drawer" role="dialog" aria-modal="true" aria-label={t("radar.drawer.aria")}>
      <div className="hb-opp-drawer__head">
        <div>
          <span className="hb-radar-section__hint">{t("radar.drawer.title")}</span>
          <h2>{opportunity.primary_product_label || t("radar.drawer.noProduct")}</h2>
        </div>
        <Button type="button" variant="ghost" aria-label={t("radar.drawer.closeAria")} onClick={onClose}>{t("radar.drawer.close")}</Button>
      </div>
      <div className="hb-opp-drawer__body">
        <p className="hb-opp-card__text">{opportunity.text}</p>
        <div className="hb-opp-card__meta">
          <Badge tone="brand">{t("radar.drawer.intent", { n: opportunity.intent_score })}</Badge>
          {opportunity.priority_score !== undefined ? <Badge tone="warning">{t("radar.drawer.priority", { n: opportunity.priority_score })}</Badge> : null}
          <span>@{opportunity.author_handle || t("radar.card.unknownAuthor")}</span>
        </div>
        {opportunity.demand_evidence?.length ? (
          <section className="hb-opp-drawer__section"><h3>{t("radar.drawer.evidence")}</h3><ul>{opportunity.demand_evidence.map((item) => <li key={item}>{item}</li>)}</ul></section>
        ) : null}
        <section className="hb-opp-drawer__section">
          <h3>{t("radar.drawer.matches")}</h3>
          {opportunity.product_matches?.length ? opportunity.product_matches.map((match) => <ProductMatchDetails key={match.product_id} match={match} />) : <p className="hb-radar-section__hint">{t("radar.drawer.generic")}</p>}
        </section>
        {opportunity.reasons.length ? <section className="hb-opp-drawer__section"><h3>{t("radar.drawer.judge")}</h3><div className="hb-opp-reasons">{opportunity.reasons.map((reason) => <div className="hb-opp-reason" key={reason.dimension}><strong>{reason.dimension}</strong><span>{reason.score}</span><span>{reason.reason}</span></div>)}</div></section> : null}
        <div className="hb-opp-drawer__actions">
          {pending && onComplete ? (
            <Button type="button" disabled={busy} onClick={() => onComplete(opportunity)}>{t("radar.card.keep")}</Button>
          ) : null}
          {pending && !accepted && onAccept ? (
            <Button type="button" variant="ghost" disabled={busy} onClick={() => onAccept(opportunity)}>{t("radar.card.accept")}</Button>
          ) : null}
          <a className="hb-btn hb-btn--ghost" href={opportunity.permalink} target="_blank" rel="noreferrer">{t("radar.drawer.openOriginal")}</a>
        </div>
        {pending ? <p className="hb-field__hint">{t("radar.drawer.hint")}</p> : null}
      </div>
    </aside>
  );
}