"use client";

import type { CandidateFactCard, ConfirmedFactCard } from "../lib/domain/types";

interface FactCardEditorProps {
  factCard: CandidateFactCard | null;
  isSaving: boolean;
  onChange: (factCard: CandidateFactCard) => void;
  onConfirm: () => void;
}

const listFields = [
  "company_short_names",
  "brand_names",
  "product_names",
  "core_claims",
  "forbidden_claims",
  "image_topics",
  "uncertain_items",
] as const;

const fieldLabels: Record<(typeof listFields)[number], string> = {
  company_short_names: "公司简称",
  brand_names: "品牌名称",
  product_names: "产品名称",
  core_claims: "核心事实/主张",
  forbidden_claims: "禁止使用的主张",
  image_topics: "图片主题",
  uncertain_items: "待确认事项",
};

export function FactCardEditor({
  factCard,
  isSaving,
  onChange,
  onConfirm,
}: FactCardEditorProps) {
  if (!factCard) {
    return (
      <section className="panel empty-panel">
        <div className="panel-heading">事实卡</div>
      </section>
    );
  }

  const currentFactCard = factCard;
  const canOptimize = currentFactCard.uncertain_items.length === 0;

  function update<K extends keyof CandidateFactCard>(
    key: K,
    value: CandidateFactCard[K],
  ) {
    onChange({
      ...currentFactCard,
      [key]: value,
      is_ready_for_optimization:
        key === "uncertain_items"
          ? (value as string[]).length === 0
          : currentFactCard.uncertain_items.length === 0,
    });
  }

  return (
    <section className="panel stack">
      <div className="panel-heading">
        <span>事实卡</span>
        <button disabled={!canOptimize || isSaving} onClick={onConfirm}>
          {isSaving ? "保存中..." : "确认事实卡"}
        </button>
      </div>
      <label>
        <span>公司全称</span>
        <input
          value={factCard.company_full_name}
          onChange={(event) => update("company_full_name", event.target.value)}
        />
      </label>
      <div className="two-col">
        <label>
          <span>目标行业</span>
          <input
            value={factCard.target_industry}
            onChange={(event) => update("target_industry", event.target.value)}
          />
        </label>
        <label>
          <span>目标受众</span>
          <input
            value={factCard.target_audience}
            onChange={(event) => update("target_audience", event.target.value)}
          />
        </label>
      </div>
      <label>
        <span>经验年限</span>
        <input
          min="0"
          type="number"
          value={factCard.experience_years ?? ""}
          onChange={(event) =>
            update(
              "experience_years",
              event.target.value ? Number(event.target.value) : null,
            )
          }
        />
      </label>
      {listFields.map((field) => (
        <label key={field}>
          <span>{fieldLabels[field]}</span>
          <textarea
            value={factCard[field].join("\n")}
            onChange={(event) =>
              update(
                field,
                event.target.value
                  .split(/\r?\n/)
                  .map((line) => line.trim())
                  .filter(Boolean) as CandidateFactCard[typeof field],
              )
            }
          />
        </label>
      ))}
      {!canOptimize && (
        <p className="status-text fail">
          请先处理待确认事项，再开始优化。
        </p>
      )}
    </section>
  );
}

export function toConfirmedFactCard(
  factCard: CandidateFactCard,
): ConfirmedFactCard {
  return {
    ...factCard,
    uncertain_items: [],
    is_ready_for_optimization: true,
    confirmed_by_user: true,
  };
}
