function MenuDiari({ lang }) {
  const { useState, useEffect, useRef } = React;
  const T = window.T;
  const t = T[lang];
  function tr(ca, es) { return lang === "es" ? es : ca; }

  const [menu, setMenu] = useState(null);
  const [loading, setLoading] = useState(true);
  const clientIdRef = useRef(null);
  const saveTimerRef = useRef(null);

  useEffect(function () { load(); }, []);

  async function load() {
    var client = await window.SVX.getCurrentClient();
    if (!client) return;
    clientIdRef.current = client.id;
    var res = await window.SB
      .from("daily_menus")
      .select("*")
      .eq("client_id", client.id)
      .maybeSingle();
    if (res.error) {
      console.error("[MenuDiari] load:", res.error);
      window.SVX.toast(tr("Error carregant el menú", "Error cargando el menú"), "error");
      setLoading(false);
      return;
    }
    if (res.data) {
      setMenu(res.data);
    } else {
      setMenu({
        client_id: client.id,
        active: false,
        days_of_week: ["mon", "tue", "wed", "thu", "fri"],
        price_cents: 1500,
        drink_included: true,
        drink_text_ca: "Aigua o vi de la casa",
        drink_text_es: "Agua o vino de la casa",
        bread_included: true,
        coffee_or_dessert_included: true,
        primers: [],
        segons: [],
        postres: [],
        notes_ca: "",
        notes_es: ""
      });
    }
    setLoading(false);
  }

  function debouncedSave(updatedMenu) {
    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
    saveTimerRef.current = setTimeout(function() { saveNow(updatedMenu); }, 800);
  }

  async function saveNow(m) {
    if (!m || !clientIdRef.current) return;
    var payload = Object.assign({}, m, { client_id: clientIdRef.current });
    delete payload.created_at;
    delete payload.updated_at;
    var res;
    if (m.id) {
      res = await window.SB.from("daily_menus").update(payload).eq("id", m.id).select().single();
    } else {
      delete payload.id;
      res = await window.SB.from("daily_menus").insert(payload).select().single();
    }
    if (res.error) {
      console.error("[MenuDiari] save error:", res.error);
      window.SVX.toast(tr("Error desant: ", "Error guardando: ") + res.error.message, "error");
      return;
    }
    setMenu(res.data);
    window.SVX.toast(tr("Desat", "Guardado"), "success");
  }

  function update(key, value) {
    var next = Object.assign({}, menu, { [key]: value });
    setMenu(next);
    debouncedSave(next);
  }

  function toggleDay(dayKey) {
    var days = (menu.days_of_week || []).slice();
    var idx = days.indexOf(dayKey);
    if (idx >= 0) { days.splice(idx, 1); } else { days.push(dayKey); }
    update("days_of_week", days);
  }

  function addDish(field) {
    var arr = (menu[field] || []).slice();
    arr.push({ name_ca: "", name_es: "", description_ca: "", description_es: "" });
    update(field, arr);
  }

  function updateDish(field, idx, key, value) {
    var arr = (menu[field] || []).slice();
    arr[idx] = Object.assign({}, arr[idx], { [key]: value });
    update(field, arr);
  }

  function removeDish(field, idx) {
    var arr = (menu[field] || []).slice();
    arr.splice(idx, 1);
    update(field, arr);
  }

  if (loading) return <div style={{padding: 32, color: "var(--ink-3)", fontSize: 14}}>—</div>;
  if (!menu) return null;

  var DAYS = [
    { key: "mon", label: tr("Dl", "Lu") },
    { key: "tue", label: tr("Dt", "Ma") },
    { key: "wed", label: tr("Dc", "Mi") },
    { key: "thu", label: tr("Dj", "Ju") },
    { key: "fri", label: tr("Dv", "Vi") },
    { key: "sat", label: tr("Ds", "Sa") },
    { key: "sun", label: tr("Dg", "Do") }
  ];

  function renderDishList(field, titleCa, titleEs) {
    var dishes = menu[field] || [];
    return (
      <div style={{marginBottom: 16, padding: 16, background: "var(--paper)", borderRadius: 10, border: "1px solid var(--line)"}}>
        <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12}}>
          <span className="eyebrow">{tr(titleCa, titleEs)}</span>
          <span style={{fontSize: 11, color: "var(--ink-3)"}}>{dishes.length} {tr("plats", "platos")}</span>
        </div>
        {dishes.map(function(dish, idx) {
          return (
            <div key={idx} style={{padding: 12, marginBottom: 8, background: "var(--paper-2)", borderRadius: 8, border: "1px solid var(--line)"}}>
              <div style={{display: "flex", gap: 8, marginBottom: 8}}>
                <input className="set-input" style={{flex: 1}} placeholder={tr("Nom (català)", "Nombre (catalán)")} value={dish.name_ca || ""} onChange={function(e) { updateDish(field, idx, "name_ca", e.target.value); }} />
                <input className="set-input" style={{flex: 1}} placeholder={tr("Nom (espanyol)", "Nombre (español)")} value={dish.name_es || ""} onChange={function(e) { updateDish(field, idx, "name_es", e.target.value); }} />
                <button className="btn ghost" style={{padding: "8px 10px", color: "var(--terra-700)"}} onClick={function() { removeDish(field, idx); }} title={tr("Eliminar", "Eliminar")}>
                  <i className="ph ph-trash"></i>
                </button>
              </div>
              <div style={{display: "flex", gap: 8}}>
                <input className="set-input" style={{flex: 1, fontSize: 13}} placeholder={tr("Descripció CA (opcional)", "Descripción CA (opcional)")} value={dish.description_ca || ""} onChange={function(e) { updateDish(field, idx, "description_ca", e.target.value); }} />
                <input className="set-input" style={{flex: 1, fontSize: 13}} placeholder={tr("Descripció ES (opcional)", "Descripción ES (opcional)")} value={dish.description_es || ""} onChange={function(e) { updateDish(field, idx, "description_es", e.target.value); }} />
              </div>
            </div>
          );
        })}
        <button className="btn ghost" style={{width: "100%", fontSize: 13}} onClick={function() { addDish(field); }}>
          <i className="ph ph-plus"></i> {tr("Afegir plat", "Añadir plato")}
        </button>
      </div>
    );
  }

  return (
    <div>
      <header className="srv-page-head">
        <div>
          <h1 className="t-h1">{tr("Menú del dia", "Menú del día")}</h1>
          <p style={{margin: "8px 0 0", color: "var(--ink-2)", fontSize: 15, maxWidth: 720}}>
            {tr(
              "Configura el teu menú del dia. Es mostrarà automàticament a la web només els dies seleccionats.",
              "Configura tu menú del día. Se mostrará automáticamente en la web solo los días seleccionados."
            )}
          </p>
        </div>
      </header>

      <div style={{marginBottom: 16, padding: 16, background: "var(--paper)", borderRadius: 10, border: "1px solid var(--line)"}}>
        <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
          <div>
            <span className="eyebrow" style={{display: "block", marginBottom: 4}}>{tr("Estat", "Estado")}</span>
            <span style={{fontSize: 13, color: "var(--ink-2)"}}>{menu.active ? tr("Actiu — visible a la web", "Activo — visible en la web") : tr("Desactivat — no es mostra a la web", "Desactivado — no se muestra en la web")}</span>
          </div>
          <button className={"toggle " + (menu.active ? "on" : "")} onClick={function() { update("active", !menu.active); }} aria-label="toggle">
            <span className="thumb"></span>
          </button>
        </div>
      </div>

      <div style={{marginBottom: 16, padding: 16, background: "var(--paper)", borderRadius: 10, border: "1px solid var(--line)"}}>
        <span className="eyebrow" style={{display: "block", marginBottom: 8}}>{tr("Dies disponibles", "Días disponibles")}</span>
        <div style={{display: "flex", gap: 6, flexWrap: "wrap"}}>
          {DAYS.map(function(d) {
            var isOn = (menu.days_of_week || []).indexOf(d.key) >= 0;
            return (
              <button key={d.key} type="button" onClick={function() { toggleDay(d.key); }}
                style={{
                  padding: "10px 14px", borderRadius: 8,
                  border: isOn ? "2px solid var(--accent, var(--vinya-500))" : "1px solid var(--line)",
                  background: isOn ? "var(--accent-soft, var(--vinya-50))" : "var(--paper)",
                  cursor: "pointer", fontSize: 13, fontWeight: 500,
                  color: isOn ? "var(--accent, var(--vinya-500))" : "var(--ink-2)",
                  minWidth: 50
                }}>{d.label}</button>
            );
          })}
        </div>
      </div>

      <div style={{marginBottom: 16, padding: 16, background: "var(--paper)", borderRadius: 10, border: "1px solid var(--line)"}}>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16}}>
          <div>
            <span className="eyebrow" style={{display: "block", marginBottom: 4}}>{tr("Preu (€)", "Precio (€)")}</span>
            <input className="set-input" type="number" step="0.50" min="0" value={(menu.price_cents || 0) / 100} onChange={function(e) { update("price_cents", Math.round(parseFloat(e.target.value || 0) * 100)); }} />
          </div>
        </div>
      </div>

      <div style={{marginBottom: 16, padding: 16, background: "var(--paper)", borderRadius: 10, border: "1px solid var(--line)"}}>
        <span className="eyebrow" style={{display: "block", marginBottom: 12}}>{tr("Inclòs al preu", "Incluido en el precio")}</span>
        <div style={{display: "flex", flexDirection: "column", gap: 12}}>
          <label style={{display: "flex", alignItems: "center", gap: 10, cursor: "pointer"}}>
            <input type="checkbox" checked={!!menu.bread_included} onChange={function(e) { update("bread_included", e.target.checked); }} />
            <span style={{fontSize: 14}}>{tr("Pa", "Pan")}</span>
          </label>
          <label style={{display: "flex", alignItems: "center", gap: 10, cursor: "pointer"}}>
            <input type="checkbox" checked={!!menu.drink_included} onChange={function(e) { update("drink_included", e.target.checked); }} />
            <span style={{fontSize: 14}}>{tr("Beguda", "Bebida")}</span>
          </label>
          {menu.drink_included && (
            <div style={{display: "flex", gap: 8, marginLeft: 24}}>
              <input className="set-input" style={{flex: 1, fontSize: 13}} placeholder={tr("Descripció beguda CA", "Descripción bebida CA")} value={menu.drink_text_ca || ""} onChange={function(e) { update("drink_text_ca", e.target.value); }} />
              <input className="set-input" style={{flex: 1, fontSize: 13}} placeholder={tr("Descripció beguda ES", "Descripción bebida ES")} value={menu.drink_text_es || ""} onChange={function(e) { update("drink_text_es", e.target.value); }} />
            </div>
          )}
          <label style={{display: "flex", alignItems: "center", gap: 10, cursor: "pointer"}}>
            <input type="checkbox" checked={!!menu.coffee_or_dessert_included} onChange={function(e) { update("coffee_or_dessert_included", e.target.checked); }} />
            <span style={{fontSize: 14}}>{tr("Cafè o postre", "Café o postre")}</span>
          </label>
        </div>
      </div>

      {renderDishList("primers", "Primers", "Primeros")}
      {renderDishList("segons", "Segons", "Segundos")}
      {renderDishList("postres", "Postres (opcional)", "Postres (opcional)")}

      <div style={{marginBottom: 16, padding: 16, background: "var(--paper)", borderRadius: 10, border: "1px solid var(--line)"}}>
        <span className="eyebrow" style={{display: "block", marginBottom: 8}}>{tr("Notes addicionals (opcional)", "Notas adicionales (opcional)")}</span>
        <div style={{display: "flex", gap: 8}}>
          <textarea className="set-input" rows="2" style={{flex: 1, fontSize: 13, fontFamily: "inherit", resize: "vertical"}} placeholder={tr("Català", "Catalán")} value={menu.notes_ca || ""} onChange={function(e) { update("notes_ca", e.target.value); }}></textarea>
          <textarea className="set-input" rows="2" style={{flex: 1, fontSize: 13, fontFamily: "inherit", resize: "vertical"}} placeholder={tr("Espanyol", "Español")} value={menu.notes_es || ""} onChange={function(e) { update("notes_es", e.target.value); }}></textarea>
        </div>
      </div>
    </div>
  );
}

window.MenuDiari = MenuDiari;