/* === Bar / Butler — tareas, carta de cocteles y lista de compras === */

const COCTEL_SEED = [
  { id: "ct1", name: "Margarita de tamarindo",  desc: "Tequila blanco, tamarindo natural, sal de gusano, limón.",       photo: null, prep: "Escarchar copa con sal de gusano." },
  { id: "ct2", name: "Paloma de la casa",        desc: "Tequila reposado, Squirt, jugo de toronja fresca, sal de mar.", photo: null, prep: "Servir en vaso highball con hielo." },
  { id: "ct3", name: "Mezcalita ahumada",        desc: "Mezcal espadín, agave, lima, chile piquín.",                    photo: null, prep: "Flamear con cáscara de naranja." },
  { id: "ct4", name: "Old Fashioned cacao",      desc: "Whisky Macallan, bitter de cacao, naranja flameada.",           photo: null, prep: "Reposar 1 min antes de servir." },
  { id: "ct5", name: "Spritz Punta Mita",        desc: "Aperol, espumoso, jugo de mandarina, romero.",                  photo: null, prep: "Servir en copa de vino con hielo grande." },
  { id: "ct6", name: "Mocktail tropical",        desc: "Piña asada, jengibre, lima, agua mineral.",                     photo: null, prep: "Sin alcohol — ideal para niños y huéspedes." },
];

