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

export function PrimaryProductPicker({ matches, currentId, busy, onSet }: {
  matches: ProductMatch[];
  currentId?: string;
  busy?: boolean;
  onSet: (productId: string, reason: string) => void;
}) {
  const { t } = useI18n();
  const [productId, setProductId] = useState(currentId || "");
  const [reason, setReason] = useState("");
  const choices = matches;
  if (!choices.length) return <span className="hb-radar-section__hint">{t("radar.primary.empty")}</span>;
  return <div className="hb-primary-product-picker">
    <Select name="primary-product" label={t("radar.primary.label")} value={productId} onChange={(e) => setProductId(e.target.value)}>
      <option value="">{t("radar.primary.placeholder")}</option>
      {choices.map((m) => <option key={m.product_id} value={m.product_id}>{m.product_label_snapshot} · {m.product_fit_score}{m.eligible && !m.excluded ? "" : t("radar.primary.needsReason")}</option>)}
    </Select>
    <input aria-label={t("radar.primary.reasonAria")} value={reason} onChange={(e) => setReason(e.target.value)} placeholder={t("radar.primary.reasonPh")} />
    <Button type="button" variant="secondary" disabled={!productId || busy || (!choices.find((m) => m.product_id === productId)?.eligible && !reason.trim())} onClick={() => onSet(productId, reason || t("radar.primary.defaultReason"))}>{t("radar.primary.submit")}</Button>
  </div>;
}
