// ResponsePanel — the persona's five answers. Renders one column (single take)
// or two side by side (previous vs latest) so a group can compare iterations.
const RESPONSE_QUESTIONS = [
  { key: "bought_in", label: "Did they buy into this approach?" },
  { key: "pitch", label: "What did they like about the pitch? What weren't they comfortable with?" },
  { key: "channel", label: "Was the channel a good fit? Why?" },
  { key: "rebuttals", label: "Did they accept the rebuttals? Any lingering concerns?" },
  { key: "improvements", label: "What could be improved?" }
];

function Skeleton() {
  return (
    <div className="skeleton" aria-hidden="true">
      <span className="skeleton__line" style={{ width: "92%" }} />
      <span className="skeleton__line" style={{ width: "78%" }} />
      <span className="skeleton__line" style={{ width: "64%" }} />
    </div>
  );
}

function InputsDisclosure({ inputs }) {
  if (!inputs) return null;
  const rows = [
    ["Positioning", inputs.positioning],
    ["Channels", inputs.channels],
    ["Challenges", inputs.challenges]
  ];
  return (
    <details className="response__inputs">
      <summary>View the inputs for this take</summary>
      <dl className="response__inputs-list">
        {rows.map(([label, val]) => (
          <div key={label} className="response__inputs-row">
            <dt>{label}</dt>
            <dd>{val || <span className="response__inputs-empty">—</span>}</dd>
          </div>
        ))}
      </dl>
    </details>
  );
}

function ResponsePanel({ personaName, loading, columns, canRefine, onRefine }) {
  const compare = columns.length > 1;
  const answersClass = "response__answers response__answers--cols-" + columns.length;

  return (
    <section className={"response" + (compare ? " response--compare" : "")} aria-live="polite">
      <div className="response__header">
        <div>
          <div className="response__eyebrow">
            {compare ? "Persona response — comparing iterations" : "Persona response"}
          </div>
          <h2 className="response__title">
            {loading
              ? <>Listening as <em>{personaName}</em>…</>
              : <><em>{personaName}</em> responded</>}
          </h2>
        </div>
        {canRefine && (
          <button type="button" className="refine-btn" onClick={onRefine}>
            ← Refine &amp; resubmit
          </button>
        )}
      </div>

      {compare && (
        <div className="response__colhead">
          <div className="response__q-spacer" aria-hidden="true" />
          <div className={answersClass}>
            {columns.map((c) => (
              <div
                key={c.iter}
                className={"response__col-label" + (c.latest ? " is-latest" : "")}
              >
                <span className="response__col-iter">
                  Iteration {String(c.iter).padStart(2, "0")}
                  {c.latest && <em className="response__col-tag">latest</em>}
                </span>
                <InputsDisclosure inputs={c.inputs} />
              </div>
            ))}
          </div>
        </div>
      )}

      <ol className="response__list">
        {RESPONSE_QUESTIONS.map((q, i) => (
          <li key={q.key} className="response__item">
            <div className="response__q">
              <span className="response__q-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="response__q-label">{q.label}</span>
            </div>
            <div className={answersClass}>
              {columns.map((c) => (
                <div key={c.iter} className="response__a">
                  {compare && (
                    <span className="response__a-tag">
                      Iteration {String(c.iter).padStart(2, "0")}{c.latest ? " · latest" : ""}
                    </span>
                  )}
                  {c.loading
                    ? <Skeleton />
                    : <p>{c.response?.answers?.[q.key]}</p>}
                </div>
              ))}
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

window.ResponsePanel = ResponsePanel;