/* === Huéspedes — Lista de huéspedes y Actividades programadas === */

const SUITES = [
  { id: "MB1",        label: "MB1 — Master 1" },
  { id: "MB2",        label: "MB2 — Master 2" },
  { id: "GB1",        label: "GB1 — Guest 1" },
  { id: "GB2",        label: "GB2 — Guest 2" },
  { id: "Girls Room", label: "Girls Room" },
  { id: "Boys Room",  label: "Boys Room" },
  { id: "Villa Martha", label: "Villa Martha" },
];

/* Seed: lista inicial de huéspedes y actividades */
const HUESPEDES_INIT = [
  {
    id: "g1",
    nombres: "Familia Patterson",
    llegada: "2026-05-28",
    salida: "2026-06-04",
    suites: ["MB1", "Boys Room", "Girls Room"],
    personas: [
      { id: "p1", nombre: "Michael Patterson",  edad: "48", alergias: "", restricciones: "", preferencias: "Res a término medio, cocina mediterránea.", suite: "MB1" },
      { id: "p2", nombre: "Jennifer Patterson", edad: "46", alergias: "Intolerancia a la lactosa leve", restricciones: "", preferencias: "Cocina mediterránea, mucha verdura.", suite: "MB1" },
      { id: "p3", nombre: "Emma Patterson",     edad: "14", alergias: "", restricciones: "Vegetariana", preferencias: "Pasta, ensaladas, frutas tropicales.", suite: "Girls Room" },
      { id: "p4", nombre: "Lucas Patterson",    edad: "11", alergias: "Mariscos (severa)", restricciones: "", preferencias: "Pollo a la parrilla, pasta sin salsa picante.", suite: "Boys Room" },
    ],
    alergias: "Lucas: alergia severa a mariscos. Jennifer: intolerancia a la lactosa leve.",
    restricciones: "Sin cerdo en mesa de desayuno (familia kosher style, no estricto).",
    preferenciasAlimentos: "Cocina mediterránea, mucha verdura. Emma vegetariana. Michael prefiere res a término medio.",
    preferenciasVinos: "Tintos: Cabernet Sauvignon, Malbec. Blancos: Sauvignon Blanc seco.",
    notas: "Llegan a las 17:00 desde aeropuerto PVR. Solicitan champagne de bienvenida. Aniversario de bodas el 1 de junio — preparar cena especial en terraza.",
    photo: null,
  },
  {
    id: "g2",
    nombres: "Sr. y Sra. Ramírez",
    llegada: "2026-06-10",
    salida: "2026-06-17",
    suites: ["MB2"],
    personas: [
      { id: "p5", nombre: "Eduardo Ramírez", edad: "62", alergias: "", restricciones: "Diabético — sin azúcar refinada", preferencias: "Pescado, pollo a la parrilla.", suite: "MB2" },
      { id: "p6", nombre: "Sofía Ramírez",   edad: "58", alergias: "Kiwi, látex", restricciones: "Ningún picante", preferencias: "Mariscos no picantes, ensaladas.", suite: "MB2" },
    ],
    alergias: "Sofía: alérgica al kiwi y al látex.",
    restricciones: "Ningún picante (cero chile). Carnes bien cocidas siempre.",
    preferenciasAlimentos: "Cocina mexicana tradicional pero suave. Pescado a la talla, pollo a la parrilla, mariscos no picantes.",
    preferenciasVinos: "Champagne y rosado. Tequila reposado de la casa.",
    notas: "Huéspedes recurrentes desde 2022. Suelen pedir desayuno tarde (10:00). Eduardo es diabético — sin postres con azúcar refinada.",
    photo: null,
  },
];

