// BuddySelect.jsx
function BuddySelect({ go, state, set, data, reset }) {
  const [mode, setMode] = React.useState(state.mode || null);

  // Both modes open the SAME buddy card (your พี่รหัส from static-data). The
  // only difference is the experience: "คัดเลือกกลุ่ม" plays the safari-herd
  // slot reveal first, "สายรหัส" jumps straight to the card. (One buddy per
  // agent in the data; truly-different matches would need backend data.)
  const proceed = () => {
    if (!mode) return;
    if (mode === "line") {
      set({ mode, herd: data.groupMeta(state.groupName) });
      go("hint");
    } else {
      set({ mode });
      go("random");
    }
  };
  const opts = [
    { id: "group", icon: "paw", label: "คัดเลือกกลุ่ม", sub: "สุ่มเผยฝูงสัตว์ซาฟารีของคุณ\nก่อนเปิดการ์ดพี่รหัส", tw: "gold" },
    { id: "line",  icon: "cap", label: "สายรหัส",      sub: "เปิดการ์ดตามหาพี่รหัส\nขอให้โชคดีกับการตามหาพี่รหัสของคุณ", tw: "green" },
  ];
  const ring = { gold: "border-safari-gold bg-safari-gold/10 shadow-[0_8px_20px_rgba(196,154,90,0.3)]",
                 green: "border-safari-green bg-safari-green/10 shadow-[0_8px_20px_rgba(107,140,82,0.3)]" };
  const dot  = { gold: "bg-safari-gold text-safari-grass", green: "bg-safari-green text-safari-grass" };
  const dotOff = { gold: "bg-safari-gold/20 text-safari-gold", green: "bg-safari-green/20 text-safari-green" };

  return (
    <div className="min-h-[100dvh] w-full px-6 pt-10 pb-9 flex flex-col justify-between font-serif text-safari-mahogany">
      <div>
        <div className="flex justify-end -mt-1 -mr-2 mb-0.5">
          <LogoutButton onClick={reset} />
        </div>
        <FlowDots step={1} />
        <h1 className="text-3xl font-semibold mt-4 mb-1 leading-tight">เลือกวิธีจับคู่</h1>

        <div className="flex flex-col gap-4 mt-6">
          {opts.map((o) => {
            const on = mode === o.id;
            return (
              <button key={o.id} onClick={() => setMode(o.id)}
                className={[
                  "text-left rounded-3xl p-[18px] flex items-center gap-4 border-[2.5px] transition-all font-serif",
                  on ? ring[o.tw] : "border-safari-mahogany/10 bg-[#FFFCF6] shadow-sm",
                ].join(" ")}>
                <div className={`w-16 h-16 rounded-full flex items-center justify-center shrink-0 ${on ? dot[o.tw] : dotOff[o.tw]}`}>
                  <Icon name={o.icon} className="w-9 h-9" stroke={1.8} />
                </div>
                <div className="flex-1">
                  <div className="text-xl font-bold text-safari-mahogany">{o.label}</div>
                  <div className="text-[13.5px] text-safari-brown whitespace-pre-line mt-0.5 leading-snug">{o.sub}</div>
                </div>
                <div className={[
                  "w-6 h-6 rounded-full shrink-0 flex items-center justify-center text-safari-grass border-2",
                  on ? `${dot[o.tw]} border-transparent` : "border-safari-mahogany/15",
                ].join(" ")}>
                  {on && <Icon name="check" className="w-4 h-4" stroke={3} />}
                </div>
              </button>
            );
          })}
        </div>

        <div className="mt-5 rounded-2xl px-3.5 py-3 bg-safari-red/10 text-safari-red text-[12.5px] flex gap-2.5 leading-snug">
          <Icon name="dice" className="w-4 h-4 shrink-0 mt-0.5" />
          <span>กลุ่มนี้เป็นการเลือกแบบสุ่ม โปรดตามหาเพื่อนที่อยู่กลุ่มเดียวกับคุณเพื่อเข้าร่วมฝูง !</span>
        </div>
      </div>

      <SafariButton disabled={!mode} color="brown" onClick={proceed}>
        {mode === "line" ? "ดูการ์ดบั๊ดดี้" : "ไปสุ่มบั๊ดดี้"} <Icon name="arrow" className="w-5 h-5" />
      </SafariButton>
      <PageFooter />
    </div>
  );
}

window.BuddySelect = BuddySelect;