// Vista de Turnos — Calendario mensual con panel de día (turnos + horarios disponibles)

// Turno = entrada de un vehículo (sin estado). Color único (amarillo marca).
const TURNO_COLOR  = "#f5d416";
const TURNO_BG     = "rgba(245,212,22,0.10)";

const CAL_START = 8;   // 08:00
const CAL_END   = 18;  // 18:00

// Recordatorio personalizado (día completo) — violeta para distinguirlo de los turnos
const REC_COLOR  = "#a78bfa";
const REC_BG     = "rgba(167,139,250,0.12)";
const REC_BORDER = "rgba(167,139,250,0.30)";

const MES_NOMBRES = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
const DIAS_FULL   = ["Lun","Mar","Mié","Jue","Vie","Sáb","Dom"];

function isoWeekDays(refIso) {
  const d   = new Date(refIso + "T12:00:00");
  const dow = d.getDay();
  const mon = new Date(d);
  mon.setDate(d.getDate() - (dow === 0 ? 6 : dow - 1));
  return Array.from({ length: 7 }, (_, i) => {
    const dd = new Date(mon);
    dd.setDate(mon.getDate() + i);
    return dd.toISOString().slice(0, 10);
  });
}

function toDateStr(year, month, day) {
  return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
}

// Grilla del mes: array de celdas { day, date } | null (padding)
function buildMonthGrid(year, month) {
  const firstDow = (new Date(year, month, 1).getDay() + 6) % 7; // 0 = lunes
  const days     = new Date(year, month + 1, 0).getDate();
  const cells    = Array(firstDow).fill(null);
  for (let d = 1; d <= days; d++) cells.push({ day: d, date: toDateStr(year, month, d) });
  while (cells.length % 7 !== 0) cells.push(null);
  return cells;
}

// Slots horarios del día (08:00 → 17:30, cada 30 min)
const DAY_SLOTS = (() => {
  const out = [];
  for (let h = CAL_START; h < CAL_END; h++) {
    out.push(`${String(h).padStart(2, "0")}:00`);
    out.push(`${String(h).padStart(2, "0")}:30`);
  }
  return out;
})();