const ACTIVIDADES_INIT = [
  {
    id: "a1",
    fecha: "2026-05-29",
    hora: "08:30",
    actividad: "Tour de Islas Marietas con snorkel",
    precio: "$3,200 USD (hasta 8 personas)",
    transporte: "Yate Máximo desde Marina Punta Mita",
    horaSalida: "07:30",
    politicaCancelacion: "Cancelación gratuita hasta 24 hrs antes. Después: 50% de cargo. Mismo día: 100%.",
    formasPago: "Efectivo USD/MXN, transferencia bancaria, cargo a estancia.",
    notas: "Operador: Captain Uriel Mendoza. Incluye snacks ligeros y bebidas a bordo.",
  },
  {
    id: "a2",
    fecha: "2026-05-30",
    hora: "10:00",
    actividad: "Clase de cocina mexicana con Chef Rodrigo",
    precio: "$1,800 USD por familia",
    transporte: "En villa — no requiere",
    horaSalida: "—",
    politicaCancelacion: "Sin cargo si se cancela con 12 hrs de anticipación.",
    formasPago: "Cargo a estancia.",
    notas: "Menú: aguachile, tlayudas, mole rojo. 3 hrs aprox. Incluye degustación de mezcales.",
  },
  {
    id: "a3",
    fecha: "2026-06-01",
    hora: "19:30",
    actividad: "Cena de aniversario en terraza (Familia Patterson)",
    precio: "Incluida en estancia VIP",
    transporte: "En villa",
    horaSalida: "—",
    politicaCancelacion: "Reservar con 48 hrs de anticipación.",
    formasPago: "Cargo a estancia.",
    notas: "Mantel blanco, candelabros, arreglo floral especial. Champagne Veuve Clicquot. Música en vivo (sax) confirmar con Sergio.",
  },
];

