import type { Brand, BrandProduct } from "../../domain/types";
import { useI18n } from "../../i18n/I18nContext";
import { Badge } from "../ui";

type Props = { brand?: Brand; product?: BrandProduct };

/** A transparent completeness signal; it never invents a product capability. */
export function ProductContextReadiness({ brand, product }: Props) {
  const { t } = useI18n();
  if (!brand || !product) return null;
  const checks = [
    [t("radar.readiness.audience"), Boolean(brand.target_audience?.trim())],
    [t("radar.readiness.context"), Boolean(product.product_context.trim())],
    [t("radar.readiness.pain"), product.pain_points.length > 0],
    [t("radar.readiness.capability"), product.provider_capability_terms.length > 0],
  ] as const;
  const complete = checks.filter(([, ok]) => ok).length;
  return (
    <div className="hb-radar-readiness" role="status">
      <div className="hb-radar-readiness__head">
        <strong>{t("radar.readiness.title")}</strong>
        <Badge tone={complete === checks.length ? "success" : "warning"}>{complete}/{checks.length}</Badge>
      </div>
      <div className="hb-inline-badges">
        {checks.map(([label, ok]) => <Badge key={label} tone={ok ? "success" : "neutral"}>{ok ? t("radar.readiness.ok") : t("radar.readiness.todo")} · {label}</Badge>)}
      </div>
      {complete < checks.length ? <p className="hb-radar-section__hint">{t("radar.readiness.hint")}</p> : null}
    </div>
  );
}
