// STEP 2 — Select Title
const { useState: useState2 } = React;

function Step2Title({ topic, titles, onConfirm, loading, onBack }) {
  const [selected, setSelected] = useState2(null);
  const [custom, setCustom] = useState2("");
  const [useCustom, setUseCustom] = useState2(false);

  const chosenTitle = useCustom ? custom.trim() : (selected !== null ? titles[selected].title : "");
  const canContinue = chosenTitle.length > 0 && !loading;

  return (
    <div className="max-w-3xl mx-auto px-8 pb-16 fade-up">
      <div className="text-center mb-6">
        <div className="mono text-[11px] uppercase tracking-[0.18em] text-teal-700 mb-2">Step 02 / Title</div>
        <h1 className="text-[26px] font-semibold tracking-tight text-ink-900">Pick the angle for your report</h1>
        <p className="text-[14px] text-ink-500 mt-1.5 max-w-xl mx-auto">
          Researching <span className="text-ink-800 font-medium">"{topic}"</span> — these are the titles our analyst agents proposed.
        </p>
      </div>

      <div className="space-y-2.5">
        {titles.map((t, i) => {
          const isSelected = !useCustom && selected === i;
          return (
            <button
              key={i}
              onClick={() => { setSelected(i); setUseCustom(false); }}
              className={`w-full text-left bg-white rounded-xl p-4 transition-all
                ${isSelected
                  ? "border border-teal-500 ring-2 ring-teal-500/20 shadow-card-lg"
                  : "border border-ink-100 hover:border-ink-200 shadow-card"}`}>
              <div className="flex items-start gap-4">
                {/* Selection indicator */}
                <div className={`shrink-0 mt-0.5 h-5 w-5 rounded-full grid place-items-center transition-colors
                  ${isSelected ? "bg-teal-500" : "bg-white ring-1 ring-ink-200"}`}>
                  {isSelected && <Icons.Check size={12} stroke="white" strokeWidth={3}/>}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1.5">
                    <span className="mono text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-teal-50 text-teal-700 border border-teal-100">
                      {t.tag}
                    </span>
                    <span className="mono text-[10px] text-ink-400">Option {String(i + 1).padStart(2, "0")}</span>
                  </div>
                  <div className="text-[15px] font-medium text-ink-900 leading-snug">{t.title}</div>
                  <div className="text-[13px] text-ink-500 leading-relaxed mt-1.5">{t.description}</div>
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {/* Custom title */}
      <div className={`mt-3 bg-white border rounded-xl p-4 transition-all
        ${useCustom ? "border-teal-500 ring-2 ring-teal-500/20" : "border-ink-100 border-dashed"}`}>
        <div className="flex items-start gap-4">
          <div className={`shrink-0 mt-0.5 h-5 w-5 rounded-full grid place-items-center transition-colors
            ${useCustom ? "bg-teal-500" : "bg-white ring-1 ring-ink-200"}`}>
            {useCustom && <Icons.Check size={12} stroke="white" strokeWidth={3}/>}
          </div>
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1.5">
              <Icons.Type size={12} className="text-ink-500"/>
              <span className="text-[13px] font-medium text-ink-800">Write your own title</span>
            </div>
            <input
              value={custom}
              onChange={(e) => { setCustom(e.target.value); setUseCustom(e.target.value.length > 0); }}
              onFocus={() => setUseCustom(custom.length > 0 || true)}
              placeholder="Type a custom report title…"
              className="w-full text-[14px] bg-transparent placeholder:text-ink-300 text-ink-900 focus:outline-none"/>
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="mt-6 flex items-center justify-between">
        <button onClick={onBack} className="h-10 px-3.5 inline-flex items-center gap-1.5 text-[13px] text-ink-600 hover:text-ink-900">
          <Icons.ArrowLeft size={14}/> Back
        </button>

        <div className="flex items-center gap-3">
          {loading && (
            <span className="mono text-[11px] text-ink-500 inline-flex items-center gap-1.5">
              <Icons.Loader size={12} className="spin-slow text-teal-600"/>
              Structuring your report index…
            </span>
          )}
          <button
            disabled={!canContinue}
            onClick={() => onConfirm(chosenTitle)}
            className="h-11 px-5 inline-flex items-center gap-2 bg-teal-500 hover:bg-teal-600 disabled:bg-ink-200 disabled:text-ink-400 text-white text-[13.5px] font-medium rounded-lg shadow-sm transition-colors">
            {loading ? <Icons.Loader size={15} className="spin-slow"/> : <Icons.Check size={15}/>}
            Confirm Title &amp; Generate Index
            <Icons.ArrowRight size={15}/>
          </button>
        </div>
      </div>
    </div>
  );
}

window.Step2Title = Step2Title;