const BarView = ({ tasks, onSelect, selectedId, onToggle, canEditFn, role, user, compras, setCompras }) => {
  const [tab, setTab] = React.useState("tareas");
  const [cocteles, setCocteles] = React.useState(COCTEL_SEED);
  const [editing, setEditing] = React.useState(null); // null | "new" | id
  const [viewPhoto, setViewPhoto] = React.useState(null);

  const barTasks = tasks.filter(t => t.area === "bar");
  const barList = compras.bar || [];

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

  const upsertCoctel = (c) => {
    setCocteles(cs => {
      const exists = cs.some(x => x.id === c.id);
      return exists ? cs.map(x => x.id === c.id ? c : x) : [{ ...c, id: c.id || "ct-" + Date.now() }, ...cs];
    });
    setEditing(null);
  };

  const removeCoctel = (id) => {
    if (window.confirm("¿Eliminar este cóctel de la carta?")) {
      setCocteles(cs => cs.filter(c => c.id !== id));
    }
  };

  const editingCoctel = editing === "new" ? null : editing ? cocteles.find(c => c.id === editing) : null;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div className="cdc-grid-cards" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Tareas activas</div>
          <div className="cdc-kpi__value">{barTasks.filter(t => t.status !== "terminada").length}</div>
          <div className="cdc-kpi__sub">{barTasks.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: barList.filter(i => i.status === "pendiente").length ? "var(--cdc-overdue)" : "var(--cdc-ink)" }}>
            {barList.filter(i => i.status === "pendiente").length}
          </div>
          <div className="cdc-kpi__sub">{barList.filter(i => i.status === "entregado").length} comprados</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"],
          ["carta", "Carta de cocteles"],
          ["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 }}>
          {barTasks.length === 0 ? (
            <div className="cdc-empty">
              <I.Cocktail size={42} />
              <div className="cdc-empty__title">Sin tareas en Bar</div>
            </div>
          ) : (
            <TaskTable tasks={barTasks} onSelect={onSelect} selectedId={selectedId} onToggle={onToggle} canEditFn={canEditFn} />
          )}
        </div>
      )}

      {tab === "carta" && (
        <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.Cocktail size={18} style={{ color: "var(--cdc-ink-3)" }} />
              <div className="cdc-card__title">Carta de cocteles</div>
              <span style={{ fontSize: 12, color: "var(--cdc-ink-3)" }}>{cocteles.length} preparaciones</span>
            </div>
            {canEditCarta && (
              <button className="cdc-btn cdc-btn--coral" onClick={() => setEditing("new")}>
                <I.Plus size={14} /> Agregar cóctel
              </button>
            )}
          </div>

          {cocteles.length === 0 ? (
            <div className="cdc-empty">
              <I.Cocktail size={42} />
              <div className="cdc-empty__title">Carta vacía</div>
              {canEditCarta && (
                <button className="cdc-btn cdc-btn--coral" onClick={() => setEditing("new")}>
                  <I.Plus size={14} /> Agregar primer cóctel
                </button>
              )}
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14, padding: 18 }}>
              {cocteles.map(c => (
                <div key={c.id} style={{
                  position: "relative",
                  display: "flex", flexDirection: "column",
                  border: "1px solid var(--cdc-border-soft)",
                  borderRadius: 12,
                  background: "var(--cdc-bg-soft)",
                  overflow: "hidden",
                }}>
                  {c.photo && (
                    <button
                      onClick={() => setViewPhoto(c.photo)}
                      style={{ width: "100%", height: 140, padding: 0, cursor: "pointer", border: 0, background: "var(--cdc-cream-100)" }}
                    >
                      <img src={c.photo} alt={c.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                    </button>
                  )}
                  <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", gap: 6, alignItems: "flex-start" }}>
                      <div style={{ fontFamily: "var(--cdc-display)", fontSize: 19, fontWeight: 600, lineHeight: 1.2 }}>{c.name}</div>
                      {canEditCarta && (
                        <div style={{ display: "flex", gap: 2, flexShrink: 0 }}>
                          <button className="cdc-iconbtn" onClick={() => setEditing(c.id)} title="Editar"><I.Edit size={13} /></button>
                          <button className="cdc-iconbtn" onClick={() => removeCoctel(c.id)} title="Eliminar"><I.Trash size={13} /></button>
                        </div>
                      )}
                    </div>
                    <div style={{ fontSize: 13, color: "var(--cdc-ink-2)", lineHeight: 1.5 }}>{c.desc}</div>
                    {c.prep && (
                      <div style={{ fontSize: 11.5, color: "var(--cdc-ink-3)", marginTop: "auto", paddingTop: 8, borderTop: "1px dashed var(--cdc-border-soft)", display: "flex", alignItems: "center", gap: 6 }}>
                        <I.Coffee size={11} /> {c.prep}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {tab === "compras" && (
        <div className="cdc-card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: -18 }}>
          <ShoppingListPanel
            items={barList}
            onUpdate={(newList) => setCompras({ ...compras, bar: newList })}
            listLabel="Bar"
            listId="bar"
            user={user}
            role={role}
            canEdit={canEditList}
            hideSupplier={true}
          />
        </div>
      )}

      {editing && (
        <CoctelDrawer
          coctel={editingCoctel}
          onClose={() => setEditing(null)}
          onSave={upsertCoctel}
        />
      )}

      {viewPhoto && (
        <div className="cdc-overlay" onClick={() => setViewPhoto(null)} style={{ alignItems: "center", justifyContent: "center" }}>
          <img src={viewPhoto} alt="" style={{ maxWidth: "85vw", maxHeight: "85vh", borderRadius: 12, boxShadow: "var(--cdc-shadow-lg)" }} />
        </div>
      )}
    </div>
  );
};

const CoctelDrawer = ({ coctel, onClose, onSave }) => {
  const [f, setF] = React.useState(coctel || { name: "", desc: "", prep: "", photo: null });
  const fileInput = React.useRef(null);
  const u = (k, v) => setF(x => ({ ...x, [k]: v }));

  const handleFile = (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const r = new FileReader();
    r.onload = () => u("photo", r.result);
    r.readAsDataURL(file);
  };

  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">{coctel ? "Editar cóctel" : "Nuevo cóctel"}</div>
          <button className="cdc-iconbtn" onClick={onClose}><I.X size={18} /></button>
        </div>
        <div className="cdc-drawer__body">
          <div className="cdc-field">
            <label>Foto del cóctel</label>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
              <button
                type="button"
                onClick={() => fileInput.current?.click()}
                style={{
                  width: 110, height: 110, borderRadius: 12, overflow: "hidden",
                  background: "var(--cdc-cream-100)", border: "1px dashed var(--cdc-cream-300)",
                  display: "flex", alignItems: "center", justifyContent: "center", padding: 0,
                  cursor: "pointer",
                }}
              >
                {f.photo ? (
                  <img src={f.photo} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                ) : (
                  <I.Camera size={30} stroke={1.4} style={{ color: "var(--cdc-ink-3)" }} />
                )}
              </button>
              <div style={{ flex: 1 }}>
                <input ref={fileInput} type="file" accept="image/*" onChange={handleFile} style={{ display: "none" }} />
                <button type="button" className="cdc-btn" onClick={() => fileInput.current?.click()}>
                  <I.Image size={14} /> {f.photo ? "Reemplazar foto" : "Subir foto"}
                </button>
                {f.photo && (
                  <button type="button" className="cdc-iconbtn" onClick={() => u("photo", null)} style={{ marginLeft: 6 }} title="Quitar foto">
                    <I.Trash size={14} />
                  </button>
                )}
                <div className="cdc-helper" style={{ marginTop: 6 }}>Foto de presentación, copa o ingredientes.</div>
              </div>
            </div>
          </div>

          <div className="cdc-field">
            <label>Nombre del cóctel</label>
            <input className="cdc-input" autoFocus value={f.name} onChange={(e) => u("name", e.target.value)} placeholder="Ej. Margarita de tamarindo" />
          </div>

          <div className="cdc-field">
            <label>Ingredientes / descripción</label>
            <textarea className="cdc-textarea" value={f.desc} onChange={(e) => u("desc", e.target.value)} placeholder="Tequila blanco, tamarindo natural, sal de gusano, limón." />
          </div>

          <div className="cdc-field">
            <label>Notas de preparación (opcional)</label>
            <textarea className="cdc-textarea" value={f.prep} onChange={(e) => u("prep", e.target.value)} placeholder="Escarchar copa, flamear cáscara, técnica especial…" style={{ minHeight: 60 }} />
          </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.name.trim()} onClick={() => onSave({ ...f, name: f.name.trim() })}>
            <I.Check size={14} /> {coctel ? "Guardar cambios" : "Agregar a carta"}
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { BarView });