// ── Panel del día (recordatorios + turnos + horarios disponibles) ──
function DiaPanel({ dateIso, turnos, recordatorios, onClose, onSelectTurno, onNuevoSlot, onNuevoRec, onDeleteRec }) {
  const d = new Date(dateIso + "T12:00:00");
  const dayTurnos = turnos
    .filter(t => t.fecha === dateIso)
    .sort((a, b) => a.horaInicio.localeCompare(b.horaInicio));
  const dayRecs = (recordatorios || []).filter(r => r.fecha === dateIso);

  const ocupado = (slot) => dayTurnos.some(t => t.horaInicio === slot);

  // Grilla dinámica: slots base + cualquier turno fuera del rango, ordenados cronológicamente
  const turnSlots  = dayTurnos.map(t => t.horaInicio);
  const slotsToShow = [...new Set([...DAY_SLOTS, ...turnSlots])].sort();

  return (
    <div className="day-panel">
      <div className="day-panel__head">
        <div>
          <div className="day-panel__title">{d.getDate()} de {MES_NOMBRES[d.getMonth()]}</div>
          <div className="muted" style={{ fontSize: 11, fontFamily: "var(--font-mono)", marginTop: 2 }}>
            {DIAS_FULL[(d.getDay() + 6) % 7]} · {dayTurnos.length} turno{dayTurnos.length !== 1 ? "s" : ""}
            {dayRecs.length > 0 ? ` · ${dayRecs.length} record.` : ""}
          </div>
        </div>
        <button className="btn btn--ghost btn--sm" onClick={onClose} title="Cerrar día">✕</button>
      </div>

      <div className="day-panel__body">
        {/* Recordatorios del día */}
        <div className="day-section">
          <div className="day-section__bar">
            <div className="day-section__title">Recordatorios</div>
            <button className="day-add-btn" onClick={() => onNuevoRec(dateIso)}>+ Recordatorio</button>
          </div>
          {dayRecs.length === 0 ? (
            <div className="day-empty">Sin recordatorios</div>
          ) : (
            <div className="day-recs">
              {dayRecs.map(r => (
                <div key={r.id} className="day-rec">
                  <div className="day-rec__main">
                    <div className="day-rec__title">{r.titulo}</div>
                    {r.nota && <div className="day-rec__nota">{r.nota}</div>}
                  </div>
                  <button className="line-del" title="Eliminar" onClick={() => onDeleteRec(r.id)}>✕</button>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Turnos del día */}
        <div className="day-section">
          <div className="day-section__title">Turnos del día</div>
          {dayTurnos.length === 0 ? (
            <div className="day-empty">Sin turnos agendados</div>
          ) : (
            <div className="day-turnos">
              {dayTurnos.map(t => (
                <div key={t.id} className="day-turno" onClick={() => onSelectTurno(t)}
                  style={{ borderLeftColor: TURNO_COLOR }}>
                  <div className="day-turno__top">
                    <span className="day-turno__time" style={{ color: TURNO_COLOR }}>
                      {t.horaInicio}
                    </span>
                  </div>
                  <div className="day-turno__cliente">{t.cliente}</div>
                  <div className="day-turno__meta">
                    {t.patente && <b className="mono" style={{ color: "var(--brand)", letterSpacing: 0.5 }}>{t.patente}</b>}
                    {t.patente && t.servicio ? " · " : ""}
                    {t.servicio}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Horarios disponibles */}
        <div className="day-section">
          <div className="day-section__title">Horarios</div>
          <div className="day-slots">
            {slotsToShow.map(slot => {
              const taken = ocupado(slot);
              return (
                <button key={slot}
                  className={`day-slot${taken ? " day-slot--taken" : ""}`}
                  disabled={taken}
                  onClick={() => !taken && onNuevoSlot(dateIso, slot)}
                  title={taken ? "Ocupado" : `Nuevo turno · ${slot}`}>
                  {slot}
                </button>
              );
            })}
          </div>
          <div className="day-slots__hint muted">Tocá un horario libre para agendar</div>
        </div>
      </div>
    </div>
  );
}

// ── Vista principal ──
function TurnosView({ data, setData }) {
  const now      = new Date();
  const today    = now.toISOString().slice(0, 10);
  const [year,  setYear]  = React.useState(now.getFullYear());
  const [month, setMonth] = React.useState(now.getMonth());
  const [selectedDate, setSelectedDate] = React.useState(today); // arranca en el mes actual → hoy
  const [selected, setSelected]   = React.useState(null);   // turno (modal detalle)
  const [showNew,  setShowNew]    = React.useState(false);
  const [newInit,  setNewInit]    = React.useState(null);   // prefill { fecha, horaInicio }
  const [showNewRec, setShowNewRec] = React.useState(false);
  const [recInit,    setRecInit]    = React.useState(null); // prefill { fecha }

  const turnos        = data.turnos || [];
  const recordatorios = data.recordatorios || [];
  const recsOn = (dateIso) => recordatorios.filter(r => r.fecha === dateIso);

  const isCurrentMonth = year === now.getFullYear() && month === now.getMonth();
  const grid = buildMonthGrid(year, month);

  const turnosOn = (dateIso) =>
    turnos.filter(t => t.fecha === dateIso)
      .sort((a, b) => a.horaInicio.localeCompare(b.horaInicio));

  const prevMonth = () => {
    setSelectedDate(null);
    if (month === 0) { setYear(y => y - 1); setMonth(11); } else setMonth(m => m - 1);
  };
  const nextMonth = () => {
    setSelectedDate(null);
    if (month === 11) { setYear(y => y + 1); setMonth(0); } else setMonth(m => m + 1);
  };
  const goToday = () => { setYear(now.getFullYear()); setMonth(now.getMonth()); setSelectedDate(today); };

  // KPIs (semana en curso, independiente del mes que se navega)
  const weekDays    = isoWeekDays(today);
  const turnosHoy   = turnos.filter(t => t.fecha === today);
  const turnosSem   = turnos.filter(t => weekDays.includes(t.fecha));
  const recsHoy     = recordatorios.filter(r => r.fecha === today);
  const recsSem     = recordatorios.filter(r => weekDays.includes(r.fecha));

  const openNew = (init) => { setNewInit(init || { fecha: selectedDate || today }); setShowNew(true); };
  const openNewSlot = (dateIso, slot) => {
    setNewInit({ fecha: dateIso, horaInicio: slot });
    setShowNew(true);
  };

  const handleEliminar = (id) => {
    setData(d => ({ ...d, turnos: d.turnos.filter(t => t.id !== id) }));
    setSelected(null);
  };

  const openNewRec = (fecha) => { setRecInit({ fecha: fecha || selectedDate || today }); setShowNewRec(true); };
  const addRecordatorio = (rec) => {
    setData(d => ({ ...d, recordatorios: [...(d.recordatorios || []), { ...rec, id: Date.now() }] }));
    setShowNewRec(false);
    setRecInit(null);
  };
  const deleteRecordatorio = (id) =>
    setData(d => ({ ...d, recordatorios: (d.recordatorios || []).filter(r => r.id !== id) }));

  return (
    <div className="turnos-view">
      {/* ── KPIs ── */}
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "#f5d416" }} />
          <div className="kpi__icon" style={{ background: "rgba(245,212,22,.1)", color: "#f5d416" }}>
            <Icon.clock width="16" height="16" />
          </div>
          <div className="kpi__label">Turnos hoy</div>
          <div className="kpi__value">{turnosHoy.length}</div>
          <div className="kpi__sub muted">{turnosHoy.length === 1 ? "vehículo agendado" : "vehículos agendados"}</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "#4b8bf5" }} />
          <div className="kpi__icon" style={{ background: "rgba(75,139,245,.1)", color: "#4b8bf5" }}>
            <Icon.calendar width="16" height="16" />
          </div>
          <div className="kpi__label">Esta semana</div>
          <div className="kpi__value">{turnosSem.length}</div>
          <div className="kpi__sub muted">turnos en la semana</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "#a78bfa" }} />
          <div className="kpi__icon" style={{ background: "rgba(167,139,250,.12)", color: "#a78bfa" }}>
            <Icon.clock width="16" height="16" />
          </div>
          <div className="kpi__label">Recordatorios hoy</div>
          <div className="kpi__value" style={{ color: recsHoy.length > 0 ? "#a78bfa" : undefined }}>
            {recsHoy.length}
          </div>
          <div className="kpi__sub muted">para hoy</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "#a78bfa" }} />
          <div className="kpi__icon" style={{ background: "rgba(167,139,250,.12)", color: "#a78bfa" }}>
            <Icon.calendar width="16" height="16" />
          </div>
          <div className="kpi__label">Recordatorios semana</div>
          <div className="kpi__value" style={{ color: recsSem.length > 0 ? "#a78bfa" : undefined }}>
            {recsSem.length}
          </div>
          <div className="kpi__sub muted">esta semana</div>
        </div>
      </div>

      {/* ── Barra de navegación ── */}
      <div className="cal-toolbar">
        <div className="cal-toolbar__nav">
          <button className="btn btn--sm" onClick={prevMonth}>←</button>
          <button className="btn btn--sm" onClick={goToday}
            style={isCurrentMonth ? { borderColor: "rgba(245,212,22,0.45)", color: "#f5d416" } : {}}>
            Hoy
          </button>
          <button className="btn btn--sm" onClick={nextMonth}>→</button>
        </div>
        <span className="cal-toolbar__week">{MES_NOMBRES[month]} {year}</span>
        <div style={{ flex: 1 }} />
        <button className="btn btn--rec" onClick={() => openNewRec()}>
          <Icon.plus /> Recordatorio
        </button>
        <button className="btn btn--primary" onClick={() => openNew()}>
          <Icon.plus /> Nuevo turno
        </button>
      </div>

      {/* ── Mes + panel del día ── */}
      <div className="cal-split">
        <div className="cal-month">
          <div className="cal-month__labels">
            {DIAS_FULL.map(d => <div key={d} className="cal-month__label">{d}</div>)}
          </div>
          <div className="cal-month__grid">
            {grid.map((cell, idx) => {
              if (!cell) return <div key={idx} className="cal-cell cal-cell--empty" />;
              const isToday    = cell.date === today;
              const isSelected = cell.date === selectedDate;
              const dayTurnos  = turnosOn(cell.date);
              const chips = [
                ...recsOn(cell.date).map(r => ({ key: "r" + r.id, color: REC_COLOR, bg: REC_BG, text: r.titulo })),
                ...dayTurnos.map(t => ({ key: "t" + t.id, color: TURNO_COLOR, bg: TURNO_BG, text: `${t.horaInicio} ${t.cliente}` })),
              ];
              return (
                <div key={idx}
                  className={`cal-cell${isToday ? " cal-cell--today" : ""}${isSelected ? " cal-cell--selected" : ""}`}
                  onClick={() => setSelectedDate(isSelected ? null : cell.date)}>
                  <span className={`cal-cell__day${isToday ? " cal-cell__day--today" : ""}`}>{cell.day}</span>
                  {chips.slice(0, 2).map(c => (
                    <div key={c.key} className="cal-chip" style={{ color: c.color, background: c.bg }}>
                      {c.text}
                    </div>
                  ))}
                  {chips.length > 2 && (
                    <span className="cal-cell__more">+{chips.length - 2}</span>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {selectedDate ? (
          <DiaPanel
            dateIso={selectedDate}
            turnos={turnos}
            recordatorios={recordatorios}
            onClose={() => setSelectedDate(null)}
            onSelectTurno={setSelected}
            onNuevoSlot={openNewSlot}
            onNuevoRec={openNewRec}
            onDeleteRec={deleteRecordatorio}
          />
        ) : (
          <div className="day-panel--empty">
            Seleccioná un día<br />para ver sus horarios
          </div>
        )}
      </div>

      {/* ── Modal detalle ── */}
      {selected && (
        <TurnoDetalle
          turno={selected}
          onClose={() => setSelected(null)}
          onEliminar={handleEliminar}
        />
      )}

      {/* ── Modal nuevo turno ── */}
      {showNew && (
        <NuevoTurnoModal
          initial={newInit}
          onClose={() => { setShowNew(false); setNewInit(null); }}
          onSave={turno => {
            setData(d => ({ ...d, turnos: [...(d.turnos || []), { ...turno, id: Date.now() }] }));
            setShowNew(false);
            setNewInit(null);
          }}
        />
      )}

      {/* ── Modal nuevo recordatorio ── */}
      {showNewRec && (
        <NuevoRecordatorioModal
          initial={recInit}
          onClose={() => { setShowNewRec(false); setRecInit(null); }}
          onSave={addRecordatorio}
        />
      )}
    </div>
  );
}

// ── Modal detalle de un turno ──
function TurnoDetalle({ turno, onClose, onEliminar }) {
  const [confirmando, setConfirmando] = React.useState(false);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 500 }}>
        <div className="modal__head">
          <div className="modal__title">Turno</div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>

        <div className="modal__body" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {/* Fecha y hora */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div>
              <div className="field__label">Fecha</div>
              <div style={{ marginTop: 5, fontFamily: "var(--font-mono)", fontSize: 15 }}>{fmtDate(turno.fecha)}</div>
            </div>
            <div>
              <div className="field__label">Hora de entrada</div>
              <div style={{ marginTop: 5, fontFamily: "var(--font-mono)", fontSize: 15, color: TURNO_COLOR }}>
                {turno.horaInicio}
              </div>
            </div>
          </div>

          <div style={{ height: 1, background: "var(--border-soft)" }} />

          {/* Cliente */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div>
              <div className="field__label">Cliente</div>
              <div style={{ marginTop: 5, fontWeight: 600, fontSize: 15 }}>{turno.cliente}</div>
            </div>
            <div>
              <div className="field__label">Teléfono</div>
              <div style={{ marginTop: 5, fontFamily: "var(--font-mono)", color: "var(--text-dim)" }}>
                {turno.telefono || "—"}
              </div>
            </div>
          </div>

          {/* Vehículo */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 16, alignItems: "start" }}>
            <div>
              <div className="field__label">Vehículo</div>
              <div style={{ marginTop: 5, color: "var(--text-dim)" }}>{turno.vehiculo || "—"}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="field__label">Patente</div>
              <div style={{ marginTop: 5, fontFamily: "var(--font-mono)", fontWeight: 700, color: "var(--brand)", letterSpacing: 2, fontSize: 14 }}>
                {turno.patente || "—"}
              </div>
            </div>
          </div>

          {/* Servicio */}
          <div style={{ padding: "12px 14px", background: "var(--bg-soft)", borderRadius: "var(--radius)", border: "1px solid var(--border-soft)" }}>
            <div className="field__label" style={{ marginBottom: 6 }}>Servicio solicitado</div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{turno.servicio}</div>
          </div>

          {/* Notas */}
          {turno.notas && (
            <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderRadius: "var(--radius)", border: "1px solid var(--border-soft)", fontSize: 12, color: "var(--text-dim)" }}>
              <div className="field__label" style={{ marginBottom: 4 }}>Notas</div>
              {turno.notas}
            </div>
          )}
        </div>

        <div className="modal__foot">
          {confirmando ? (
            <>
              <span style={{ fontSize: 13, color: "var(--text-dim)", marginRight: "auto" }}>
                ¿Confirmar eliminación?
              </span>
              <button className="btn btn--ghost btn--sm" onClick={() => setConfirmando(false)}>
                Cancelar
              </button>
              <button className="btn btn--sm"
                style={{ background: "var(--accent)", color: "#fff", borderColor: "var(--accent)" }}
                onClick={() => onEliminar(turno.id)}>
                <Icon.trash /> Sí, eliminar
              </button>
            </>
          ) : (
            <>
              <button className="btn btn--sm" style={{ color: "var(--accent)", borderColor: "rgba(230,57,70,0.3)", marginRight: "auto" }}
                onClick={() => setConfirmando(true)}>
                <Icon.trash /> Eliminar
              </button>
              <button className="btn btn--primary" onClick={onClose}>Listo</button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Modal nuevo turno ──
const TIME_SLOTS = Array.from({ length: 25 }, (_, i) => {
  const h = Math.floor(i / 2) + 7;
  const m = (i % 2) * 30;
  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
}); // 07:00 → 19:00 en saltos de 30 min

function NuevoTurnoModal({ onClose, onSave, initial }) {
  const today = new Date().toISOString().slice(0, 10);
  const [form, setForm] = React.useState({
    fecha: initial?.fecha || today,
    horaInicio: initial?.horaInicio || "09:00",
    cliente: "", telefono: "", vehiculo: "", patente: "",
    servicio: "", notas: "",
  });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const valid = form.cliente.trim().length > 0 && form.servicio.trim().length > 0;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 560 }}>
        <div className="modal__head">
          <div className="modal__title">Nuevo turno</div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>

        <div className="modal__body" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label className="field__label">Fecha</label>
              <input type="date" value={form.fecha} onChange={set("fecha")} />
            </div>
            <div className="field">
              <label className="field__label">Hora de entrada</label>
              <CustomSelect value={form.horaInicio} onChange={set("horaInicio")}>
                {TIME_SLOTS.map(t => <option key={t} value={t}>{t}</option>)}
              </CustomSelect>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label className="field__label">Cliente *</label>
              <input value={form.cliente} onChange={set("cliente")} placeholder="Nombre y apellido" autoFocus />
            </div>
            <div className="field">
              <label className="field__label">Teléfono</label>
              <input value={form.telefono} onChange={set("telefono")} placeholder="11-XXXX-XXXX" />
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label className="field__label">Vehículo</label>
              <input value={form.vehiculo} onChange={set("vehiculo")} placeholder="Marca Modelo" />
            </div>
            <div className="field">
              <label className="field__label">Patente</label>
              <input value={form.patente}
                onChange={e => setForm(f => ({ ...f, patente: e.target.value.toUpperCase() }))}
                placeholder="AB 123 CD" />
            </div>
          </div>

          <div className="field">
            <label className="field__label">Servicio solicitado *</label>
            <input value={form.servicio} onChange={set("servicio")}
              placeholder="Ej: cambio de aceite, diagnóstico, correa de distribución..." />
          </div>

          <div className="field">
            <label className="field__label">Notas</label>
            <input value={form.notas} onChange={set("notas")} placeholder="Ej: referido, vía WhatsApp..." />
          </div>
        </div>

        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn--primary" onClick={() => valid && onSave(form)}
            style={{ opacity: valid ? 1 : 0.45 }} disabled={!valid}>
            <Icon.check /> Guardar turno
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Modal nuevo recordatorio (día completo) ──
function NuevoRecordatorioModal({ onClose, onSave, initial }) {
  const today = new Date().toISOString().slice(0, 10);
  const [form, setForm] = React.useState({
    fecha: initial?.fecha || today,
    titulo: "", nota: "",
  });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const valid = form.titulo.trim().length > 0;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 460 }}>
        <div className="modal__head">
          <div className="modal__title">Nuevo recordatorio</div>
          <span className="pill" style={{ background: REC_BG, color: REC_COLOR, border: `1px solid ${REC_BORDER}` }}>
            <span className="pill__dot" /> Día completo
          </span>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>

        <div className="modal__body" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="field">
            <label className="field__label">Recordatorio *</label>
            <input value={form.titulo} onChange={set("titulo")} autoFocus
              placeholder="Ej: Pagar seguro, llamar a proveedor…" />
          </div>
          <div className="field" style={{ maxWidth: 200 }}>
            <label className="field__label">Fecha</label>
            <input type="date" value={form.fecha} onChange={set("fecha")} />
          </div>
          <div className="field">
            <label className="field__label">Nota</label>
            <input value={form.nota} onChange={set("nota")} placeholder="Detalle opcional…" />
          </div>
        </div>

        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn--primary" onClick={() => valid && onSave(form)}
            style={{ opacity: valid ? 1 : 0.45 }} disabled={!valid}>
            <Icon.check /> Guardar recordatorio
          </button>
        </div>
      </div>
    </div>
  );
}

window.TurnosView = TurnosView;