/* === Ama de llaves — tareas + lista de compras (toallas, amenities, flores) === */

const AmaLlavesView = ({ tasks, onSelect, selectedId, onToggle, canEditFn, role, user, compras, setCompras, onCreate }) => {
  const [tab, setTab] = React.useState("tareas");
  const alTasks = tasks.filter(t => t.area === "amallaves");
  const alList = compras.amallaves || [];

  const canEditList = role === "admin" || role === "gerente" || (role === "jefe" && user.area === "amallaves");

  // Subscribe to guest-list updates so Suites en uso stays in sync
  const [suitesInUse, setSuitesInUse] = React.useState(window.__suitesInUse || []);
  React.useEffect(() => {
    const handler = () => setSuitesInUse(window.__suitesInUse || []);
    handler();
    window.addEventListener("guests-changed", handler);
    return () => window.removeEventListener("guests-changed", handler);
  }, []);

  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">Tareas activas</div>
          <div className="cdc-kpi__value">{alTasks.filter(t => t.status !== "terminada").length}</div>
          <div className="cdc-kpi__sub">{alTasks.filter(t => t.priority === "alta").length} de alta prioridad</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Compras pendientes</div>
          <div className="cdc-kpi__value" style={{ color: alList.filter(i => i.status === "pendiente").length ? "var(--cdc-overdue)" : "var(--cdc-ink)" }}>
            {alList.filter(i => i.status === "pendiente").length}
          </div>
          <div className="cdc-kpi__sub">{alList.filter(i => i.status === "entregado").length} comprados</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Suites en uso</div>
          <div className="cdc-kpi__value">{suitesInUse.length}</div>
          <div className="cdc-kpi__sub">{suitesInUse.length === 0 ? "ninguna ocupada" : suitesInUse.join(", ")}</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Recurrentes</div>
          <div className="cdc-kpi__value">{alTasks.filter(t => t.recurrence).length}</div>
          <div className="cdc-kpi__sub">cambio sábanas, amenities…</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 }}>
        {[
          ["tareas", "Tareas"],
          ["compras", "Lista de compras"],
        ].map(([id, label]) => (
          <button key={id} className="cdc-tab" aria-selected={tab === id} onClick={() => setTab(id)}>{label}</button>
        ))}
      </div>

      {tab === "tareas" && (
        <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.Bed size={20} />
              <div className="cdc-card__title">Tareas — Ama de llaves</div>
              <span style={{ fontSize: 12, color: "var(--cdc-ink-3)" }}>{alTasks.length}</span>
            </div>
            {role !== "staff" && (
              <button className="cdc-btn cdc-btn--coral" onClick={() => onCreate && onCreate("amallaves")}>
                <I.Plus size={14} /> Nueva tarea
              </button>
            )}
          </div>
          {alTasks.length === 0 ? (
            <div className="cdc-empty">
              <I.Bed size={42} />
              <div className="cdc-empty__title">Sin tareas en Ama de llaves</div>
            </div>
          ) : (
            <TaskTable tasks={alTasks} onSelect={onSelect} selectedId={selectedId} onToggle={onToggle} canEditFn={canEditFn} />
          )}
        </div>
      )}

      {tab === "compras" && (
        <div className="cdc-card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: -18 }}>
          <ShoppingListPanel
            items={alList}
            onUpdate={(newList) => setCompras({ ...compras, amallaves: newList })}
            listLabel="Ama de llaves"
            listId="amallaves"
            user={user}
            role={role}
            canEdit={canEditList}
          />
        </div>
      )}
    </div>
  );
};

Object.assign(window, { AmaLlavesView });