const HuespedesView = ({ role, user }) => {
  const [tab, setTab] = React.useState("huespedes");
  const [huespedes, setHuespedes] = React.useState(HUESPEDES_INIT);
  const [actividades, setActividades] = React.useState(ACTIVIDADES_INIT);
  const [editingGuest, setEditingGuest] = React.useState(null); // null | "new" | id
  const [editingActivity, setEditingActivity] = React.useState(null);

  const canEdit = role === "admin" || role === "gerente";

  const upsertGuest = (g) => {
    // Auto-derive guest.suites from the unique suites assigned to individual personas
    const personasSuites = [...new Set((g.personas || []).map(p => p.suite).filter(Boolean))];
    const merged = { ...g, suites: personasSuites };
    setHuespedes(gs => {
      const exists = gs.some(x => x.id === merged.id);
      return exists ? gs.map(x => x.id === merged.id ? merged : x) : [{ ...merged, id: merged.id || "g-" + Date.now() }, ...gs];
    });
    setEditingGuest(null);
  };
  const removeGuest = (id) => {
    if (window.confirm("¿Eliminar este huésped del registro?")) {
      setHuespedes(gs => gs.filter(g => g.id !== id));
    }
  };
  const upsertActivity = (a) => {
    setActividades(as => {
      const exists = as.some(x => x.id === a.id);
      return exists ? as.map(x => x.id === a.id ? a : x) : [{ ...a, id: a.id || "a-" + Date.now() }, ...as];
    });
    setEditingActivity(null);
  };
  const removeActivity = (id) => {
    if (window.confirm("¿Eliminar esta actividad?")) {
      setActividades(as => as.filter(a => a.id !== id));
    }
  };

  const editingGuestObj = editingGuest === "new" ? null : editingGuest ? huespedes.find(g => g.id === editingGuest) : null;
  const editingActivityObj = editingActivity === "new" ? null : editingActivity ? actividades.find(a => a.id === editingActivity) : null;

  const [pdfDialog, setPdfDialog] = React.useState(false);

  // KPIs
  const activos = huespedes.filter(g => g.llegada <= TODAY_ISO && g.salida >= TODAY_ISO).length;
  const upcoming = huespedes.filter(g => g.llegada > TODAY_ISO).length;
  const activitiesUpcoming = actividades.filter(a => a.fecha >= TODAY_ISO).length;

  // Suites currently in use (derived from active bookings)
  const suitesInUse = React.useMemo(() => {
    const inUse = new Set();
    huespedes.forEach(g => {
      if (g.llegada <= TODAY_ISO && g.salida >= TODAY_ISO) {
        (g.suites || []).forEach(s => inUse.add(s));
      }
    });
    return [...inUse];
  }, [huespedes]);

  // Expose globally so AmaLlaves can read it
  React.useEffect(() => {
    window.__suitesInUse = suitesInUse;
    window.__activeGuests = huespedes.filter(g => g.llegada <= TODAY_ISO && g.salida >= TODAY_ISO);
    window.__allGuests = huespedes;
    window.__allActivities = actividades;
    window.dispatchEvent(new CustomEvent("guests-changed"));
  }, [suitesInUse, huespedes, actividades]);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div className="cdc-grid-cards" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Huéspedes en casa</div>
          <div className="cdc-kpi__value">{activos}</div>
          <div className="cdc-kpi__sub">{upcoming} próximos a llegar</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Suites en uso</div>
          <div className="cdc-kpi__value">{suitesInUse.length} <span style={{ fontSize: 16, color: "var(--cdc-ink-3)", fontWeight: 500 }}>/ {SUITES.length}</span></div>
          <div className="cdc-kpi__sub">{suitesInUse.join(", ") || "ninguna"}</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Registros totales</div>
          <div className="cdc-kpi__value">{huespedes.length}</div>
          <div className="cdc-kpi__sub">historial de huéspedes</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Actividades próximas</div>
          <div className="cdc-kpi__value">{activitiesUpcoming}</div>
          <div className="cdc-kpi__sub">programadas a futuro</div>
        </div>
      </div>

      <div className="cdc-tabs" style={{ background: "var(--cdc-panel)", borderRadius: "14px 14px 0 0", border: "1px solid var(--cdc-border)", borderBottom: 0, paddingLeft: 18 }}>
        {[
          ["huespedes",  `Lista de huéspedes (${huespedes.length})`],
          ["actividades", `Actividades (${actividades.length})`],
        ].map(([id, label]) => (
          <button key={id} className="cdc-tab" aria-selected={tab === id} onClick={() => setTab(id)}>{label}</button>
        ))}
      </div>

      {tab === "huespedes" && (
        <div className="cdc-card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: -18 }}>
          <div className="cdc-card__head">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <I.Users size={18} style={{ color: "var(--cdc-ink-3)" }} />
              <div className="cdc-card__title">Lista de huéspedes</div>
              <span style={{ fontSize: 12, color: "var(--cdc-ink-3)" }}>{huespedes.length} registro{huespedes.length === 1 ? "" : "s"}</span>
            </div>
            {canEdit && (
              <button className="cdc-btn cdc-btn--coral" onClick={() => setEditingGuest("new")}>
                <I.Plus size={14} /> Agregar huésped
              </button>
            )}
          </div>

          {huespedes.length === 0 ? (
            <div className="cdc-empty">
              <I.Heart size={42} />
              <div className="cdc-empty__title">Sin huéspedes registrados</div>
              {canEdit && (
                <button className="cdc-btn cdc-btn--coral" onClick={() => setEditingGuest("new")}>
                  <I.Plus size={14} /> Registrar primer huésped
                </button>
              )}
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(360px, 1fr))", gap: 14, padding: 18 }}>
              {huespedes.map(g => <GuestCard key={g.id} guest={g} canEdit={canEdit} onEdit={() => setEditingGuest(g.id)} onRemove={() => removeGuest(g.id)} />)}
            </div>
          )}
        </div>
      )}

      {tab === "actividades" && (
        <div className="cdc-card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: -18 }}>
          <div className="cdc-card__head">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <I.Sparkles size={18} style={{ color: "var(--cdc-ink-3)" }} />
              <div className="cdc-card__title">Actividades programadas</div>
              <span style={{ fontSize: 12, color: "var(--cdc-ink-3)" }}>{actividades.length}</span>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <button className="cdc-pill" onClick={() => setPdfDialog(true)}>
                <I.Send size={14} /> Itinerario PDF
              </button>
              {canEdit && (
                <button className="cdc-btn cdc-btn--coral" onClick={() => setEditingActivity("new")}>
                  <I.Plus size={14} /> Agregar actividad
                </button>
              )}
            </div>
          </div>

          {actividades.length === 0 ? (
            <div className="cdc-empty">
              <I.Sparkles size={42} />
              <div className="cdc-empty__title">Sin actividades programadas</div>
              {canEdit && (
                <button className="cdc-btn cdc-btn--coral" onClick={() => setEditingActivity("new")}>
                  <I.Plus size={14} /> Crear primera actividad
                </button>
              )}
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(360px, 1fr))", gap: 14, padding: 18 }}>
              {actividades.map(a => <ActivityCard key={a.id} act={a} canEdit={canEdit} onEdit={() => setEditingActivity(a.id)} onRemove={() => removeActivity(a.id)} />)}
            </div>
          )}
        </div>
      )}

      {editingGuest && (
        <GuestDrawer
          guest={editingGuestObj}
          onClose={() => setEditingGuest(null)}
          onSave={upsertGuest}
        />
      )}

      {editingActivity && (
        <ActivityDrawer
          act={editingActivityObj}
          onClose={() => setEditingActivity(null)}
          onSave={upsertActivity}
        />
      )}

      {pdfDialog && (
        <ItineraryPDFDialog
          huespedes={huespedes}
          actividades={actividades}
          generatedBy={user.name}
          onClose={() => setPdfDialog(false)}
        />
      )}
    </div>
  );
};

