/* ============================================================
   EOLODENT — Admin modules: Pacientes, Citas, Servicios, Blog, Sucursales
   ============================================================ */

/* ============== PACIENTES (CRM) ============== */
function PacienteForm({ rec, onSave, onClose }) {
  const [f, setF] = useState(rec || { name: "", phone: "", email: "", dob: "", branch: "coyoacan", status: "activo", notes: "", created: new Date().toISOString().slice(0, 10) });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  return (
    <form onSubmit={(e) => { e.preventDefault(); if (!f.name.trim()) return; onSave(f); }}>
      <div className="aform-grid">
        <Field label="Nombre completo" full><input value={f.name} onChange={set("name")} placeholder="Nombre y apellidos" required /></Field>
        <Field label="Teléfono"><input value={f.phone} onChange={set("phone")} placeholder="10 dígitos" /></Field>
        <Field label="Correo"><input value={f.email} onChange={set("email")} type="email" /></Field>
        <Field label="Fecha de nacimiento"><input value={f.dob} onChange={set("dob")} type="date" /></Field>
        <Field label="Sucursal preferida">
          <select value={f.branch} onChange={set("branch")}><option value="coyoacan">Coyoacán</option><option value="narvarte">Narvarte</option></select>
        </Field>
        <Field label="Estado">
          <select value={f.status} onChange={set("status")}><option value="activo">Activo</option><option value="inactivo">Inactivo</option></select>
        </Field>
        <Field label="Notas internas" full><textarea rows="3" value={f.notes} onChange={set("notes")} placeholder="Tratamientos, alergias, recordatorios…"></textarea></Field>
      </div>
      <div className="modal__actions"><button type="button" className="btn btn--ghost btn--sm" onClick={onClose}>Cancelar</button><button type="submit" className="btn btn--primary btn--sm">Guardar paciente</button></div>
    </form>
  );
}

