/* ============================================================
   BriefDoc — renders an organized logo brief from answers.
   Used by the questionnaire final screen + dashboard detail.
   ============================================================ */

function BriefSwatches({ str }) {
  const sw = extractSwatches(str);
  if (!sw.length) return <span className="bs-value">{str || <em className="muted">—</em>}</span>;
  return (
    <span className="bs-swatches">
      {sw.map((c, i) => <span key={i} className="swatch" style={{ background: c }} title={c} />)}
      <span style={{ fontSize: 14, color: "var(--fg2)" }}>{str}</span>
    </span>
  );
}

function BriefSectionRow({ s }) {
  let content;
  const empty = <span className="bs-value muted">Not specified</span>;
  switch (s.kind) {
    case "tags":
      content = (s.value && s.value.length)
        ? <div className="bs-tags">{s.value.map((t, i) => <span key={i} className="bs-tag">{t}</span>)}</div>
        : empty;
      break;
    case "tags-coral":
      content = (s.value && s.value.length)
        ? <div className="bs-tags">{s.value.map((t, i) => <span key={i} className="bs-tag coral">{t}</span>)}</div>
        : empty;
      break;
    case "refs": {
      const links = s.value?.links || [];
      const files = s.value?.files || [];
      const notes = s.value?.notes || "";
      if (!links.length && !files.length && !notes) { content = empty; break; }
      content = (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {files.length > 0 && (
            <div className="bs-files">
              {files.map((f, i) => (
                <span key={i} className="bs-file-chip"><Icon name="image" size={13} /> {f.name}</span>
              ))}
            </div>
          )}
          {links.length > 0 && (
            <div className="bs-links" style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {links.map((l, i) => <a key={i} href={l} target="_blank" rel="noreferrer">{l}</a>)}
            </div>
          )}
          {notes && <div className="bs-value" style={{ fontSize: 14, color: "var(--fg2)" }}>{notes}</div>}
        </div>
      );
      break;
    }
    case "colors": {
      const { like, avoid } = s.value;
      if (!like && !avoid) { content = empty; break; }
      content = (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {like && <div><div className="kbd-hint" style={{ marginBottom: 4 }}>PREFERRED</div><BriefSwatches str={like} /></div>}
          {avoid && <div><div className="kbd-hint" style={{ marginBottom: 4 }}>AVOID</div><BriefSwatches str={avoid} /></div>}
        </div>
      );
      break;
    }
    case "versions": {
      const versions = s.value?.versions || [];
      const sizes = s.value?.sizes || "";
      if (!versions.length && !sizes) { content = empty; break; }
      content = (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {versions.length > 0 && <div className="bs-tags">{versions.map((t, i) => <span key={i} className="bs-tag">{t}</span>)}</div>}
          {sizes && <div className="bs-value" style={{ fontSize: 14 }}>{sizes}</div>}
        </div>
      );
      break;
    }
    default:
      content = (s.value && s.value !== "—") ? <span className="bs-value">{s.value}</span> : empty;
  }
  return (
    <div className="brief-section">
      <div className="bs-label">{s.key}</div>
      <div>{content}</div>
    </div>
  );
}

function BriefDoc({ answers, refLabel, submission, questionnaireType }) {
  const type = questionnaireType || submission?.questionnaireType || answers?.questionnaireType || "logo-design";
  const meta = getQuestionnaireMeta(type);
  const secs = buildBriefSections(answers, type);
  const subline = type === "logo-design"
    ? answers.slogan
    : [answers.clientName, answers.email].filter(Boolean).join(" · ");
  return (
    <div className="brief-doc">
      <div className="brief-doc-head">
        <div>
          <div className="bd-name">{answers.brandName || "Untitled brand"}</div>
          {subline && <div className="bd-slogan">{subline}</div>}
        </div>
        <div className="bd-ref">{refLabel || meta.briefLabel}</div>
      </div>
      <div className="brief-grid">
        {secs.map((s) => <BriefSectionRow key={s.key} s={s} />)}
      </div>
    </div>
  );
}

Object.assign(window, { BriefDoc, BriefSectionRow });