// Valdebebas Life — Panel de administración (backoffice). IDs y data-* listos para conectar a backend.
const ADM_SECTIONS = [
  { id: "resumen", label: "Resumen", icon: "dashboard" },
  { id: "tablon", label: "Tablón", icon: "forum" },
  { id: "directorio", label: "Directorio", icon: "storefront" },
  { id: "comunidad", label: "Conoce vecinos", icon: "diversity_3" },
];
const DIR_STATUS = { activo: ["Activo", "green"], pendiente: ["Pendiente de revisión", "sand"], baja: ["De baja", "done"] };
const daysLeft = p => p.expires ? Math.max(0, Math.ceil((p.expires - Date.now()) / VB_DAY)) : null;
const csvDownload = (name, rows) => {
  const csv = rows.map(r => r.map(c => '"' + String(c ?? "").replace(/"/g, '""') + '"').join(";")).join("\n");
  const a = document.createElement("a"); a.href = URL.createObjectURL(new Blob(["\ufeff" + csv], { type: "text/csv" })); a.download = name; a.click();
};

function Metric({ id, icon, tone, label, value, sub }) {
  return (
    <div className="adm-metric" id={id} data-metric={id}>
      <span className={"ico " + tone}><Ic n={icon} /></span>
      <div><small>{label}</small><b className="metric-counter" data-counter={id}>{value}</b>{sub && <span>{sub}</span>}</div>
    </div>
  );
}

function AdminDashboard({ users, posts, dir, baro, twc }) {
  const now = Date.now();
  const active = posts.filter(p => !p.expires || p.expires > now);
  const reported = active.filter(p => (p.reports || 0) > 0).length;
  const members = new Set(Object.keys(twc.circles).filter(e => (twc.circles[e] || []).length));
  const plans = (twc.plans || []).filter(p => p.date >= todayStr());
  const moai = Object.values(twc.moai || {}).filter(Boolean).length;
  const pros = dir.filter(x => x.kind === "pro"), places = dir.filter(x => x.kind === "place");
  const baroUsers = Object.entries(baro).filter(([, b]) => b.entries && b.entries.length);
  const consent = baroUsers.filter(([, b]) => b.consent);
  const avg = arr => arr.length ? (arr.reduce((s, v) => s + v, 0) / arr.length).toFixed(1) : "–";
  const showAvg = consent.length >= 10;
  const firstAvg = avg(consent.map(([, b]) => b.entries[0].score));
  const lastAvg = avg(consent.map(([, b]) => b.entries[b.entries.length - 1].score));
  const invited = users.filter(u => u.invitedBy).length;
  const st = window.__baroStats;
  const nPart = st ? st.participantes : baroUsers.length, nCons = st ? st.consienten : consent.length, nExit = st ? st.bajas : (window.__exits || 0);
  const aIni = st ? (st.media_inicio ?? "–") : (showAvg ? firstAvg : "–"), aNow = st ? (st.media_actual ?? "–") : (showAvg ? lastAvg : "–");
  const report = () => csvDownload("valdebebas-life-informe-" + todayStr() + ".csv", [
    ["Indicador", "Valor"], ["Fecha del informe", todayStr()],
    ["Vecinos registrados", users.length], ["Vecinos con residencia/trabajo confirmados", users.length], ["Vecinos llegados por invitación", invited],
    ["Anuncios activos en el tablón", active.length], ["Anuncios publicados (histórico en memoria)", posts.length],
    ["Vecinos en círculos", members.size], ["Quedadas próximas", plans.length], ["Asistencias apuntadas", plans.reduce((s, p) => s + p.going.length, 0)],
    ["Vecinos en lista de moais", moai], ["Propuestas en Voz del Barrio", (twc.props || []).length],
    ["Profesionales activos", pros.filter(x => x.status === "activo").length], ["Locales activos", places.filter(x => x.status === "activo").length],
    ["Vecinos que han hecho el barómetro", nPart], ["Vecinos que suman al estudio", nCons],
    ["Receta Social media al inicio (n≥10)", aIni === "–" ? "n<10" : aIni], ["Receta Social media actual (n≥10)", aNow === "–" ? "n<10" : aNow],
    ["Bajas de cuenta", nExit],
  ]);
  return (
    <section id="admin-dashboard" className="adm-sec" aria-labelledby="adm-dash-h">
      <div className="adm-h"><div><h2 id="adm-dash-h">Resumen</h2><p>Indicadores para la memoria de actividades y la declaración de utilidad pública.</p></div>
        <button id="admin-export-report-btn" className="btn ghost" onClick={report}><Ic n="download" />Descargar informe (CSV)</button></div>
      <div className="adm-metrics" id="metrics-grid">
        <Metric id="metric-users-total" icon="group" tone="green" label="Vecinos registrados" value={users.length} sub={users.length + " con residencia confirmada · " + invited + " por invitación"} />
        <Metric id="metric-board-active" icon="forum" tone="lime" label="Anuncios activos" value={active.length} sub={reported ? reported + " con reportes" : "Sin reportes"} />
        <Metric id="metric-circles-members" icon="groups" tone="green" label="Vecinos en círculos" value={members.size} sub={plans.length + " quedadas próximas"} />
        <Metric id="metric-moai-waitlist" icon="handshake" tone="sky" label="Lista de moais" value={moai} sub={(twc.props || []).length + " propuestas en Voz del Barrio"} />
        <Metric id="metric-directory-pros" icon="handyman" tone="green" label="Profesionales" value={pros.filter(x => x.status === "activo").length} sub={pros.filter(x => x.status === "pendiente").length + " pendientes"} />
        <Metric id="metric-directory-places" icon="storefront" tone="sky" label="Locales" value={places.filter(x => x.status === "activo").length} sub={places.filter(x => x.status === "pendiente").length + " pendientes"} />
      </div>
      <div className="panel adm-baro" id="admin-barometer-summary">
        <div className="panel-h"><h3><Ic n="monitoring" style={{ color: "var(--green)" }} />Barómetro de bienestar</h3></div>
        <div className="evo-sum">
          <div><small>Han hecho el barómetro</small><b id="metric-baro-participants">{nPart}</b></div>
          <div><small>Suman al estudio</small><b id="metric-baro-consent">{nCons}{nPart ? " (" + Math.round(nCons / nPart * 100) + "%)" : ""}</b></div>
          <div><small>Media al inicio</small><b id="metric-baro-avg-start">{aIni === "–" ? "–" : aIni + " / 18"}</b></div>
          <div><small>Media actual</small><b id="metric-baro-avg-now">{aNow === "–" ? "–" : aNow + " / 18"}</b></div>
        </div>
        <p className="baro-note">Solo se usan datos de quienes aceptan sumar sus respuestas y las medias se muestran a partir de 10 personas, para que nadie pueda ser identificado.</p>
      </div>
    </section>
  );
}

function PostEditModal({ post, onClose, onSave }) {
  const [f, setF] = useState(null);
  useEffect(() => { if (post) setF({ title: post.title, body: post.body, detail: post.detail || "" }); }, [post]);
  if (!post || !f) return null;
  const set = k => e => setF({ ...f, [k]: e.target.value });
  return (
    <Modal open onClose={onClose} wide title="Editar anuncio" sub={"Publicado por " + post.author}
      footer={<><button className="btn ghost" onClick={onClose}>Cancelar</button><button id="admin-post-save-btn" className="btn" onClick={() => onSave({ ...post, ...f })}><Ic n="save" />Guardar</button></>}>
      <form id="admin-post-form" data-id={post.id} onSubmit={e => e.preventDefault()} style={{ display: "grid", gap: 14 }}>
        <div className="fld"><label htmlFor="admin-post-title">Título</label><input id="admin-post-title" name="title" className="inp" value={f.title} onChange={set("title")} /></div>
        <div className="fld"><label htmlFor="admin-post-body">Descripción</label><textarea id="admin-post-body" name="body" className="inp" value={f.body} onChange={set("body")}></textarea></div>
        <div className="fld"><label htmlFor="admin-post-detail">Detalle</label><input id="admin-post-detail" name="detail" className="inp" value={f.detail} onChange={set("detail")} /></div>
      </form>
    </Modal>
  );
}

function AdminBoard({ posts, setPosts, flash }) {
  const [filter, setFilter] = useState("todos");
  const [edit, setEdit] = useState(null);
  const now = Date.now();
  let list = posts.filter(p => !p.expires || p.expires > now);
  if (filter === "reportados") list = list.filter(p => (p.reports || 0) > 0);
  if (filter === "ocultos") list = list.filter(p => p.hidden);
  if (filter === "destacados") list = list.filter(p => p.featured);
  list = [...list].sort((a, b) => (b.reports || 0) - (a.reports || 0) || b.ts - a.ts);
  const upd = (id, fn) => setPosts(ps => ps.map(p => p.id === id ? fn(p) : p));
  const del = p => { if (confirm("¿Eliminar definitivamente «" + p.title + "»?")) { setPosts(ps => ps.filter(x => x.id !== p.id)); flash("Anuncio eliminado"); } };
  return (
    <section id="admin-board" className="adm-sec" aria-labelledby="adm-board-h">
      <div className="adm-h"><div><h2 id="adm-board-h">Moderación del tablón</h2><p>Los anuncios con 3 reportes se ocultan solos hasta que los revises.</p></div></div>
      <div className="fbar" id="admin-board-filters">{[["todos", "Activos"], ["reportados", "Reportados"], ["ocultos", "Ocultos"], ["destacados", "Destacados"]].map(([id, l]) => <button key={id} data-filter={id} className={"fchip" + (filter === id ? " on" : "")} onClick={() => setFilter(id)}>{l}</button>)}</div>
      <div className="adm-table-wrap"><table className="adm-table" id="admin-board-table">
        <thead><tr><th>Anuncio</th><th>Autor</th><th>Caduca</th><th>Estado</th><th className="r">Acciones</th></tr></thead>
        <tbody>
          {!list.length && <tr><td colSpan="5" className="adm-empty">No hay anuncios en esta vista.</td></tr>}
          {list.map(p => { const d = daysLeft(p); const t = VB_POST_TYPES.find(x => x.id === p.type) || {}; return (
            <tr key={p.id} data-id={p.id} className={"admin-post-row" + (p.hidden ? " is-hidden" : "")}>
              <td><b>{p.title}</b><small>{t.label} · {ago(p.ts)}</small></td>
              <td>{p.author}</td>
              <td><span className="adm-days" data-days={d}><i style={{ width: Math.min(100, (d || 0) / 30 * 100) + "%" }}></i></span><small>{d === null ? "Sin caducidad" : d === 0 ? "Hoy" : "En " + d + (d === 1 ? " día" : " días")}</small></td>
              <td><div className="adm-tags">{p.featured && <span className="pill lime">Destacado</span>}{p.hidden && <span className="pill done">Oculto</span>}{(p.reports || 0) > 0 && <span className="pill coral">{p.reports} reporte{p.reports > 1 ? "s" : ""}</span>}{p.done && <span className="pill green">Resuelto</span>}</div></td>
              <td className="r"><div className="adm-actions">
                <button className="icon-btn admin-edit-btn" data-id={p.id} title="Editar" aria-label="Editar" onClick={() => setEdit(p)}><Ic n="edit" /></button>
                <button className={"icon-btn admin-feature-btn" + (p.featured ? " on" : "")} data-id={p.id} title="Destacar" aria-label="Destacar" onClick={() => upd(p.id, x => ({ ...x, featured: !x.featured }))}><Ic n="push_pin" fill={p.featured} /></button>
                <button className="icon-btn admin-hide-btn" data-id={p.id} title={p.hidden ? "Mostrar" : "Ocultar"} aria-label="Ocultar" onClick={() => upd(p.id, x => ({ ...x, hidden: !x.hidden, reports: x.hidden ? 0 : x.reports }))}><Ic n={p.hidden ? "visibility" : "visibility_off"} /></button>
                <button className="icon-btn danger admin-delete-btn" data-id={p.id} title="Eliminar" aria-label="Eliminar" onClick={() => del(p)}><Ic n="delete" /></button>
              </div></td>
            </tr>); })}
        </tbody>
      </table></div>
      <PostEditModal post={edit} onClose={() => setEdit(null)} onSave={p => { upd(p.id, () => p); setEdit(null); flash("Anuncio actualizado"); }} />
    </section>
  );
}

function DirModal({ item, onClose, onSave }) {
  const [f, setF] = useState(null);
  const [err, setErr] = useState("");
  useEffect(() => { if (item) { setF({ kind: "pro", name: "", cat: "", tip: "", zone: "", phone: "", web: "", status: "pendiente", recs: 0, votes: 0, ...item }); setErr(""); } }, [item]);
  if (!item || !f) return null;
  const set = k => e => setF({ ...f, [k]: e.target.value });
  const cats = f.kind === "pro" ? VB_SERVICE_CATS : VB_BEST_CATS;
  const save = () => { if (!f.name.trim() || !f.cat) return setErr("Nombre y categoría son obligatorios."); onSave({ ...f, name: f.name.trim(), quote: f.kind === "place" ? f.tip : undefined, recs: +f.recs || 0, votes: +f.votes || 0 }); };
  return (
    <Modal open onClose={onClose} wide title={item.id ? "Editar ficha" : "Añadir comercio o profesional"} sub="Solo las fichas en estado Activo aparecen en la web."
      footer={<><button className="btn ghost" onClick={onClose}>Cancelar</button><button id="admin-dir-save-btn" className="btn" onClick={save}><Ic n="save" />{item.id ? "Guardar cambios" : "Añadir ficha"}</button></>}>
      <form id="admin-dir-form" data-id={item.id || ""} onSubmit={e => e.preventDefault()} style={{ display: "grid", gap: 14 }}>
        <div className="tabs" role="radiogroup"><button type="button" data-kind="pro" className={f.kind === "pro" ? "on" : ""} onClick={() => setF({ ...f, kind: "pro", cat: "" })}>Profesional (Servicios)</button><button type="button" data-kind="place" className={f.kind === "place" ? "on" : ""} onClick={() => setF({ ...f, kind: "place", cat: "" })}>Local (Locales)</button></div>
        <div className="row2">
          <div className="fld"><label htmlFor="admin-dir-name">Nombre</label><input id="admin-dir-name" name="name" className="inp" value={f.name} onChange={set("name")} /></div>
          <div className="fld"><label htmlFor="admin-dir-cat">Categoría</label><select id="admin-dir-cat" name="category" className="inp" value={f.cat} onChange={set("cat")}><option value="">Elige una</option>{cats.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}</select></div>
        </div>
        <div className="fld"><label htmlFor="admin-dir-tip">{f.kind === "pro" ? "Qué dicen los vecinos" : "Frase corta"}</label><input id="admin-dir-tip" name="description" className="inp" value={f.tip} onChange={set("tip")} maxLength={140} /></div>
        <div className="row2">
          <div className="fld"><label htmlFor="admin-dir-zone">{f.kind === "pro" ? "Zona" : "Dirección"}</label><input id="admin-dir-zone" name="zone" className="inp" value={f.zone} onChange={set("zone")} /></div>
          <div className="fld"><label htmlFor="admin-dir-phone">Teléfono</label><input id="admin-dir-phone" name="phone" className="inp" value={f.phone} onChange={set("phone")} /></div>
        </div>
        <div className="row2">
          <div className="fld"><label htmlFor="admin-dir-web">Web o Instagram</label><input id="admin-dir-web" name="website" className="inp" value={f.web} onChange={set("web")} /></div>
          <div className="fld"><label htmlFor={f.kind === "pro" ? "admin-dir-recs" : "admin-dir-votes"}>{f.kind === "pro" ? "Recomendaciones iniciales" : "Votos iniciales"}</label><input id={f.kind === "pro" ? "admin-dir-recs" : "admin-dir-votes"} name={f.kind === "pro" ? "recommendations" : "votes"} type="number" min="0" className="inp" value={f.kind === "pro" ? f.recs : f.votes} onChange={set(f.kind === "pro" ? "recs" : "votes")} /></div>
        </div>
        <div className="fld"><label htmlFor="admin-dir-status">Estado</label><select id="admin-dir-status" name="status" className="inp" value={f.status} onChange={set("status")}>{Object.entries(DIR_STATUS).map(([k, [l]]) => <option key={k} value={k}>{l}</option>)}</select></div>
        {err && <div className="err">{err}</div>}
      </form>
    </Modal>
  );
}

function AdminDirectory({ dir, setDir, flash }) {
  const [filter, setFilter] = useState("todos");
  const [q, setQ] = useState("");
  const [edit, setEdit] = useState(null);
  let list = dir.filter(x => filter === "todos" || x.status === filter);
  if (q.trim()) { const n = vrNorm(q); list = list.filter(x => vrNorm(x.name).includes(n)); }
  list = [...list].sort((a, b) => (a.status === "pendiente" ? -1 : 0) - (b.status === "pendiente" ? -1 : 0) || a.name.localeCompare(b.name));
  const catLabel = x => ((x.kind === "pro" ? VB_SERVICE_CATS : VB_BEST_CATS).find(c => c.id === x.cat) || {}).label || x.cat || "–";
  const save = f => { setDir(d => f.id ? d.map(x => x.id === f.id ? f : x) : [{ ...f, id: vbId(), ts: Date.now() }, ...d]); setEdit(null); flash(f.id ? "Ficha actualizada" : "Ficha añadida"); };
  const setStatus = (x, s) => { setDir(d => d.map(y => y.id === x.id ? { ...y, status: s } : y)); flash(s === "activo" ? "Ficha publicada" : s === "baja" ? "Ficha dada de baja" : "Ficha en revisión"); };
  const del = x => { if (confirm("¿Eliminar la ficha de «" + x.name + "»?")) { setDir(d => d.filter(y => y.id !== x.id)); flash("Ficha eliminada"); } };
  const count = s => dir.filter(x => s === "todos" || x.status === s).length;
  return (
    <section id="admin-directory" className="adm-sec" aria-labelledby="adm-dir-h">
      <div className="adm-h"><div><h2 id="adm-dir-h">Directorio</h2><p>Profesionales (Servicios) y locales (Locales). Las solicitudes y recomendaciones que llegan por email se añaden aquí como pendientes.</p></div>
        <button id="admin-dir-add-btn" className="btn" onClick={() => setEdit({})}><Ic n="add" />Añadir comercio o profesional</button></div>
      <div className="adm-bar">
        <div className="fbar" id="admin-dir-filters">{[["todos", "Todos"], ["pendiente", "Pendientes"], ["activo", "Activos"], ["baja", "De baja"]].map(([id, l]) => <button key={id} data-filter={id} className={"fchip" + (filter === id ? " on" : "")} onClick={() => setFilter(id)}>{l}<em className="adm-count">{count(id)}</em></button>)}</div>
        <div className="inline-search"><Ic n="search" /><input id="admin-dir-search" value={q} onChange={e => setQ(e.target.value)} placeholder="Buscar por nombre" /></div>
      </div>
      <div className="adm-table-wrap"><table className="adm-table" id="admin-dir-table">
        <thead><tr><th>Nombre</th><th>Tipo</th><th>Categoría</th><th>Estado</th><th className="r">Acciones</th></tr></thead>
        <tbody>
          {!list.length && <tr><td colSpan="5" className="adm-empty">{dir.length ? "No hay fichas en esta vista." : "Todavía no hay fichas. Añade la primera."}</td></tr>}
          {list.map(x => { const [sl, st] = DIR_STATUS[x.status] || DIR_STATUS.pendiente; return (
            <tr key={x.id} data-id={x.id} className="admin-dir-row">
              <td><b>{x.name}</b><small>{x.note ? (x.origin === "recomendacion" ? "Recomendado por un vecino: " : "Solicitud: ") + x.note : (x.zone || x.phone || x.web || "")}</small></td>
              <td>{x.kind === "pro" ? "Profesional" : "Local"}</td>
              <td>{catLabel(x)}</td>
              <td><span className={"pill " + st}>{sl}</span></td>
              <td className="r"><div className="adm-actions">
                {x.status !== "activo" && <button className="btn sm admin-approve-btn" data-id={x.id} onClick={() => setStatus(x, "activo")}><Ic n="check" />Activar</button>}
                <button className="icon-btn admin-edit-btn" data-id={x.id} title="Editar" aria-label="Editar" onClick={() => setEdit(x)}><Ic n="edit" /></button>
                {x.status !== "baja" && <button className="icon-btn admin-unlist-btn" data-id={x.id} title="Dar de baja" aria-label="Dar de baja" onClick={() => setStatus(x, "baja")}><Ic n="block" /></button>}
                <button className="icon-btn danger admin-delete-btn" data-id={x.id} title="Eliminar" aria-label="Eliminar" onClick={() => del(x)}><Ic n="delete" /></button>
              </div></td>
            </tr>); })}
        </tbody>
      </table></div>
      <DirModal item={edit} onClose={() => setEdit(null)} onSave={save} />
    </section>
  );
}

function AdminCommunity({ twc, setTwc, flash }) {
  const plans = (twc.plans || []).filter(p => p.date >= todayStr()).sort((a, b) => a.date.localeCompare(b.date));
  const props = [...(twc.props || [])].sort((a, b) => b.ts - a.ts);
  const circ = id => (VB_CIRCLES.find(c => c.id === id) || {}).name || id;
  const delPlan = p => { if (confirm("¿Eliminar la quedada «" + p.title + "»?")) { setTwc(t => ({ ...t, plans: t.plans.filter(x => x.id !== p.id) })); flash("Quedada eliminada"); } };
  const delProp = p => { if (confirm("¿Eliminar la propuesta «" + p.title + "»?")) { setTwc(t => ({ ...t, props: t.props.filter(x => x.id !== p.id) })); flash("Propuesta eliminada"); } };
  const moai = Object.entries(twc.moai || {}).filter(([, v]) => v);
  return (
    <section id="admin-community" className="adm-sec" aria-labelledby="adm-com-h">
      <div className="adm-h"><div><h2 id="adm-com-h">Conoce vecinos</h2><p>Quedadas de los círculos, propuestas de Voz del Barrio y lista de espera de moais.</p></div></div>
      <h3 className="adm-sub">Quedadas próximas</h3>
      <div className="adm-table-wrap"><table className="adm-table" id="admin-plans-table">
        <thead><tr><th>Quedada</th><th>Círculo</th><th>Fecha</th><th>Asistentes</th><th className="r">Acciones</th></tr></thead>
        <tbody>{!plans.length && <tr><td colSpan="5" className="adm-empty">No hay quedadas próximas.</td></tr>}
          {plans.map(p => <tr key={p.id} data-id={p.id}><td><b>{p.title}</b><small>{p.sub} · {p.place} · {p.author}</small></td><td>{circ(p.circle)}</td><td>{fplan(p.date, p.time)}</td><td>{p.going.length}{p.spots ? " / " + p.spots : ""}</td><td className="r"><button className="icon-btn danger admin-delete-btn" data-id={p.id} aria-label="Eliminar" onClick={() => delPlan(p)}><Ic n="delete" /></button></td></tr>)}</tbody>
      </table></div>
      <h3 className="adm-sub">Voz del Barrio</h3>
      <div className="adm-table-wrap"><table className="adm-table" id="admin-props-table">
        <thead><tr><th>Propuesta</th><th>Tipo</th><th>Apoyos</th><th className="r">Acciones</th></tr></thead>
        <tbody>{!props.length && <tr><td colSpan="4" className="adm-empty">No hay propuestas.</td></tr>}
          {props.map(p => <tr key={p.id} data-id={p.id}><td><b>{p.title}</b><small>{p.author} · {ago(p.ts)}</small></td><td>{p.kind === "plan" ? "Plan" : "Mejora"}</td><td>{p.votes.length}</td><td className="r"><button className="icon-btn danger admin-delete-btn" data-id={p.id} aria-label="Eliminar" onClick={() => delProp(p)}><Ic n="delete" /></button></td></tr>)}</tbody>
      </table></div>
      <h3 className="adm-sub">Lista de espera de moais <span className="pill sky">{moai.length}</span></h3>
      <div className="adm-table-wrap"><table className="adm-table" id="admin-moai-table">
        <thead><tr><th>Vecino</th><th>Email</th></tr></thead>
        <tbody>{!moai.length && <tr><td colSpan="2" className="adm-empty">Nadie en lista todavía.</td></tr>}
          {moai.map(([e]) => <tr key={e} data-email={e}><td>{(twc.names || {})[e] || "Vecino"}</td><td>{(twc.emails || {})[e] || e}</td></tr>)}</tbody>
      </table></div>
    </section>
  );
}

function Admin({ isAdmin, onLogin, users, posts, setPosts, dir, setDir, baro, flash }) {
  const [sec, setSec] = useState("resumen");
  const [twc0, setTwc] = useStored("vr3_twc", { circles: {}, moai: {}, props: [] });
  const twc = twcDefaults(twc0);
  useEffect(() => { document.title = "Panel de administración · Valdebebas Life"; const m = document.querySelector('meta[name="robots"]'); if (m) m.setAttribute("content", "noindex, nofollow"); return () => { if (m) m.setAttribute("content", "index, follow, max-image-preview:large"); }; }, []);
  if (!isAdmin) return (
    <section className="sec" id="admin-locked"><div className="wrap"><div className="empty" style={{ maxWidth: 520, margin: "40px auto" }}>
      <Ic n="lock" style={{ fontSize: 44 }} /><b style={{ color: "var(--ink)", fontSize: 20 }}>Acceso restringido</b><p>Esta zona es solo para la administración de la Asociación Española TWC.</p>
      <button id="admin-login-btn" className="btn" onClick={onLogin}><Ic n="login" />Entrar como administrador</button>
    </div></div></section>
  );
  const pend = dir.filter(x => x.status === "pendiente").length;
  const rep = posts.filter(p => (p.reports || 0) > 0 && (!p.expires || p.expires > Date.now())).length;
  return (
    <div id="admin-panel" className="adm" data-section={sec}>
      <div className="adm-top"><div className="wrap adm-top-in"><div><div className="eyebrow"><Ic n="shield_person" />Administración</div><h1>Panel de Valdebebas Life</h1></div><span className="badge admin">Asociación Española TWC · NIF G93978617</span></div></div>
      <div className="wrap adm-body">
        <nav className="side adm-nav" id="admin-nav" aria-label="Secciones del panel">
          {ADM_SECTIONS.map(s => <button key={s.id} id={"admin-nav-" + s.id} data-section={s.id} className={sec === s.id ? "on" : ""} onClick={() => setSec(s.id)}><span className="ico green"><Ic n={s.icon} /></span>{s.label}{s.id === "tablon" && rep > 0 && <em className="adm-alert">{rep}</em>}{s.id === "directorio" && pend > 0 && <em className="adm-alert">{pend}</em>}</button>)}
        </nav>
        <div className="adm-main">
          {sec === "resumen" && <AdminDashboard users={users} posts={posts} dir={dir} baro={baro} twc={twc} />}
          {sec === "tablon" && <AdminBoard posts={posts} setPosts={setPosts} flash={flash} />}
          {sec === "directorio" && <AdminDirectory dir={dir} setDir={setDir} flash={flash} />}
          {sec === "comunidad" && <AdminCommunity twc={twc} setTwc={setTwc} flash={flash} />}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Admin });