function PacienteDetail({ p, appts, onClose, onEdit }) {
  const history = appts.filter((a) => a.patientId === p.id || a.patient === p.name).sort((a, b) => new Date(b.when) - new Date(a.when));
  return (
    <div>
      <div className="pt-detail__head">
        <div className="pt-detail__av">{p.name.slice(0, 1)}</div>
        <div><h3 style={{ margin: 0 }}>{p.name}</h3><span className={`pill pill--${p.status}`}>{p.status}</span></div>
        <button className="btn btn--ghost btn--sm" style={{ marginLeft: "auto" }} onClick={onEdit}><Icon name="edit" size={15} />Editar</button>
      </div>
      <div className="pt-detail__meta">
        <div><Icon name="phone" size={16} /><span>{p.phone || "—"}</span></div>
        <div><Icon name="mail" size={16} /><span>{p.email || "—"}</span></div>
        <div><Icon name="map" size={16} /><span>{BRANCH_LABEL[p.branch]}</span></div>
        <div><Icon name="calendar" size={16} /><span>Alta: {fmtDate(p.created + "T12:00:00")}</span></div>
      </div>
      {p.notes ? <div className="pt-detail__notes"><strong>Notas</strong><p>{p.notes}</p></div> : null}
      <div className="pt-detail__history">
        <strong>Historial de visitas ({history.length})</strong>
        {history.length === 0 ? <div className="empty">Sin visitas registradas.</div> : history.map((a) => (
          <div key={a.id} className="pt-visit">
            <div className="pt-visit__date">{fmtDate(a.when, { day: "2-digit", month: "short", year: "numeric" })}<span>{fmtTime(a.when)}</span></div>
            <div className="pt-visit__info"><strong>{a.service}</strong><span>{BRANCH_LABEL[a.branch]} · {a.dentist}</span></div>
            <div className="pt-visit__right"><Badge status={a.status} /><span className="pt-visit__price">{money(a.price)}</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AdminPacientes({ branchFilter }) {
  const store = useStore();
  const appts = store.get("appointments");
  let list = store.get("patients");
  const [q, setQ] = useState("");
  const [statusF, setStatusF] = useState("all");
  const [edit, setEdit] = useState(null); // record or "new"
  const [detail, setDetail] = useState(null);
  const [confirm, confirmNode] = useConfirm();

  if (branchFilter !== "all") list = list.filter((p) => p.branch === branchFilter);
  if (statusF !== "all") list = list.filter((p) => p.status === statusF);
  if (q) list = list.filter((p) => (p.name + p.phone + p.email).toLowerCase().includes(q.toLowerCase()));

  const save = (f) => { if (f.id) store.update("patients", f.id, f); else store.add("patients", f); setEdit(null); };

  return (
    <div>
      <div className="page-title"><div><h1>Pacientes</h1><p className="muted">{store.get("patients").length} pacientes registrados</p></div>
        <button className="btn btn--primary btn--sm" onClick={() => setEdit("new")}><Icon name="plus" size={16} />Nuevo paciente</button></div>
      <div className="toolbar">
        <div className="search"><Icon name="search" size={17} /><input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar por nombre, teléfono o correo…" /></div>
        <div className="seg">
          {["all", "activo", "inactivo"].map((s) => <button key={s} className={statusF === s ? "on" : ""} onClick={() => setStatusF(s)}>{s === "all" ? "Todos" : s}</button>)}
        </div>
      </div>
      <div className="table-card">
        <table className="data-table">
          <thead><tr><th>Paciente</th><th>Contacto</th><th>Sucursal</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {list.map((p) => (
              <tr key={p.id} onClick={() => setDetail(p)}>
                <td><div className="cell-user"><div className="cell-av">{p.name.slice(0, 1)}</div><div><strong>{p.name}</strong><span>Alta {fmtDate(p.created + "T12:00:00", { day: "2-digit", month: "short" })}</span></div></div></td>
                <td><div className="cell-stack"><span>{p.phone}</span><span className="muted">{p.email}</span></div></td>
                <td>{BRANCH_LABEL[p.branch]}</td>
                <td><span className={`pill pill--${p.status}`}>{p.status}</span></td>
                <td className="cell-actions" onClick={(e) => e.stopPropagation()}>
                  <button onClick={() => setEdit(p)} title="Editar"><Icon name="edit" size={16} /></button>
                  <button onClick={() => confirm(`¿Eliminar a ${p.name}?`, () => store.remove("patients", p.id))} title="Eliminar"><Icon name="trash" size={16} /></button>
                </td>
              </tr>
            ))}
            {list.length === 0 ? <tr><td colSpan="5"><div className="empty">No se encontraron pacientes.</div></td></tr> : null}
          </tbody>
        </table>
      </div>
      {edit ? <Modal title={edit === "new" ? "Nuevo paciente" : "Editar paciente"} onClose={() => setEdit(null)} wide><PacienteForm rec={edit === "new" ? null : edit} onSave={save} onClose={() => setEdit(null)} /></Modal> : null}
      {detail ? <Modal title="Ficha del paciente" onClose={() => setDetail(null)} wide><PacienteDetail p={detail} appts={appts} onClose={() => setDetail(null)} onEdit={() => { setEdit(detail); setDetail(null); }} /></Modal> : null}
      {confirmNode}
    </div>
  );
}

/* ============== CITAS ============== */
function CitaForm({ rec, onSave, onClose }) {
  const store = useStore();
  const services = store.get("services").filter((s) => s.active);
  const patients = store.get("patients");
  const init = rec || { patient: "", patientId: null, phone: "", branch: "coyoacan", service: services[0] ? services[0].name : "", dentist: "Por asignar", date: "", time: "10:00", status: "pendiente", price: services[0] ? services[0].price : 0, notes: "" };
  if (rec) { const d = new Date(rec.when); init.date = d.toISOString().slice(0, 10); init.time = d.toTimeString().slice(0, 5); }
  const [f, setF] = useState(init);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const onService = (e) => { const s = services.find((x) => x.name === e.target.value); setF({ ...f, service: e.target.value, price: s ? s.price : f.price }); };
  const onPatient = (e) => { const p = patients.find((x) => x.id === e.target.value); if (p) setF({ ...f, patient: p.name, patientId: p.id, phone: p.phone, branch: p.branch }); else setF({ ...f, patientId: null }); };
  const submit = (e) => {
    e.preventDefault();
    if (!f.patient.trim() || !f.date) return;
    const when = new Date(f.date + "T" + f.time + ":00").toISOString();
    onSave({ ...f, when });
  };
  return (
    <form onSubmit={submit}>
      <div className="aform-grid">
        <Field label="Paciente registrado (opcional)" full>
          <select value={f.patientId || ""} onChange={onPatient}><option value="">— Nuevo / sin registro —</option>{patients.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select>
        </Field>
        <Field label="Nombre del paciente"><input value={f.patient} onChange={set("patient")} required /></Field>
        <Field label="Teléfono"><input value={f.phone} onChange={set("phone")} /></Field>
        <Field label="Sucursal"><select value={f.branch} onChange={set("branch")}><option value="coyoacan">Coyoacán</option><option value="narvarte">Narvarte</option></select></Field>
        <Field label="Servicio"><select value={f.service} onChange={onService}>{services.map((s) => <option key={s.id} value={s.name}>{s.name}</option>)}</select></Field>
        <Field label="Fecha"><input type="date" value={f.date} onChange={set("date")} required /></Field>
        <Field label="Hora"><input type="time" value={f.time} onChange={set("time")} /></Field>
        <Field label="Odontólogo"><select value={f.dentist} onChange={set("dentist")}><option>Por asignar</option><option>Dra. Paola Núñez</option><option>Dr. Iván Castro</option></select></Field>
        <Field label="Estado"><select value={f.status} onChange={set("status")}>{Object.keys(STATUS_LABEL).map((s) => <option key={s} value={s}>{STATUS_LABEL[s]}</option>)}</select></Field>
        <Field label="Precio (MXN)"><input type="number" value={f.price} onChange={set("price")} /></Field>
        <Field label="Notas" full><textarea rows="2" value={f.notes} onChange={set("notes")}></textarea></Field>
      </div>
      <div className="modal__actions"><button type="button" className="btn btn--ghost btn--sm" onClick={onClose}>Cancelar</button><button type="submit" className="btn btn--primary btn--sm">Guardar cita</button></div>
    </form>
  );
}

function AdminCitas({ branchFilter }) {
  const store = useStore();
  let list = store.get("appointments");
  const [statusF, setStatusF] = useState("all");
  const [edit, setEdit] = useState(null);
  const [confirm, confirmNode] = useConfirm();
  useEffect(() => { const q = new URLSearchParams(window.location.hash.split("?")[1] || ""); if (q.get("new")) setEdit("new"); }, []);

  if (branchFilter !== "all") list = list.filter((a) => a.branch === branchFilter);
  if (statusF !== "all") list = list.filter((a) => a.status === statusF);
  list = [...list].sort((a, b) => new Date(b.when) - new Date(a.when));

  // group by date
  const groups = {};
  list.forEach((a) => { const k = new Date(a.when).toDateString(); (groups[k] = groups[k] || []).push(a); });
  const save = (f) => { if (f.id) store.update("appointments", f.id, f); else store.add("appointments", f); setEdit(null); };
  const counts = { all: 0, pendiente: 0, confirmada: 0, completada: 0, cancelada: 0 };
  (branchFilter === "all" ? store.get("appointments") : store.get("appointments").filter((a) => a.branch === branchFilter)).forEach((a) => { counts.all++; counts[a.status]++; });

  return (
    <div>
      <div className="page-title"><div><h1>Citas</h1><p className="muted">{counts.all} citas · {counts.pendiente} pendientes</p></div>
        <button className="btn btn--primary btn--sm" onClick={() => setEdit("new")}><Icon name="plus" size={16} />Nueva cita</button></div>
      <div className="toolbar">
        <div className="seg">
          {["all", "pendiente", "confirmada", "completada", "cancelada"].map((s) => <button key={s} className={statusF === s ? "on" : ""} onClick={() => setStatusF(s)}>{s === "all" ? "Todas" : STATUS_LABEL[s]} <em>{counts[s]}</em></button>)}
        </div>
      </div>
      {Object.keys(groups).length === 0 ? <div className="table-card"><div className="empty">No hay citas con este filtro.</div></div> : Object.keys(groups).map((day) => (
        <div key={day} className="cita-group">
          <div className="cita-group__date">{isSameDay(groups[day][0].when) ? "Hoy · " : ""}{fmtDate(groups[day][0].when, { weekday: "long", day: "numeric", month: "long" })}</div>
          <div className="table-card">
            {groups[day].sort((a, b) => new Date(a.when) - new Date(b.when)).map((a) => (
              <div key={a.id} className="cita-row">
                <div className="cita-row__time"><Icon name="clock" size={15} />{fmtTime(a.when)}</div>
                <div className="cita-row__patient"><strong>{a.patient}</strong><span>{a.phone}</span></div>
                <div className="cita-row__svc"><strong>{a.service}</strong><span>{BRANCH_LABEL[a.branch]} · {a.dentist}</span></div>
                <div className="cita-row__price">{money(a.price)}</div>
                <select className="status-select" value={a.status} onChange={(e) => store.update("appointments", a.id, { status: e.target.value })} data-s={a.status}>
                  {Object.keys(STATUS_LABEL).map((s) => <option key={s} value={s}>{STATUS_LABEL[s]}</option>)}
                </select>
                <div className="cell-actions">
                  <button onClick={() => setEdit(a)} title="Editar"><Icon name="edit" size={16} /></button>
                  <button onClick={() => confirm(`¿Eliminar la cita de ${a.patient}?`, () => store.remove("appointments", a.id))} title="Eliminar"><Icon name="trash" size={16} /></button>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
      {edit ? <Modal title={edit === "new" ? "Nueva cita" : "Editar cita"} onClose={() => setEdit(null)} wide><CitaForm rec={edit === "new" ? null : edit} onSave={save} onClose={() => setEdit(null)} /></Modal> : null}
      {confirmNode}
    </div>
  );
}

/* ============== SERVICIOS ============== */
function ServicioForm({ rec, onSave, onClose }) {
  const icons = ["tooth", "tooth-root", "braces", "implant", "surgery", "mini-implant", "gums", "clean", "xray", "filling"];
  const [f, setF] = useState(rec || { name: "", key: "", short: "", long: "", benefits: [], duration: 60, price: 0, icon: "tooth", active: true });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  return (
    <form onSubmit={(e) => { e.preventDefault(); if (!f.name.trim()) return; onSave({ ...f, key: f.key || f.name.toLowerCase().replace(/[^a-z0-9]+/g, "-"), benefits: typeof f.benefits === "string" ? f.benefits.split("\n").filter(Boolean) : f.benefits }); }}>
      <div className="aform-grid">
        <Field label="Nombre"><input value={f.name} onChange={set("name")} required /></Field>
        <Field label="Ícono">
          <div className="icon-pick">{icons.map((ic) => <button type="button" key={ic} className={f.icon === ic ? "on" : ""} onClick={() => setF({ ...f, icon: ic })}><Icon name={ic} size={20} /></button>)}</div>
        </Field>
        <Field label="Descripción corta" full><input value={f.short} onChange={set("short")} /></Field>
        <Field label="Descripción larga" full><textarea rows="3" value={f.long} onChange={set("long")}></textarea></Field>
        <Field label="Beneficios (uno por línea)" full><textarea rows="3" value={Array.isArray(f.benefits) ? f.benefits.join("\n") : f.benefits} onChange={set("benefits")}></textarea></Field>
        <Field label="Duración (min)"><input type="number" value={f.duration} onChange={set("duration")} /></Field>
        <Field label="Precio (MXN)"><input type="number" value={f.price} onChange={set("price")} /></Field>
        <Field label="Estado"><select value={f.active ? "1" : "0"} onChange={(e) => setF({ ...f, active: e.target.value === "1" })}><option value="1">Activo</option><option value="0">Inactivo</option></select></Field>
      </div>
      <div className="modal__actions"><button type="button" className="btn btn--ghost btn--sm" onClick={onClose}>Cancelar</button><button type="submit" className="btn btn--primary btn--sm">Guardar servicio</button></div>
    </form>
  );
}

function AdminServicios() {
  const store = useStore();
  const list = store.get("services");
  const [edit, setEdit] = useState(null);
  const [confirm, confirmNode] = useConfirm();
  const save = (f) => { if (f.id) store.update("services", f.id, f); else store.add("services", f); setEdit(null); };
  return (
    <div>
      <div className="page-title"><div><h1>Servicios</h1><p className="muted">{list.length} tratamientos en el catálogo</p></div>
        <button className="btn btn--primary btn--sm" onClick={() => setEdit("new")}><Icon name="plus" size={16} />Nuevo servicio</button></div>
      <div className="svc-admin-grid">
        {list.map((s) => (
          <div key={s.id} className={`svc-admin ${s.active ? "" : "off"}`}>
            <div className="svc-admin__icon"><Icon name={s.icon} size={24} /></div>
            <div className="svc-admin__body">
              <div className="spread"><strong>{s.name}</strong><span className={`pill pill--${s.active ? "activo" : "inactivo"}`}>{s.active ? "Activo" : "Inactivo"}</span></div>
              <p>{s.short}</p>
              <div className="svc-admin__facts"><span>{money(s.price)}</span><span>{s.duration} min</span></div>
            </div>
            <div className="svc-admin__actions">
              <button onClick={() => setEdit(s)}><Icon name="edit" size={16} /></button>
              <button onClick={() => store.update("services", s.id, { active: !s.active })} title="Activar/desactivar"><Icon name={s.active ? "x" : "check"} size={16} /></button>
              <button onClick={() => confirm(`¿Eliminar ${s.name}?`, () => store.remove("services", s.id))}><Icon name="trash" size={16} /></button>
            </div>
          </div>
        ))}
      </div>
      {edit ? <Modal title={edit === "new" ? "Nuevo servicio" : "Editar servicio"} onClose={() => setEdit(null)} wide><ServicioForm rec={edit === "new" ? null : edit} onSave={save} onClose={() => setEdit(null)} /></Modal> : null}
      {confirmNode}
    </div>
  );
}

/* ============== BLOG ============== */
function BlogForm({ rec, onSave, onClose }) {
  const bodyToText = (body) => (body || []).map((b) => (b.type === "h" ? "## " + b.text : b.text)).join("\n\n");
  const [f, setF] = useState(rec ? { ...rec, bodyText: bodyToText(rec.body) } : { title: "", slug: "", category: "Consejos", excerpt: "", cover: "", status: "borrador", date: new Date().toISOString().slice(0, 10), bodyText: "" });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    if (!f.title.trim()) return;
    const body = f.bodyText.split(/\n\n+/).map((t) => t.trim()).filter(Boolean).map((t) => t.startsWith("## ") ? { type: "h", text: t.slice(3) } : { type: "p", text: t });
    const slug = f.slug || f.title.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
    onSave({ ...f, slug, body });
  };
  return (
    <form onSubmit={submit}>
      <div className="aform-grid">
        <Field label="Título" full><input value={f.title} onChange={set("title")} required /></Field>
        <Field label="Categoría"><select value={f.category} onChange={set("category")}><option>Consejos</option><option>Novedades</option><option>Tratamientos</option></select></Field>
        <Field label="Estado"><select value={f.status} onChange={set("status")}><option value="borrador">Borrador</option><option value="publicado">Publicado</option></select></Field>
        <Field label="Fecha"><input type="date" value={f.date} onChange={set("date")} /></Field>
        <Field label="Extracto" full><input value={f.excerpt} onChange={set("excerpt")} /></Field>
        <Field label="Contenido (línea vacía = párrafo · ## para subtítulo)" full><textarea rows="9" value={f.bodyText} onChange={set("bodyText")}></textarea></Field>
      </div>
      <div className="modal__actions"><button type="button" className="btn btn--ghost btn--sm" onClick={onClose}>Cancelar</button><button type="submit" className="btn btn--primary btn--sm">Guardar publicación</button></div>
    </form>
  );
}

function AdminBlog() {
  const store = useStore();
  const list = store.get("posts");
  const [edit, setEdit] = useState(null);
  const [confirm, confirmNode] = useConfirm();
  const save = (f) => { if (f.id) store.update("posts", f.id, f); else store.add("posts", { ...f, cover: f.cover || "blog-" + f.slug }); setEdit(null); };
  return (
    <div>
      <div className="page-title"><div><h1>Blog</h1><p className="muted">{list.length} publicaciones · {list.filter((p) => p.status === "publicado").length} publicadas</p></div>
        <button className="btn btn--primary btn--sm" onClick={() => setEdit("new")}><Icon name="plus" size={16} />Nueva publicación</button></div>
      <div className="table-card">
        <table className="data-table">
          <thead><tr><th>Título</th><th>Categoría</th><th>Fecha</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {list.map((p) => (
              <tr key={p.id}>
                <td><strong>{p.title}</strong><div className="muted" style={{ fontSize: ".82rem" }}>/{p.slug}</div></td>
                <td><span className="chip">{p.category}</span></td>
                <td>{fmtDate(p.date + "T12:00:00")}</td>
                <td><span className={`pill pill--${p.status === "publicado" ? "activo" : "inactivo"}`}>{p.status}</span></td>
                <td className="cell-actions">
                  <button onClick={() => window.open("#/blog/" + p.slug, "_self")} title="Ver"><Icon name="search" size={16} /></button>
                  <button onClick={() => setEdit(p)}><Icon name="edit" size={16} /></button>
                  <button onClick={() => confirm(`¿Eliminar "${p.title}"?`, () => store.remove("posts", p.id))}><Icon name="trash" size={16} /></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {edit ? <Modal title={edit === "new" ? "Nueva publicación" : "Editar publicación"} onClose={() => setEdit(null)} wide><BlogForm rec={edit === "new" ? null : edit} onSave={save} onClose={() => setEdit(null)} /></Modal> : null}
      {confirmNode}
    </div>
  );
}

/* ============== SUCURSALES ============== */
function AdminSucursales() {
  const store = useStore();
  const list = store.get("branches");
  const [edit, setEdit] = useState(null);
  return (
    <div>
      <div className="page-title"><div><h1>Sucursales</h1><p className="muted">{list.length} sucursales</p></div></div>
      <div className="branches__grid grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
        {list.map((b) => (
          <div key={b.id} className="suc-admin">
            <div className="spread"><h3>{b.name}</h3><button className="btn btn--ghost btn--sm" onClick={() => setEdit(b)}><Icon name="edit" size={15} />Editar</button></div>
            <ul className="branch-card__meta" style={{ marginTop: 18 }}>
              <li><Icon name="map" size={16} /><span>{b.address}</span></li>
              <li><Icon name="clock" size={16} /><span>{b.hours}</span></li>
              <li><Icon name="phone" size={16} /><span>{b.phones.join(" · ")}</span></li>
              <li><Icon name="mail" size={16} /><span>{b.email}</span></li>
              {b.note ? <li><Icon name="car" size={16} /><span>{b.note}</span></li> : null}
            </ul>
          </div>
        ))}
      </div>
      {edit ? <Modal title="Editar sucursal" onClose={() => setEdit(null)} wide><SucursalForm rec={edit} onSave={(f) => { store.update("branches", f.id, f); setEdit(null); }} onClose={() => setEdit(null)} /></Modal> : null}
    </div>
  );
}

function SucursalForm({ rec, onSave, onClose }) {
  const [f, setF] = useState({ ...rec, phonesText: rec.phones.join(", ") });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  return (
    <form onSubmit={(e) => { e.preventDefault(); onSave({ ...f, phones: f.phonesText.split(",").map((s) => s.trim()).filter(Boolean), parking: !!f.note }); }}>
      <div className="aform-grid">
        <Field label="Nombre" full><input value={f.name} onChange={set("name")} /></Field>
        <Field label="Dirección" full><input value={f.address} onChange={set("address")} /></Field>
        <Field label="Teléfonos (separados por coma)" full><input value={f.phonesText} onChange={set("phonesText")} /></Field>
        <Field label="Correo"><input value={f.email} onChange={set("email")} /></Field>
        <Field label="Horario"><input value={f.hours} onChange={set("hours")} /></Field>
        <Field label="Nota (estacionamiento, etc.)" full><input value={f.note} onChange={set("note")} /></Field>
      </div>
      <div className="modal__actions"><button type="button" className="btn btn--ghost btn--sm" onClick={onClose}>Cancelar</button><button type="submit" className="btn btn--primary btn--sm">Guardar</button></div>
    </form>
  );
}

Object.assign(window, { AdminPacientes, AdminCitas, AdminServicios, AdminBlog, AdminSucursales });