// Interactive weekly schedule builder mock — the product visual
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS, useCallback } = React;

const SHIFTS = {
  M: { code: "M", label: "Manhã", time: "06–14h", cls: "sh--m" },
  T: { code: "T", label: "Tarde", time: "14–22h", cls: "sh--t" },
  N: { code: "N", label: "Noite", time: "22–06h", cls: "sh--n" },
  F: { code: "F", label: "Folga", time: "—", cls: "sh--f" },
};
const CYCLE = ["M", "T", "N", "F"];

const TEAM = [
  { name: "Ana Souza", role: "Atendimento", init: "AS", tone: 0 },
  { name: "Bruno Lima", role: "Caixa", init: "BL", tone: 1 },
  { name: "Carla Dias", role: "Estoque", init: "CD", tone: 2 },
  { name: "Diego Reis", role: "Atendimento", init: "DR", tone: 3 },
  { name: "Elena Castro", role: "Supervisão", init: "EC", tone: 4 },
  { name: "Felipe Nunes", role: "Caixa", init: "FN", tone: 5 },
];

const DAYS = [
  { d: "Seg", n: "12" }, { d: "Ter", n: "13" }, { d: "Qua", n: "14" },
  { d: "Qui", n: "15" }, { d: "Sex", n: "16" }, { d: "Sáb", n: "17" }, { d: "Dom", n: "18" },
];

// Target generated schedule (rows x 7 days)
const TARGET = [
  ["M", "M", "T", "F", "M", "T", "F"],
  ["T", "F", "M", "M", "T", "F", "N"],
  ["F", "T", "T", "N", "F", "M", "M"],
  ["N", "N", "F", "T", "M", "M", "T"],
  ["M", "T", "M", "F", "T", "N", "F"],
  ["F", "M", "N", "T", "N", "F", "T"],
];

function emptyGrid() {
  return TEAM.map(() => DAYS.map(() => null));
}

