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

import type { Opportunity } from "../../domain/types";
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 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="商機詳情">
      <div className="hb-opp-drawer__head">
        <div>
          <span className="hb-radar-section__hint">商機詳情</span>
          <h2>{opportunity.primary_product_label || "未指定產品"}</h2>
        </div>
        <Button type="button" variant="ghost" aria-label="關閉商機詳情" onClick={onClose}>關閉</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">意向 {opportunity.intent_score}</Badge>
          {opportunity.priority_score !== undefined ? <Badge tone="warning">優先 {opportunity.priority_score}</Badge> : null}
          <span>@{opportunity.author_handle || "未知作者"}</span>
        </div>
        {opportunity.demand_evidence?.length ? (
          <section className="hb-opp-drawer__section"><h3>需求證據</h3><ul>{opportunity.demand_evidence.map((item) => <li key={item}>{item}</li>)}</ul></section>
        ) : null}
        <section className="hb-opp-drawer__section">
          <h3>產品匹配與風險</h3>
          {opportunity.product_matches?.length ? opportunity.product_matches.map((match) => <ProductMatchDetails key={match.product_id} match={match} />) : <p className="hb-radar-section__hint">尚未指定產品，這筆結果只保留為一般需求。</p>}
        </section>
        {opportunity.reasons.length ? <section className="hb-opp-drawer__section"><h3>原始判定</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)}>留下</Button>
          ) : null}
          {pending && !accepted && onAccept ? (
            <Button type="button" variant="ghost" disabled={busy} onClick={() => onAccept(opportunity)}>加入名單（可選）</Button>
          ) : null}
          <a className="hb-btn hb-btn--ghost" href={opportunity.permalink} target="_blank" rel="noreferrer">開啟 Threads 原文</a>
        </div>
        {pending ? <p className="hb-field__hint">先看痛點與產品理由。留下或丟掉即可；加入名單只在你要追這個人時才需要。</p> : null}
      </div>
    </aside>
  );
}