const GuestCard = ({ guest, canEdit, onEdit, onRemove }) => {
  const isActive = guest.llegada <= TODAY_ISO && guest.salida >= TODAY_ISO;
  const isUpcoming = guest.llegada > TODAY_ISO;
  return (
    <div style={{ background: "white", border: "1px solid var(--cdc-border)", borderRadius: 12, padding: 14, display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "flex-start" }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontFamily: "var(--cdc-display)", fontSize: 18, fontWeight: 600, lineHeight: 1.25 }}>{guest.nombres}</div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 4, fontSize: 12.5, color: "var(--cdc-ink-3)", flexWrap: "wrap" }}>
            <I.Calendar size={12} />
            <span>{fmtShortDate(guest.llegada)} → {fmtShortDate(guest.salida)}</span>
            {isActive && <span className="cdc-badge cdc-badge--progress">En casa</span>}
            {isUpcoming && <span className="cdc-badge cdc-badge--pending">Próximo</span>}
          </div>
        </div>
        {canEdit && (
          <div style={{ display: "flex", gap: 2, flexShrink: 0 }}>
            <button className="cdc-iconbtn" onClick={onEdit} title="Editar"><I.Edit size={13} /></button>
            <button className="cdc-iconbtn" onClick={onRemove} title="Eliminar"><I.Trash size={13} /></button>
          </div>
        )}
      </div>

      {/* Suites asignadas */}
      {(guest.suites && guest.suites.length > 0) && (
        <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
          {guest.suites.map(s => (
            <span key={s} className="cdc-badge cdc-badge--progress" style={{ background: "var(--cdc-coral-soft)", color: "var(--cdc-coral-deep)" }}>
              <I.Bed size={10} /> {s}
            </span>
          ))}
        </div>
      )}

      {/* Personas en la reservación */}
      {(guest.personas && guest.personas.length > 0) && (
        <div style={{ borderTop: "1px dashed var(--cdc-border-soft)", paddingTop: 8 }}>
          <div style={{ fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--cdc-ink-3)", fontWeight: 700, marginBottom: 6 }}>
            Integrantes ({guest.personas.length})
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {guest.personas.map(p => (
              <div key={p.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 8, fontSize: 12.5, alignItems: "baseline" }}>
                <span style={{ fontWeight: 600, color: "var(--cdc-ink)" }}>{p.nombre}</span>
                <span style={{ color: "var(--cdc-ink-3)" }}>
                  {p.edad && <span>{p.edad} años</span>}
                  {p.alergias && <span style={{ color: "var(--cdc-overdue)", marginLeft: 8 }}>· alergia: {p.alergias}</span>}
                  {p.restricciones && <span style={{ color: "var(--cdc-med)", marginLeft: 8 }}>· {p.restricciones}</span>}
                </span>
                {p.suite && <span style={{ fontSize: 11, color: "var(--cdc-coral-deep)" }}>{p.suite}</span>}
              </div>
            ))}
          </div>
        </div>
      )}

      <GuestField label="Preferencias de alimentos" value={guest.preferenciasAlimentos} />
      <GuestField label="Preferencias de vinos" value={guest.preferenciasVinos} />
      {guest.notas && <GuestField label="Notas importantes" value={guest.notas} accent="var(--cdc-coral-deep)" />}
    </div>
  );
};

