// Valdebebas Life — Círculos: detalle con subtemas, muro de quedadas y miembros
const VB_PLACES_HINT = ["Parque Central (Felipe VI)", "Bulevar central", "Centro deportivo", "Pistas de pádel", "Plaza junto al metro", "Online"];
const twcDefaults = t => ({ circles: {}, moai: {}, props: [], plans: [], names: {}, ...t });
const meNow = () => (window.__vrUser && window.__vrUser()) || null;
function fplan(d, h) {
  if (!d) return "";
  const s = new Date(d + "T" + (h || "00:00")).toLocaleDateString("es-ES", { weekday: "short", day: "numeric", month: "short" });
  return s + (h ? " · " + h : "");
}
const todayStr = () => new Date().toISOString().slice(0, 10);

function circleMembers(twc, id) {
  return Object.keys(twc.circles).filter(e => (twc.circles[e] || []).includes(id));
}

function PlanModal({ open, c, sub, onClose, onSave }) {
  const blank = { sub: sub && sub !== "all" ? sub : c.subs[0], title: "", date: "", time: "", place: "", body: "", spots: "" };
  const [f, setF] = useState(blank);
  const [err, setErr] = useState("");
  useEffect(() => { if (open) { setF(blank); setErr(""); } }, [open]);
  const set = k => e => setF({ ...f, [k]: e.target.value });
  const save = () => {
    if (f.title.trim().length < 4) return setErr("Pon un título a la quedada.");
    if (!f.date || !f.time) return setErr("Indica fecha y hora.");
    if (f.date < todayStr()) return setErr("La fecha no puede ser pasada.");
    if (!f.place.trim()) return setErr("Indica dónde en Valdebebas.");
    onSave(f);
  };
  return (
    <Modal open={open} onClose={onClose} wide title={"Nueva quedada · " + c.name} sub="Un plan concreto con fecha, hora y lugar. Los vecinos del círculo podrán apuntarse."
      footer={<><button className="btn ghost" onClick={onClose}>Cancelar</button><button className="btn" onClick={save}><Ic n="event_available" />Publicar quedada</button></>}>
      <div className="fld"><label>Subtema</label><div className="types">{c.subs.map(s => <button key={s} className={"type-opt" + (f.sub === s ? " on" : "")} onClick={() => setF({ ...f, sub: s })}>{s}</button>)}</div></div>
      <div className="fld"><label>Título</label><input className="inp" value={f.title} onChange={set("title")} maxLength={80} placeholder="Ej.: Rodaje suave de 5 km" /></div>
      <div className="row2">
        <div className="fld"><label>Fecha</label><input className="inp" type="date" min={todayStr()} value={f.date} onChange={set("date")} /></div>
        <div className="fld"><label>Hora</label><input className="inp" type="time" value={f.time} onChange={set("time")} /></div>
      </div>
      <div className="fld"><label>Plazas (opcional)</label><input className="inp" type="number" min="2" max="200" value={f.spots} onChange={set("spots")} placeholder="Sin límite" /><small>Con ser 2 ya hay plan: no hace falta un grupo grande.</small></div>
      <div className="fld"><label>Ubicación en Valdebebas</label><input className="inp" list="vb-places" value={f.place} onChange={set("place")} placeholder="Ej.: Parque Central, entrada norte" /><datalist id="vb-places">{VB_PLACES_HINT.map(p => <option key={p} value={p} />)}</datalist></div>
      <div className="fld"><label>Detalles (opcional)</label><textarea className="inp" value={f.body} onChange={set("body")} placeholder="Nivel, qué llevar, punto exacto de encuentro…"></textarea></div>
      {err && <div className="err">{err}</div>}
    </Modal>
  );
}