function ScheduleApp({ compact = false }) {
  const [grid, setGrid] = useStateS(emptyGrid);
  const [generating, setGenerating] = useStateS(false);
  const [done, setDone] = useStateS(false);
  const rootRef = useRefS(null);
  const ranRef = useRefS(false);
  const timers = useRefS([]);

  const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; };

  const generate = useCallback(() => {
    clearTimers();
    setDone(false);
    setGenerating(true);
    setGrid(emptyGrid());
    const order = [];
    for (let c = 0; c < DAYS.length; c++) for (let r = 0; r < TEAM.length; r++) order.push([r, c]);
    order.forEach(([r, c], i) => {
      const t = setTimeout(() => {
        setGrid((g) => {
          const ng = g.map((row) => row.slice());
          ng[r][c] = TARGET[r][c];
          return ng;
        });
        if (i === order.length - 1) { setGenerating(false); setDone(true); }
      }, 90 + i * 28);
      timers.current.push(t);
    });
  }, []);

  // auto-run when scrolled into view (once), with fallbacks for unreliable observers
  useEffectS(() => {
    const el = rootRef.current;
    if (!el) return;
    const run = () => { if (!ranRef.current) { ranRef.current = true; generate(); return true; } return false; };
    const inView = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      return r.top < vh * 0.85 && r.bottom > 0;
    };
    if (inView()) { run(); return () => clearTimers(); }
    let io;
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) run(); });
      }, { threshold: 0.3 });
      io.observe(el);
    }
    const onScroll = () => { if (inView()) { run(); window.removeEventListener("scroll", onScroll); } };
    window.addEventListener("scroll", onScroll, { passive: true });
    const t = setTimeout(run, 1800);
    return () => { if (io) io.disconnect(); window.removeEventListener("scroll", onScroll); clearTimeout(t); clearTimers(); };
  }, [generate]);

  const cycleCell = (r, c) => {
    if (generating) return;
    setGrid((g) => {
      const ng = g.map((row) => row.slice());
      const cur = ng[r][c];
      const idx = cur ? CYCLE.indexOf(cur) : -1;
      ng[r][c] = CYCLE[(idx + 1) % CYCLE.length];
      return ng;
    });
  };

  // coverage = people working (not folga / not empty) per day
  const coverage = DAYS.map((_, c) => grid.reduce((s, row) => s + (row[c] && row[c] !== "F" ? 1 : 0), 0));

  return (
    <div className={"sched" + (compact ? " sched--compact" : "")} ref={rootRef}>
      {/* window chrome */}
      <div className="sched__chrome">
        <div className="sched__dots"><i /><i /><i /></div>
        <div className="sched__addr"><span className="sched__lock" />app.naescala.com.br/escalas</div>
        <div className="sched__chrome-r" />
      </div>

      <div className="sched__body">
        {/* sidebar */}
        <aside className="sched__side">
          <div className="sched__brand">
            <img src="assets/logo-ne.png" alt="" />
            <b>Na&nbsp;Escala</b>
          </div>
          <nav className="sched__nav">
            {[
              { i: "calendar", t: "Escalas", on: true },
              { i: "swap", t: "Trocas" },
              { i: "coffee", t: "Folgas" },
              { i: "clock", t: "Jornada" },
              { i: "screen", t: "Equipe" },
            ].map((it) => (
              <span key={it.t} className={"sched__navit" + (it.on ? " is-on" : "")}>
                <Icon name={it.i} size={17} stroke={1.9} /> {it.t}
              </span>
            ))}
          </nav>
          <div className="sched__plan">
            <span className="sched__planlabel">Cobertura da semana</span>
            <b>{Math.round((coverage.reduce((a, b) => a + b, 0) / (TEAM.length * DAYS.length)) * 100)}%</b>
          </div>
        </aside>

        {/* main */}
        <div className="sched__main">
          <div className="sched__top">
            <div>
              <div className="sched__crumb">Operação · Loja Centro</div>
              <h4 className="sched__h">Escala semanal</h4>
            </div>
            <div className="sched__top-r">
              <span className="sched__week">12–18 mai</span>
              <button className="sched__gen" onClick={generate} disabled={generating}>
                <Icon name="spark" size={16} stroke={2} />
                {generating ? "Gerando…" : "Gerar escala"}
              </button>
            </div>
          </div>

          <div className="sched__legend">
            {Object.values(SHIFTS).map((s) => (
              <span key={s.code} className={"sched__lg " + s.cls}><i />{s.label}</span>
            ))}
            <span className="sched__hint">clique numa célula para ajustar</span>
          </div>

          <div className="sched__gridwrap">
            <div className="sched__grid">
              {/* header row */}
              <div className="sched__cell sched__cell--corner">Colaborador</div>
              {DAYS.map((d) => (
                <div key={d.d} className="sched__cell sched__head">
                  <b>{d.d}</b><span>{d.n}</span>
                </div>
              ))}

              {/* rows */}
              {TEAM.map((emp, r) => (
                <React.Fragment key={emp.name}>
                  <div className="sched__cell sched__emp">
                    <span className={"sched__av tone-" + emp.tone}>{emp.init}</span>
                    <span className="sched__empinfo"><b>{emp.name}</b><em>{emp.role}</em></span>
                  </div>
                  {DAYS.map((d, c) => {
                    const v = grid[r][c];
                    const s = v ? SHIFTS[v] : null;
                    return (
                      <button
                        key={c}
                        className={"sched__cell sched__slot " + (s ? s.cls : "sh--empty")}
                        onClick={() => cycleCell(r, c)}
                        style={{ animationDelay: "0ms" }}
                      >
                        {s ? (
                          <span className="sched__chip">
                            <b>{s.code}</b><em>{s.time}</em>
                          </span>
                        ) : <span className="sched__empty">+</span>}
                      </button>
                    );
                  })}
                </React.Fragment>
              ))}

              {/* coverage row */}
              <div className="sched__cell sched__cov sched__cov--label">Cobertura</div>
              {coverage.map((n, i) => (
                <div key={i} className="sched__cell sched__cov">
                  <span className="sched__covbar">
                    <span className="sched__covfill" style={{ height: `${(n / TEAM.length) * 100}%` }} />
                  </span>
                  <em>{n}</em>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {done && !compact && (
        <div className="sched__toast">
          <Icon name="check" size={16} stroke={2.4} /> Escala gerada em 0,8s — 42 turnos, 0 conflitos
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ScheduleApp });