const GuestField = ({ label, value, accent }) => {
  if (!value) return null;
  return (
    <div style={{ paddingLeft: accent ? 10 : 0, borderLeft: accent ? `2px solid ${accent}` : 0 }}>
      <div style={{ fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--cdc-ink-3)", fontWeight: 700 }}>{label}</div>
      <div style={{ fontSize: 13, color: "var(--cdc-ink-2)", marginTop: 2, lineHeight: 1.45 }}>{value}</div>
    </div>
  );
};

const GuestDrawer = ({ guest, onClose, onSave }) => {
  const [f, setF] = React.useState(guest || {
    nombres: "", llegada: TODAY_ISO, salida: TODAY_ISO,
    suites: [], personas: [],
    alergias: "", restricciones: "", preferenciasAlimentos: "",
    preferenciasVinos: "", notas: "",
  });
  const u = (k, v) => setF(x => ({ ...x, [k]: v }));

  const toggleSuite = (s) => {
    setF(x => ({
      ...x,
      suites: (x.suites || []).includes(s) ? x.suites.filter(y => y !== s) : [...(x.suites || []), s],
    }));
  };

  const addPersona = () => {
    setF(x => ({
      ...x,
      personas: [...(x.personas || []), { id: "p-" + Date.now(), nombre: "", edad: "", alergias: "", restricciones: "", preferencias: "", suite: "" }],
    }));
  };
  const updPersona = (i, patch) => {
    setF(x => ({ ...x, personas: x.personas.map((p, idx) => idx === i ? { ...p, ...patch } : p) }));
  };
  const rmPersona = (i) => {
    setF(x => ({ ...x, personas: x.personas.filter((_, idx) => idx !== i) }));
  };

  return (
    <div className="cdc-overlay" onClick={onClose}>
      <div className="cdc-drawer" onClick={(e) => e.stopPropagation()} style={{ width: 620 }}>
        <div className="cdc-drawer__head">
          <div className="cdc-drawer__title">{guest ? "Editar huésped" : "Nuevo huésped / reservación"}</div>
          <button className="cdc-iconbtn" onClick={onClose}><I.X size={18} /></button>
        </div>
        <div className="cdc-drawer__body">
          <div className="cdc-field">
            <label>Nombre de la reservación / grupo</label>
            <input className="cdc-input" autoFocus value={f.nombres} onChange={(e) => u("nombres", e.target.value)} placeholder="Familia Patterson, Sr. y Sra. Ramírez…" />
          </div>
          <div className="cdc-row-2">
            <div className="cdc-field">
              <label>Fecha de llegada</label>
              <input type="date" className="cdc-input" value={f.llegada} onChange={(e) => u("llegada", e.target.value)} />
            </div>
            <div className="cdc-field">
              <label>Fecha de salida</label>
              <input type="date" className="cdc-input" value={f.salida} onChange={(e) => u("salida", e.target.value)} />
            </div>
          </div>

          {/* Integrantes detallados — cada quien con su suite (de toda la villa) */}
          <div className="cdc-field">
            <label>
              Integrantes
              <span style={{ color: "var(--cdc-ink-4)", fontWeight: 500, letterSpacing: 0, textTransform: "none", marginLeft: 6 }}>
                (información individual por persona — alergias, restricciones, suite asignada)
              </span>
            </label>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {(f.personas || []).map((p, i) => (
                <div key={p.id} style={{ background: "var(--cdc-bg-soft)", border: "1px solid var(--cdc-border-soft)", borderRadius: 10, padding: 10, position: "relative" }}>
                  <button
                    onClick={() => rmPersona(i)}
                    type="button"
                    title="Quitar integrante"
                    style={{ position: "absolute", top: 6, right: 6, width: 22, height: 22, borderRadius: 999, color: "var(--cdc-ink-3)" }}
                  >
                    <I.X size={13} />
                  </button>
                  <div style={{ display: "grid", gridTemplateColumns: "1.5fr 60px 1fr", gap: 6, marginBottom: 6 }}>
                    <input className="cdc-input" value={p.nombre} onChange={(e) => updPersona(i, { nombre: e.target.value })} placeholder="Nombre completo" />
                    <input className="cdc-input" value={p.edad} onChange={(e) => updPersona(i, { edad: e.target.value })} placeholder="Edad" />
                    <select className="cdc-select" value={p.suite || ""} onChange={(e) => updPersona(i, { suite: e.target.value })}>
                      <option value="">— suite —</option>
                      {SUITES.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
                    </select>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginBottom: 6 }}>
                    <input className="cdc-input" value={p.alergias} onChange={(e) => updPersona(i, { alergias: e.target.value })} placeholder="Alergias (opcional)" />
                    <input className="cdc-input" value={p.restricciones} onChange={(e) => updPersona(i, { restricciones: e.target.value })} placeholder="Restricciones (opcional)" />
                  </div>
                  <input className="cdc-input" value={p.preferencias} onChange={(e) => updPersona(i, { preferencias: e.target.value })} placeholder="Preferencias de alimentos / proteínas / vinos" />
                </div>
              ))}
              <button type="button" className="cdc-chip" onClick={addPersona} style={{ alignSelf: "flex-start" }}>
                <I.Plus size={12} /> Agregar integrante
              </button>
            </div>
          </div>

          <div className="cdc-field">
            <label>Preferencia de alimentos y proteínas (a nivel grupo)</label>
            <textarea className="cdc-textarea" value={f.preferenciasAlimentos} onChange={(e) => u("preferenciasAlimentos", e.target.value)} placeholder="Tipos de cocina, proteínas favoritas…" />
          </div>
          <div className="cdc-field">
            <label>Preferencia en vinos de mesa (uva)</label>
            <input className="cdc-input" value={f.preferenciasVinos} onChange={(e) => u("preferenciasVinos", e.target.value)} placeholder="Cabernet, Malbec, Sauvignon Blanc, Champagne…" />
          </div>
          <div className="cdc-field">
            <label>Otro dato importante a tomar en cuenta</label>
            <textarea className="cdc-textarea" value={f.notas} onChange={(e) => u("notas", e.target.value)} placeholder="Aniversarios, cumpleaños, condiciones médicas…" />
          </div>
        </div>
        <div className="cdc-panel__actions" style={{ position: "static", borderTop: "1px solid var(--cdc-border-soft)" }}>
          <button className="cdc-btn" onClick={onClose}>Cancelar</button>
          <button className="cdc-btn cdc-btn--primary" disabled={!f.nombres.trim()} onClick={() => onSave({ ...f, nombres: f.nombres.trim() })}>
            <I.Check size={14} /> {guest ? "Guardar cambios" : "Registrar huésped"}
          </button>
        </div>
      </div>
    </div>
  );
};

