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

import { useEffect, useState } from "react";
import { SERVICE_AREAS } from "./serviceAreas";
import { Button, Textarea } from "../ui";
import { useRepos } from "../../data/DataContext";
import type { Brand, BrandProduct } from "../../domain/types";
import { useI18n } from "../../i18n/I18nContext";
import { useFormatApiError } from "../../lib/apiErrors";
import { expandIncludeTerms } from "../../lib/threadsTerm";
import { ProductWatchForm } from "./ProductWatchForm";

function splitTerms(raw: string): string[] {
  return raw
    .split(/[\n,、]/)
    .map((s) => s.trim())
    .filter(Boolean);
}

type Props = {
  /** firstSweepTriggered：後端已排第一輪，前端不該再叫使用者按「立即巡邏」。 */
  onCreated: (result: { firstSweepTriggered: boolean }) => void;
};

/** 今日空狀態：關鍵字就能開工，品牌／產品是選項。 */
export function QuickWatchStart({ onCreated }: Props) {
  const { t } = useI18n();
  const repos = useRepos();
  const formatError = useFormatApiError();
  const [terms, setTerms] = useState("");
  const [regions, setRegions] = useState<string[]>([]);
  const [brandId, setBrandId] = useState("");
  const [productId, setProductId] = useState("");
  const [brands, setBrands] = useState<Brand[]>([]);
  const [products, setProducts] = useState<BrandProduct[]>([]);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const scout = (repos as { scout?: { listBrands: () => Promise<Brand[]>; listProducts: (id: string) => Promise<BrandProduct[]> } }).scout;

  useEffect(() => {
    if (!scout) return;
    void scout.listBrands().then(setBrands).catch(() => setBrands([]));
  }, [scout]);

  useEffect(() => {
    if (!scout || !brandId) {
      setProducts([]);
      return;
    }
    void scout.listProducts(brandId).then(setProducts).catch(() => setProducts([]));
  }, [scout, brandId]);

  async function submit() {
    const nextTerms = expandIncludeTerms(splitTerms(terms));
    if (!nextTerms.length) {
      setError(t("radar.watches.threadsRequired"));
      return;
    }
    if ((brandId && !productId) || (!brandId && productId)) {
      setError(t("radar.watches.needBrandProductShort"));
      return;
    }
    setBusy(true);
    setError("");
    try {
      const created = await repos.radar.createWatch({
        terms: nextTerms,
        regions,
        enabled: true,
        brand_id: brandId || undefined,
        product_id: productId || undefined,
      });
      onCreated({ firstSweepTriggered: Boolean(created.first_sweep_triggered) });
    } catch (e) {
      setError(formatError(e));
    } finally {
      setBusy(false);
    }
  }

  return (
    <form
      className="hb-radar-form hb-stack"
      onSubmit={(e) => {
        e.preventDefault();
        void submit();
      }}
    >
      <p className="hb-radar-section__hint">{t("radar.start.hint")}</p>
      <Textarea
        name="radar-start-terms"
        label={t("radar.start.terms")}
        hint={t("radar.watches.termsHint")}
        rows={3}
        required
        value={terms}
        onChange={(e) => setTerms(e.target.value)}
        placeholder={t("radar.start.termsPh")}
      />
      {brands.length ? (
        <ProductWatchForm
          brands={brands}
          products={products}
          brandId={brandId}
          productId={productId}
          onBrandChange={(id) => {
            setBrandId(id);
            setProductId("");
          }}
          onProductChange={(id) => {
            setProductId(id);
            const product = products.find((p) => p.id === id);
            if (!product || terms.trim()) return;
            const seeded = [...product.pain_points, ...product.match_tags].filter(Boolean);
            if (seeded.length) setTerms(seeded.join("\n"));
          }}
        />
      ) : null}
      <p className="hb-radar-section__hint">{t("radar.start.regions")}</p>
      <div className="hb-radar-area-grid">
        {SERVICE_AREAS.map((area) => {
          const on = regions.includes(area.code);
          return (
            <button
              key={area.code}
              type="button"
              aria-pressed={on}
              className={`hb-radar-chip${on ? " is-active" : ""}`}
              onClick={() =>
                setRegions((cur) => (on ? cur.filter((c) => c !== area.code) : [...cur, area.code]))
              }
            >
              {area.label}
            </button>
          );
        })}
      </div>
      {error ? (
        <p className="hb-form-error" role="alert">
          {error}
        </p>
      ) : null}
      <Button type="submit" disabled={busy}>
        {busy ? t("radar.start.saving") : t("radar.start.submit")}
      </Button>
    </form>
  );
}