function CircleDetail({ c, twc, setTwc, user, requireAuth, flash, onBack }) {
  const [sub, setSub] = useState("all");
  const [plan, setPlan] = useState(false);
  const [tab, setTab] = useState("muro");
  const me = user ? user.email : null;
  const members = circleMembers(twc, c.id);
  const isMember = me && members.includes(me);
  const joinFn = (t, u) => ({ ...t, circles: { ...t.circles, [u.email]: [...new Set([...(t.circles[u.email] || []), c.id])] }, names: { ...t.names, [u.email]: u.name } });
  const toggleJoin = () => requireAuth("Crea tu cuenta de vecino para unirte a «" + c.name + "».", () => {
    const u = meNow(); if (!u) return;
    setTwc(t0 => { const t = twcDefaults(t0); const has = (t.circles[u.email] || []).includes(c.id);
      if (has) return { ...t, circles: { ...t.circles, [u.email]: t.circles[u.email].filter(x => x !== c.id) } };
      return joinFn(t, u); });
    flash(isMember ? "Has salido del círculo" : "Te has unido a " + c.name);
  });
  const openPlan = () => requireAuth("Crea tu cuenta de vecino para proponer una quedada.", () => {
    const u = meNow(); if (!u) return;
    if (!(twcDefaults(twc).circles[u.email] || []).includes(c.id)) { setTwc(t => joinFn(twcDefaults(t), u)); flash("Te has unido a " + c.name); }
    setPlan(true);
  });
  const savePlan = f => {
    const u = meNow();
    setTwc(t0 => { const t = twcDefaults(t0); return { ...t, plans: [{ id: vbId(), circle: c.id, ...f, title: f.title.trim(), place: f.place.trim(), body: f.body.trim(), spots: f.spots ? Math.max(2, parseInt(f.spots, 10) || 0) : null, author: u.name, email: u.email, ts: Date.now(), going: [u.email] }, ...t.plans] }; });
    setPlan(false); setSub(f.sub); setTab("muro"); flash("Quedada publicada");
  };
  const going = p => requireAuth("Crea tu cuenta de vecino para apuntarte a esta quedada.", () => {
    const u = meNow(); if (!u) return;
    setTwc(t0 => { let t = twcDefaults(t0); if (!(t.circles[u.email] || []).includes(c.id)) t = joinFn(t, u);
      return { ...t, plans: t.plans.map(x => x.id !== p.id ? x : { ...x, going: x.going.includes(u.email) ? x.going.filter(e => e !== u.email) : [...x.going, u.email] }) }; });
  });
  const today = todayStr();
  const all = twc.plans.filter(p => p.circle === c.id && p.date >= today).sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time));
  const list = all.filter(p => sub === "all" || p.sub === sub);
  const subCount = s => all.filter(p => p.sub === s).length;
  const nm = e => twc.names[e] || "Vecino";
  return (
    <>
      <section className="phead lime"><div className="wrap">
        <button className="back" onClick={onBack}><Ic n="arrow_back" />Todos los círculos</button>
        <div className="phead-row">
          <div style={{ display: "flex", gap: 18, alignItems: "flex-start" }}>
            <span className="ico lg green"><Ic n={c.icon} /></span>
            <div><div className="eyebrow">Círculo del barrio</div><h1>{c.name}</h1><p>{c.desc}</p>
              <div className="cd-meta"><span><Ic n="group" />{members.length} {members.length === 1 ? "miembro" : "miembros"}</span><span><Ic n="event" />{all.length} {all.length === 1 ? "quedada próxima" : "quedadas próximas"}</span></div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button className={"btn " + (isMember ? "ghost" : "")} onClick={toggleJoin}><Ic n={isMember ? "check" : "group_add"} />{isMember ? "Eres miembro" : "Unirme al círculo"}</button>
            <button className="btn lime" onClick={openPlan}><Ic n="add" />Proponer quedada</button>
          </div>
        </div>
        <div className="tabs cd-tabs"><button className={tab === "muro" ? "on" : ""} onClick={() => setTab("muro")}><Ic n="event" />Quedadas</button><button className={tab === "miembros" ? "on" : ""} onClick={() => setTab("miembros")}><Ic n="group" />Miembros ({members.length})</button></div>
      </div></section>

      <section className="sec" style={{ paddingTop: 28 }}><div className="wrap">
        {tab === "muro" && <div className="cd">
          <aside className="side" aria-label="Subtemas">
            <button className={sub === "all" ? "on" : ""} onClick={() => setSub("all")}><span className="ico green"><Ic n="apps" /></span>Todos los subtemas<em>{all.length}</em></button>
            {c.subs.map(s => <button key={s} className={sub === s ? "on" : ""} onClick={() => setSub(s)}><span className="ico green"><Ic n="tag" /></span>{s}<em>{subCount(s)}</em></button>)}
            <div className="side-note"><b>Cómo funciona</b>Solo vecinos registrados pueden unirse y proponer. Las quedadas desaparecen al pasar su fecha.</div>
          </aside>
          <div className="posts">
            {!list.length && <div className="empty"><Ic n="event_busy" style={{ fontSize: 40 }} /><b style={{ color: "var(--ink)" }}>No hay quedadas próximas{sub !== "all" ? " en " + sub : ""}</b><p>Propón la primera y los vecinos del círculo podrán apuntarse.</p><button className="btn" onClick={openPlan}><Ic n="add" />Proponer quedada</button></div>}
            {list.map(p => { const on = me && p.going.includes(me); const d = new Date(p.date + "T00:00"); return (
              <article key={p.id} className="plan">
                <div className="plan-d"><b>{d.getDate()}</b><span>{d.toLocaleDateString("es-ES", { month: "short" }).replace(".", "")}</span></div>
                <div className="plan-b">
                  <div className="post-top"><span className="pill green">{p.sub}</span></div>
                  <h3>{p.title}</h3>
                  <div className="plan-i"><span><Ic n="schedule" />{fplan(p.date, p.time)}</span><span><Ic n="location_on" />{p.place}</span><span><Ic n="person" />{p.author}</span></div>
                  {p.body && <p>{p.body}</p>}
                </div>
                <div className="plan-a">{(() => { const full = p.spots && p.going.length >= p.spots && !on; return <button className={"btn sm " + (on ? "ghost" : "lime")} disabled={full} onClick={() => going(p)}><Ic n={on ? "check" : full ? "block" : "how_to_reg"} />{on ? "Apuntado" : full ? "Completo" : "Apuntarme"}</button>; })()}<small>{p.spots ? p.going.length + " de " + p.spots + " plazas" : p.going.length + " " + (p.going.length === 1 ? "va" : "van")}</small>{on && <small className="plan-warn">¿No puedes ir? Desapúntate para liberar tu plaza.</small>}</div>
              </article>); })}
          </div>
        </div>}
        {tab === "miembros" && (user ? (
          members.length ? <div className="members">{members.map(e => <div key={e} className="mem"><span className="avatar">{initials(nm(e))}</span><b>{nm(e)}</b>{e === me && <span className="badge">Tú</span>}</div>)}</div>
            : <div className="empty"><Ic n="group" style={{ fontSize: 40 }} /><b style={{ color: "var(--ink)" }}>Todavía no hay miembros</b><button className="btn" onClick={toggleJoin}><Ic n="group_add" />Sé el primero</button></div>
        ) : <div className="empty"><Ic n="lock" style={{ fontSize: 40 }} /><b style={{ color: "var(--ink)" }}>Solo visible para vecinos registrados</b><p>Por privacidad, la lista de miembros solo se muestra con sesión iniciada.</p><button className="btn" onClick={toggleJoin}><Ic n="person_add" />Crear cuenta</button></div>)}
      </div></section>
      <PlanModal open={plan} c={c} sub={sub} onClose={() => setPlan(false)} onSave={savePlan} />
    </>
  );
}

Object.assign(window, { CircleDetail, twcDefaults, circleMembers, todayStr, fplan });