const ActivityCard = ({ act, canEdit, onEdit, onRemove }) => {
  const isPast = act.fecha < TODAY_ISO;
  return (
    <div style={{ background: "white", border: "1px solid var(--cdc-border)", borderRadius: 12, padding: 14, display: "flex", flexDirection: "column", gap: 10, opacity: isPast ? 0.6 : 1 }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "flex-start" }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontFamily: "var(--cdc-display)", fontSize: 18, fontWeight: 600, lineHeight: 1.25 }}>{act.actividad}</div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 4, fontSize: 12.5, color: "var(--cdc-ink-3)" }}>
            <I.Calendar size={12} /><span>{fmtShortDate(act.fecha)}</span>
            <span style={{ color: "var(--cdc-ink-4)" }}>·</span>
            <I.Clock size={12} /><span>{act.hora}</span>
          </div>
        </div>
        {canEdit && (
          <div style={{ display: "flex", gap: 2, flexShrink: 0 }}>
            <button className="cdc-iconbtn" onClick={onEdit} title="Editar"><I.Edit size={13} /></button>
            <button className="cdc-iconbtn" onClick={onRemove} title="Eliminar"><I.Trash size={13} /></button>
          </div>
        )}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 12px", fontSize: 12.5 }}>
        {(act.asistentes || act.numPersonas) && <>
          <span style={{ color: "var(--cdc-ink-3)" }}>Asistentes</span>
          <span style={{ color: "var(--cdc-ink-2)" }}>
            {act.numPersonas ? <strong>{act.numPersonas} pax</strong> : ""}
            {act.asistentes && act.numPersonas ? " — " : ""}
            {act.asistentes || ""}
          </span>
        </>}
        <span style={{ color: "var(--cdc-ink-3)" }}>Precio</span>
        <span style={{ color: "var(--cdc-ink-2)", fontWeight: 600 }}>{act.precio || "—"}</span>
        <span style={{ color: "var(--cdc-ink-3)" }}>Transporte</span>
        <span style={{ color: "var(--cdc-ink-2)" }}>{act.transporte || "—"}</span>
        <span style={{ color: "var(--cdc-ink-3)" }}>Hora de salida</span>
        <span style={{ color: "var(--cdc-ink-2)" }}>{act.horaSalida || "—"}</span>
        <span style={{ color: "var(--cdc-ink-3)" }}>Formas de pago</span>
        <span style={{ color: "var(--cdc-ink-2)" }}>{act.formasPago || "—"}</span>
      </div>
      {act.politicaCancelacion && (
        <div style={{ paddingLeft: 10, borderLeft: "2px solid var(--cdc-med)" }}>
          <div style={{ fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--cdc-ink-3)", fontWeight: 700 }}>Política de cancelación</div>
          <div style={{ fontSize: 12.5, color: "var(--cdc-ink-2)", marginTop: 2, lineHeight: 1.45 }}>{act.politicaCancelacion}</div>
        </div>
      )}
      {act.notas && (
        <div style={{ fontSize: 12, color: "var(--cdc-ink-3)", borderTop: "1px dashed var(--cdc-border-soft)", paddingTop: 8, lineHeight: 1.45 }}>{act.notas}</div>
      )}
    </div>
  );
};

