/* === Main app shell === */

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "density": "comoda"
}/*EDITMODE-END*/;

const ROLE_TO_USER_ID = {
  admin:   "mgonzalez",     // Controller
  gerente: "apina",          // Manager
  jefe:    "rpina",          // Chef (Cocina)
  staff:   "bgarcia",        // Helper de cocina
  compras: "hrogelio",       // Encargado de compras (también Ayudante Mant)
};

const App = () => {
  const [tasks, setTasks] = React.useState(TASKS_INIT);
  const [compras, setCompras] = React.useState(COMPRAS_INIT);
  const [userId, setUserId] = React.useState("mgonzalez"); // active user, role inferred from STAFF
  const [areaId, setAreaId] = React.useState("centro");
  const [selectedId, setSelectedId] = React.useState("t-fuga"); // task panel open by default to match screenshot
  const [formOpen, setFormOpen] = React.useState(false);
  const [formArea, setFormArea] = React.useState(null);
  const [editTaskRef, setEditTaskRef] = React.useState(null);
  const [device, setDevice] = React.useState("desktop"); // "desktop" | "mobile"
  const [toast, setToast] = React.useState(null);

  // Tweaks
  const tweaks = useTweaks ? useTweaks(DEFAULT_TWEAKS) : [DEFAULT_TWEAKS, () => {}];
  const t = tweaks[0]; const setTweak = tweaks[1];

  // Apply density to root
  React.useEffect(() => {
    document.documentElement.setAttribute("data-density", t.density === "compacta" ? "compact" : "comfortable");
  }, [t.density]);

  // Derive role + user from selected userId
  const user = STAFF_BY_ID[userId] || STAFF_BY_ID.mgonzalez;
  const role = user.role;
  const perms = PERMISSIONS[role];

  React.useEffect(() => {
    const allowed = SIDEBAR_BY_ROLE(role, user);
    if (!allowed.includes(areaId)) {
      setAreaId(allowed[0] || "centro");
    }
    if (role === "staff") setDevice("mobile");
    else setDevice("desktop");
  }, [userId]);

  const selected = tasks.find(t => t.id === selectedId);
  const canEditSelected = selected ? perms.canEditTask(selected, user) : false;
  const canDeleteSelected = selected ? perms.canDelete(selected, user) : false;
  const canEditFn = (task) => perms.canEditTask(task, user);

  const visibleTasks = React.useMemo(() => {
    if (role === "admin" || role === "gerente") return tasks;
    const extras = (user.extraAreas || []).map(e => e.area);
    if (role === "jefe") {
      return tasks.filter(t => t.area === user.area || t.assignee === user.id || extras.includes(t.area));
    }
    if (role === "compras") {
      // Compras + áreas secundarias (Héctor también ve Mantenimiento)
      return tasks.filter(t => t.area === "compras" || extras.includes(t.area));
    }
    if (role === "staff") {
      // Helper/Maid/Ayudante ve toda su área + áreas extra
      return tasks.filter(t => t.area === user.area || extras.includes(t.area));
    }
    return tasks;
  }, [tasks, role, user]);

  const handleUpdate = (next) => {
    setTasks(ts => ts.map(t => t.id === next.id ? next : t));
  };

  const handleDelete = (id) => {
    setTasks(ts => ts.filter(t => t.id !== id));
    if (selectedId === id) setSelectedId(null);
  };

  const handleToggle = (id) => {
    setTasks(ts => ts.map(t => {
      if (t.id !== id) return t;
      if (!perms.canEditTask(t, user)) return t;
      const done = t.status === "terminada";
      if (!done) {
        // If recurring, schedule next occurrence
        if (t.recurrence && t.recurrence !== "ninguna") {
          const nextDue = nextOccurrence(t.due, t.recurrence);
          // also create a "next" instance — for the prototype we just bump due forward
          return { ...t, status: "pendiente", due: nextDue, checklist: t.checklist.map(c => ({ ...c, done: false })) };
        }
        return { ...t, status: "terminada" };
      }
      return { ...t, status: "pendiente" };
    }));
  };

  const handleOpenForm = (a) => {
    if (!perms.canCreateTask("any", user)) return;
    // Default to the area passed in; if none, use the currently open area context;
    // fall back to user's area; otherwise let the form pick.
    const target = a || (areaId !== "centro" ? areaId : null) || user.area || null;
    setFormArea(target);
    setEditTaskRef(null);
    setFormOpen(true);
  };

  const handleEditTask = (task) => {
    if (!perms.canEditTask(task, user)) return;
    setEditTaskRef(task);
    setFormArea(null);
    setFormOpen(true);
  };

  const handleSave = (taskData) => {
    if (editTaskRef) {
      // Update existing
      setTasks(ts => ts.map(t => t.id === taskData.id ? taskData : t));
      setSelectedId(taskData.id);
    } else {
      // Create new
      setTasks(ts => [taskData, ...ts]);
      setSelectedId(taskData.id);
    }
    setFormOpen(false);
    setEditTaskRef(null);
  };

  const handleAddToCompras = (list, item) => {
    setCompras(c => ({
      ...c,
      [list]: [
        { id: "c-" + Date.now(), name: item.name, qty: item.qty || 1, unit: item.unit || "pza",
          status: "pendiente", priority: "media", supplier: "", note: "Agregado automáticamente desde inventario",
          addedBy: user.id, addedOn: TODAY_ISO },
        ...c[list],
      ],
    }));
    setToast(`“${item.name}” agregado a Compras · ${list === "bar" ? "Bar" : list === "cocina" ? "Cocina" : "Ama de llaves"}`);
    setTimeout(() => setToast(null), 3000);
  };

  const currentArea = AREA_BY_ID[areaId];
  const title = currentArea?.label || "Centro de mando";

  /* === Render mobile preview === */
  if (device === "mobile") {
    return (
      <div className="cdc-mobile-wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: 380, marginBottom: 14 }}>
          <div style={{ fontFamily: "var(--cdc-display)", fontSize: 22, fontWeight: 500, color: "var(--cdc-ink)" }}>
            Casa de Casas · Staff
          </div>
          <button className="cdc-btn" onClick={() => setDevice("desktop")}>
            Vista escritorio
          </button>
        </div>
        <div className="cdc-phone">
          <MobileApp tasks={visibleTasks} user={user} role={role} onUpdate={handleUpdate} onCreate={handleOpenForm} compras={compras} setCompras={setCompras} />
        </div>
        <div style={{ marginTop: 14, fontSize: 12.5, color: "var(--cdc-ink-3)", textAlign: "center", maxWidth: 420 }}>
          Vista móvil de <strong>{user.name}</strong> ({user.title}) · ve las tareas de su área y puede modificar el estado
        </div>
        {tweaks[0] && (
          <DeskMobileTweaks tweak={t} setTweak={setTweak} device={device} setDevice={setDevice} />
        )}
      </div>
    );
  }

  /* === Desktop === */
  const panelOpen = !!selected;

  return (
    <>
      <div className="cdc-app">
        <Sidebar
          currentArea={areaId}
          setArea={(id) => { setAreaId(id); setSelectedId(null); }}
          role={role}
          user={user}
          onOpenAddArea={() => handleOpenForm()}
        />
        <main className="cdc-main">
          <Topbar
            title={title}
            userId={userId}
            setUserId={setUserId}
            user={user}
            role={role}
            dateIso={TODAY_ISO}
            device={device}
            setDevice={setDevice}
            tasks={visibleTasks}
            onSelectTask={setSelectedId}
          />
          <div className="cdc-content" data-panel-open={panelOpen}>
            <div className="cdc-scroll">
              {areaId === "centro" && (
                <CentroDeMando
                  tasks={visibleTasks}
                  onSelect={setSelectedId}
                  selectedId={selectedId}
                  onToggle={handleToggle}
                  canEditFn={canEditFn}
                />
              )}
              {areaId === "cocina" && (
                <CocinaView
                  tasks={visibleTasks}
                  onSelect={setSelectedId}
                  selectedId={selectedId}
                  onToggle={handleToggle}
                  canEditFn={canEditFn}
                  role={role}
                  user={user}
                  compras={compras}
                  setCompras={setCompras}
                />
              )}
              {areaId === "bar" && (
                <BarView
                  tasks={visibleTasks}
                  onSelect={setSelectedId}
                  selectedId={selectedId}
                  onToggle={handleToggle}
                  canEditFn={canEditFn}
                  role={role}
                  user={user}
                  compras={compras}
                  setCompras={setCompras}
                />
              )}
              {areaId === "amallaves" && (
                <AmaLlavesView
                  tasks={visibleTasks}
                  onSelect={setSelectedId}
                  selectedId={selectedId}
                  onToggle={handleToggle}
                  canEditFn={canEditFn}
                  role={role}
                  user={user}
                  compras={compras}
                  setCompras={setCompras}
                  onCreate={handleOpenForm}
                />
              )}
              {areaId === "yate" && (
                <YateView
                  tasks={visibleTasks}
                  onSelect={setSelectedId}
                  selectedId={selectedId}
                  onToggle={handleToggle}
                  canEditFn={canEditFn}
                  role={role}
                  user={user}
                  compras={compras}
                  setCompras={setCompras}
                  onCreate={handleOpenForm}
                />
              )}
              {areaId === "compras" && (
                <ComprasView
                  compras={compras}
                  setCompras={setCompras}
                  role={role}
                  user={user}
                />
              )}
              {areaId === "mant" && (
                <MantView
                  tasks={visibleTasks}
                  onSelect={setSelectedId}
                  selectedId={selectedId}
                  onToggle={handleToggle}
                  canEditFn={canEditFn}
                  onCreate={handleOpenForm}
                  role={role}
                  user={user}
                />
              )}
              {areaId === "huespedes" && (
                <HuespedesView role={role} user={user} />
              )}
              {areaId !== "centro" && areaId !== "cocina" && areaId !== "bar" && areaId !== "amallaves" && areaId !== "yate" && areaId !== "mant" && areaId !== "huespedes" && areaId !== "compras" && (
                <AreaView
                  areaId={areaId}
                  tasks={visibleTasks}
                  onSelect={setSelectedId}
                  selectedId={selectedId}
                  onToggle={handleToggle}
                  canEditFn={canEditFn}
                  onCreate={handleOpenForm}
                  role={role}
                />
              )}
            </div>
            {panelOpen && (
              <TaskPanel
                task={selected}
                onClose={() => setSelectedId(null)}
                onUpdate={handleUpdate}
                onDelete={handleDelete}
                onEdit={handleEditTask}
                canEdit={canEditSelected}
                canDelete={canDeleteSelected}
                role={role}
              />
            )}
          </div>
        </main>
      </div>

      <TaskForm
        open={formOpen}
        onClose={() => { setFormOpen(false); setEditTaskRef(null); }}
        onSave={handleSave}
        areaDefault={formArea}
        editTask={editTaskRef}
        role={role}
        user={user}
      />

      {toast && (
        <div style={{
          position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)",
          background: "var(--cdc-ink)", color: "white", padding: "10px 18px", borderRadius: 999,
          boxShadow: "var(--cdc-shadow-lg)", fontSize: 13.5, fontWeight: 500, zIndex: 200,
          display: "flex", alignItems: "center", gap: 8,
        }}>
          <I.Check size={14} stroke={2.4} style={{ color: "var(--cdc-coral)" }} />
          {toast}
        </div>
      )}

      <DeskMobileTweaks tweak={t} setTweak={setTweak} device={device} setDevice={setDevice} />
    </>
  );
};

/* === Tweaks panel === */

const DeskMobileTweaks = ({ tweak, setTweak, device, setDevice }) => {
  if (!window.TweaksPanel) return null;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Densidad" />
      <TweakRadio
        label="Filas"
        value={tweak.density}
        options={["comoda", "compacta"]}
        onChange={(v) => setTweak("density", v)}
      />
      <TweakSection label="Vista" />
      <TweakRadio
        label="Dispositivo"
        value={device}
        options={["desktop", "mobile"]}
        onChange={(v) => setDevice(v)}
      />
    </TweaksPanel>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);