const AutomationMoveReviewBrief = ({ review, onChoose, locked }) => {
  const model = window.AutomationReview;
  const candidates = model.eligible(review);
  const [selectedId, setSelectedId] = useState(candidates.length === 1 ? candidates[0].id : "");
  const current = candidates.find((c) => c.id === selectedId);
  const [showSchedules, setShowSchedules] = useState(false);
  const [selectedSchedule, setSelectedSchedule] = useState(null);
  const scheduleOptions = useRef(null);
  useEffect(() => {
    if (showSchedules) scheduleOptions.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
  }, [showSchedules]);
  const chooseAdjustment = (choice) => {
    if (choice === "frequency") { setShowSchedules((shown) => !shown); return; }
    setShowSchedules(false); setSelectedSchedule(null);
    onChoose({ choice, current });
  };
  const text = { fontFamily: "var(--f-display)", fontSize: typeSize(14.5), lineHeight: 1.5 };
  if (!candidates.length) return <p style={text}>This automation is no longer available for review.</p>;
  return <div style={{ marginTop: 4 }}>
    <p style={{ ...text, margin: 0 }}>{review.driver}</p>
    <p style={{ ...text, margin: "12px 0 0" }}>Do you want to adjust your automation from this move?</p>
    {candidates.length > 1 && <label style={{ ...text, display: "block", marginTop: 18 }}>Choose an automation
      <select aria-label="Automation to review" disabled={locked} value={selectedId} onChange={(e) => { setSelectedId(e.target.value); setShowSchedules(false); setSelectedSchedule(null); onChoose(null); }} style={{ width: "100%", padding: 10, marginTop: 8 }}>
        <option value="">Select an automation</option>
        {candidates.map((c) => <option key={c.id} value={c.id}>{c.title} · {c.account}</option>)}
      </select>
    </label>}
    {current && <>
      <section style={{ marginTop: 22 }}>
        <Eyebrow style={{ marginBottom: 8 }}>Your current automation</Eyebrow>
        <div style={{ padding: "13px 14px", border: "1px solid var(--rule)", borderRadius: 12, background: "var(--bg-card)" }}>
          <div style={{ fontFamily: "var(--f-display)", fontSize: typeSize(14), fontWeight: 500 }}>{current.title}</div>
          <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 7 }}>
            {[`${model.money(current.amount)} ${model.schedule(current).cardCadence || model.lowerFirst(model.schedule(current).cadence)}`, `In ${current.displayAccount || current.account}`, `Next planned buy: ${model.schedule(current).cardNext || model.schedule(current).next}`, `Guardrail: pause if ${current.ticker} exceeds ${current.concentrationLimit.toFixed(2)}% of your portfolio`].map((line) => <div key={line} style={{ display: "flex", gap: 8, alignItems: "flex-start" }}><span style={{ width: 4, height: 4, borderRadius: 99, background: "var(--accent)", marginTop: 7, flex: "none" }} /><span style={{ fontFamily: "var(--f-display)", fontSize: typeSize(12.5), lineHeight: 1.45, color: "var(--ink-2)" }}>{line}</span></div>)}
          </div>
        </div>
      </section>
      <section style={{ marginTop: 22 }}>
        <Eyebrow style={{ marginBottom: 8 }}>Adjust this automation</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {[["amount", "Change amount"], ["frequency", "Change schedule"], ["stop", "Pause automation"]].map(([choice, label]) => <button key={choice} type="button" className="press" disabled={locked} aria-expanded={choice === "frequency" ? showSchedules : undefined} aria-controls={choice === "frequency" ? "automation-schedule-options" : undefined} onClick={() => chooseAdjustment(choice)} style={{ textAlign: "left", minHeight: 44, padding: "12px", cursor: locked ? "default" : "pointer", opacity: locked ? .5 : 1, borderRadius: 10, color: "var(--ink)", border: "1px solid var(--rule-2)", background: "var(--bg-card)", fontFamily: "var(--f-display)", fontSize: typeSize(13), fontWeight: 500 }}>{label}</button>)}
        </div>
        {showSchedules && <div id="automation-schedule-options" ref={scheduleOptions} role="group" aria-label="Adjust frequency" style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 18, scrollMarginBottom: 16 }}>
          <Eyebrow style={{ width: "100%", marginBottom: 2 }}>Adjust frequency</Eyebrow>
          {[["Market days", "every market day"], ["Weekly", "weekly"], ["Monthly", "monthly"], ["Other", "____"]].map(([label, value]) => <button key={label} type="button" className="press" disabled={locked} aria-pressed={selectedSchedule === label} onClick={() => { setSelectedSchedule(label); onChoose({ choice: "frequency", current }, value); }} style={{ padding: "9px 10px", whiteSpace: "nowrap", borderRadius: 999, border: `1px solid ${selectedSchedule === label ? "var(--accent)" : "var(--rule-2)"}`, background: "var(--bg-card)", color: "var(--ink)", fontFamily: "var(--f-display)", fontSize: typeSize(11.5), opacity: locked ? .5 : 1, cursor: locked ? "default" : "pointer" }}>{label}</button>)}
        </div>}
      </section>
    </>}
  </div>;
};