import { useState } from "react";
import type { ProductMatch } from "../../domain/types";
import { useI18n } from "../../i18n/I18nContext";
import { Badge, Button } from "../ui";

export function ProductMatchDetails({ match }: { match: ProductMatch }) {
  const { t } = useI18n();
  const [open, setOpen] = useState(false);
  return (
    <div className="hb-product-match">
      <div className="hb-product-match__head">
        <strong>{match.brand_name_snapshot} · {match.product_label_snapshot}</strong>
        <Badge tone={match.excluded ? "danger" : match.eligible ? "success" : "neutral"}>
          {match.product_fit_band} · {match.product_fit_score}
        </Badge>
        <Button type="button" variant="ghost" onClick={() => setOpen((v) => !v)}>{open ? t("radar.match.hide") : t("radar.match.why")}</Button>
      </div>
      {open ? <div className="hb-product-match__reasons">
        {match.reasons.map((reason) => <div key={reason.dimension} className="hb-product-reason">
          <strong>{reason.dimension} · {reason.score}</strong><span>{reason.reason}</span>
          {reason.candidate_excerpt ? <q>{reason.candidate_excerpt}</q> : null}
          {reason.product_basis ? <small>{t("radar.match.basis", { text: reason.product_basis })}</small> : null}
        </div>)}
        {match.risks.length ? <p className="hb-banner-error">{t("radar.match.risks", { text: match.risks.join("、") })}</p> : null}
      </div> : null}
    </div>
  );
}