const ActivityDrawer = ({ act, onClose, onSave }) => {
  const [f, setF] = React.useState(act || {
    fecha: TODAY_ISO, hora: "10:00", actividad: "",
    asistentes: "", numPersonas: 1,
    precio: "", transporte: "", horaSalida: "",
    politicaCancelacion: "", formasPago: "", notas: "",
  });
  const u = (k, v) => setF(x => ({ ...x, [k]: v }));
  return (
    <div className="cdc-overlay" onClick={onClose}>
      <div className="cdc-drawer" onClick={(e) => e.stopPropagation()}>
        <div className="cdc-drawer__head">
          <div className="cdc-drawer__title">{act ? "Editar actividad" : "Nueva actividad"}</div>
          <button className="cdc-iconbtn" onClick={onClose}><I.X size={18} /></button>
        </div>
        <div className="cdc-drawer__body">
          <div className="cdc-field">
            <label>Actividad</label>
            <input className="cdc-input" autoFocus value={f.actividad} onChange={(e) => u("actividad", e.target.value)} placeholder="Ej. Tour de Islas Marietas con snorkel" />
          </div>
          <div className="cdc-row-2">
            <div className="cdc-field">
              <label>Fecha</label>
              <input type="date" className="cdc-input" value={f.fecha} onChange={(e) => u("fecha", e.target.value)} />
            </div>
            <div className="cdc-field">
              <label>Hora</label>
              <input type="time" className="cdc-input" value={f.hora} onChange={(e) => u("hora", e.target.value)} />
            </div>
          </div>
          <div className="cdc-field">
            <label>Asistentes / nombres</label>
            <textarea className="cdc-textarea" value={f.asistentes} onChange={(e) => u("asistentes", e.target.value)} placeholder="Michael, Jennifer, Emma, Lucas — Familia Patterson" style={{ minHeight: 60 }} />
          </div>
          <div className="cdc-row-2">
            <div className="cdc-field">
              <label>Número de personas</label>
              <input type="number" min="0" className="cdc-input" value={f.numPersonas} onChange={(e) => u("numPersonas", parseInt(e.target.value, 10) || 0)} />
            </div>
            <div className="cdc-field">
              <label>Precio</label>
              <input className="cdc-input" value={f.precio} onChange={(e) => u("precio", e.target.value)} placeholder="$3,200 USD por familia" />
            </div>
          </div>
          <div className="cdc-row-2">
            <div className="cdc-field">
              <label>Hora sugerida de salida</label>
              <input type="time" className="cdc-input" value={f.horaSalida === "—" ? "" : f.horaSalida} onChange={(e) => u("horaSalida", e.target.value)} />
            </div>
            <div className="cdc-field">
              <label>Transporte</label>
              <input className="cdc-input" value={f.transporte} onChange={(e) => u("transporte", e.target.value)} placeholder="Yate, van, taxi privado…" />
            </div>
          </div>
          <div className="cdc-field">
            <label>Política de cancelación</label>
            <textarea className="cdc-textarea" value={f.politicaCancelacion} onChange={(e) => u("politicaCancelacion", e.target.value)} placeholder="Cancelación gratuita hasta 24 hrs antes…" />
          </div>
          <div className="cdc-field">
            <label>Formas de pago</label>
            <input className="cdc-input" value={f.formasPago} onChange={(e) => u("formasPago", e.target.value)} placeholder="Efectivo, transferencia, cargo a estancia…" />
          </div>
          <div className="cdc-field">
            <label>Notas</label>
            <textarea className="cdc-textarea" value={f.notas} onChange={(e) => u("notas", e.target.value)} placeholder="Operador, inclusiones, detalles especiales…" />
          </div>
        </div>
        <div className="cdc-panel__actions" style={{ position: "static", borderTop: "1px solid var(--cdc-border-soft)" }}>
          <button className="cdc-btn" onClick={onClose}>Cancelar</button>
          <button className="cdc-btn cdc-btn--primary" disabled={!f.actividad.trim()} onClick={() => onSave({ ...f, actividad: f.actividad.trim() })}>
            <I.Check size={14} /> {act ? "Guardar cambios" : "Crear actividad"}
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { HuespedesView });

const ItineraryPDFDialog = ({ huespedes, actividades, generatedBy, onClose }) => {
  const [mode, setMode] = React.useState("guest"); // "guest" | "all"
  const [guestId, setGuestId] = React.useState(huespedes[0]?.id || "");
  const [from, setFrom] = React.useState(TODAY_ISO);
  const [to, setTo]   = React.useState(fmtISO(addDays(TODAY, 30)));

  const selectedGuest = huespedes.find(g => g.id === guestId);

  const previewCount = mode === "guest" && selectedGuest
    ? actividades.filter(a => a.fecha >= selectedGuest.llegada && a.fecha <= selectedGuest.salida).length
    : actividades.filter(a => a.fecha >= from && a.fecha <= to).length;

  const generate = () => {
    if (mode === "guest" && selectedGuest) {
      exportItineraryPDF({ guest: selectedGuest, activities: actividades, generatedBy });
    } else {
      const inRange = actividades.filter(a => a.fecha >= from && a.fecha <= to);
      exportItineraryPDF({ guest: null, activities: inRange, generatedBy });
    }
    onClose();
  };

  return (
    <div className="cdc-overlay" onClick={onClose} style={{ alignItems: "center", justifyContent: "center" }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "white", borderRadius: 14, width: 480, maxWidth: "92vw",
        boxShadow: "var(--cdc-shadow-lg)", overflow: "hidden",
      }}>
        <div style={{ padding: "16px 22px 4px" }}>
          <div className="cdc-drawer__title">Generar itinerario PDF</div>
          <div style={{ fontSize: 13, color: "var(--cdc-ink-3)", marginTop: 4, lineHeight: 1.45 }}>
            Selecciona una familia para crear su itinerario personalizado, o exporta todas las actividades en un rango.
          </div>
        </div>

        <div style={{ padding: "12px 22px", display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="cdc-field">
            <label>Modo</label>
            <div style={{ display: "flex", gap: 6 }}>
              <button type="button" className="cdc-chip" aria-pressed={mode === "guest"} onClick={() => setMode("guest")}>
                <I.Users size={11} /> Por familia / huésped
              </button>
              <button type="button" className="cdc-chip" aria-pressed={mode === "all"} onClick={() => setMode("all")}>
                <I.Calendar size={11} /> Por rango de fechas
              </button>
            </div>
          </div>

          {mode === "guest" ? (
            <div className="cdc-field">
              <label>Familia / huésped</label>
              <select className="cdc-select" value={guestId} onChange={(e) => setGuestId(e.target.value)}>
                {huespedes.map(g => (
                  <option key={g.id} value={g.id}>{g.nombres} — {fmtShortDate(g.llegada)} a {fmtShortDate(g.salida)}</option>
                ))}
              </select>
              {selectedGuest && (
                <div className="cdc-helper" style={{ marginTop: 6 }}>
                  Incluye actividades entre {fmtLongDate(selectedGuest.llegada)} y {fmtLongDate(selectedGuest.salida)}.
                </div>
              )}
            </div>
          ) : (
            <div className="cdc-row-2">
              <div className="cdc-field">
                <label>Desde</label>
                <input type="date" className="cdc-input" value={from} onChange={(e) => setFrom(e.target.value)} />
              </div>
              <div className="cdc-field">
                <label>Hasta</label>
                <input type="date" className="cdc-input" value={to} onChange={(e) => setTo(e.target.value)} />
              </div>
            </div>
          )}

          <div style={{ background: "var(--cdc-bg-soft)", border: "1px solid var(--cdc-border-soft)", borderRadius: 10, padding: 12 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--cdc-ink-3)", textTransform: "uppercase", fontWeight: 700 }}>En el itinerario</div>
            <div style={{ marginTop: 4 }}>
              <span style={{ fontFamily: "var(--cdc-display)", fontSize: 22, fontWeight: 600 }}>{previewCount}</span>
              <span style={{ fontSize: 11.5, color: "var(--cdc-ink-3)", marginLeft: 6 }}>actividad{previewCount === 1 ? "" : "es"}</span>
            </div>
          </div>
        </div>

        <div className="cdc-panel__actions" style={{ position: "static", borderTop: "1px solid var(--cdc-border-soft)" }}>
          <button className="cdc-btn" onClick={onClose}>Cancelar</button>
          <button className="cdc-btn cdc-btn--primary" onClick={generate} disabled={previewCount === 0 || (mode === "guest" && !selectedGuest)}>
            <I.Send size={14} /> Generar PDF
          </button>
        </div>
      </div>
    </div>
  );
};