/* === 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 [kpiFilter, setKpiFilter] = React.useState(null); // null | "activas" | "alta" | "recurrentes"
  const alTasks = tasks.filter(t => t.area === "amallaves");
  const alList = compras.amallaves || [];

  // Al pulsar un KPI: alterna el filtro y asegura la pestaña correcta.
  const handleKpi = (k) => {
    if (k === "compras") { setTab("compras"); return; }
    setTab("tareas");
    setKpiFilter(prev => prev === k ? null : k);
  };
  const kpiCardStyle = (active) => ({
    cursor: "pointer",
    outline: active ? "2px solid var(--cdc-coral)" : "none",
    outlineOffset: -2,
  });

  // Tareas mostradas según el KPI seleccionado.
  const visibleAlTasks = kpiFilter === "activas" ? alTasks.filter(t => t.status !== "terminada")
    : kpiFilter === "alta" ? alTasks.filter(t => t.priority === "alta" && t.status !== "terminada")
    : kpiFilter === "recurrentes" ? alTasks.filter(t => !!t.recurrence)
    : alTasks;

  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" style={kpiCardStyle(kpiFilter === "activas")} onClick={() => handleKpi("activas")} role="button" tabIndex={0}>
          <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" style={{ cursor: "pointer" }} onClick={() => handleKpi("compras")} role="button" tabIndex={0}>
          <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" style={kpiCardStyle(kpiFilter === "recurrentes")} onClick={() => handleKpi("recurrentes")} role="button" tabIndex={0}>
          <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>

      {kpiFilter && tab === "tareas" && (
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--cdc-ink-3)", marginTop: -8 }}>
          <span>Filtrando por:</span>
          <span className="cdc-chip" aria-pressed style={{ background: "var(--cdc-coral-soft)", color: "var(--cdc-coral-deep)" }}>
            {kpiFilter === "activas" ? "Tareas activas" : kpiFilter === "recurrentes" ? "Recurrentes" : kpiFilter}
            <button onClick={() => setKpiFilter(null)} style={{ marginLeft: 8, background: "none", border: "none", cursor: "pointer", color: "inherit" }} aria-label="Quitar filtro">✕</button>
          </span>
        </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>
          {visibleAlTasks.length === 0 ? (
            <div className="cdc-empty">
              <I.Bed size={42} />
              <div className="cdc-empty__title">{kpiFilter ? "Sin tareas en este filtro" : "Sin tareas en Ama de llaves"}</div>
            </div>
          ) : (
            <TaskTable tasks={visibleAlTasks} onSelect={onSelect} selectedId={selectedId} onToggle={onToggle} canEditFn={canEditFn} showFilters areaLabel="Ama de llaves" requestedBy={user.name} />
          )}
        </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 });