/* ANISAN — Calendário. Visão mensal estilo Google Calendar: feriados NACIONAIS
   brasileiros (window.feriadosBR, calculados por ano) + eventos da empresa (dias
   importantes) que o usuário marca. Eventos ficam em data.calendario (persistido).
   Clique num dia para adicionar; clique num evento para editar/excluir. */

function Calendario() {
  const store = window.useStore();
  const data = store.data;
  const mobile = window.useIsMobile();
  const hoje = window.todayISO();
  const [ref, setRef] = React.useState(hoje.slice(0, 7));   // "yyyy-mm"
  const [dlg, setDlg] = React.useState(null);               // { id?, data, titulo, cor }

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  const SectionTitle = window.SectionTitle, Button = window.Button, Dialog = window.Dialog, Input = window.Input;

  const pad = (n) => String(n).padStart(2, "0");
  const iso = (y, m, d) => y + "-" + pad(m) + "-" + pad(d);
  const [ano, mes] = ref.split("-").map(Number);            // mes 1..12
  const feriados = window.feriadosBR(ano);                   // { iso: nome }
  const eventos = data.calendario || [];
  const fimDe = (e) => e.fim || e.data;   // evento de 1 dia: fim = início

  // grade do mês (domingo → sábado), 6 semanas fixas.
  const primeiro = new Date(ano, mes - 1, 1);
  const inicio = new Date(primeiro); inicio.setDate(1 - primeiro.getDay());
  const semanas = [];
  for (let w = 0; w < 6; w++) {
    const dias = [];
    for (let dd = 0; dd < 7; dd++) {
      const c = new Date(inicio); c.setDate(inicio.getDate() + w * 7 + dd);
      dias.push({ iso: iso(c.getFullYear(), c.getMonth() + 1, c.getDate()), dia: c.getDate(), outroMes: c.getMonth() !== mes - 1, dow: c.getDay() });
    }
    semanas.push(dias);
  }
  const diasSem = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
  const mesNome = (window.monthNomes || [])[mes - 1] || mes;
  const CORES = ["var(--brass)", "var(--jade)", "var(--clay)", "var(--slate)", "var(--sand)"];

  const shiftMes = (delta) => { let m = mes - 1 + delta, y = ano; while (m < 0) { m += 12; y--; } while (m > 11) { m -= 12; y++; } setRef(y + "-" + pad(m + 1)); };

  const novoEvento = (di) => setDlg({ data: di, fim: di, titulo: "", cor: "var(--brass)" });
  const editarEvento = (e) => setDlg({ id: e.id, data: e.data, fim: e.fim || e.data, titulo: e.titulo, cor: e.cor || "var(--brass)" });
  const salvar = () => {
    const f = dlg; if (!f || !f.titulo.trim()) return;
    const ini = f.data;
    const fim = (f.fim && f.fim >= ini) ? f.fim : ini;   // garante fim >= início
    store.set((d) => {
      if (!Array.isArray(d.calendario)) d.calendario = [];
      if (f.id) { const ev = d.calendario.find((x) => x.id === f.id); if (ev) { ev.titulo = f.titulo.trim(); ev.data = ini; ev.fim = fim; ev.cor = f.cor; } }
      else d.calendario.push({ id: window.uid(), data: ini, fim: fim, titulo: f.titulo.trim(), cor: f.cor });
    }, "calendario");
    setDlg(null);
  };
  const excluir = () => { const f = dlg; if (f && f.id) store.set((d) => { d.calendario = (d.calendario || []).filter((x) => x.id !== f.id); }, "calendario"); setDlg(null); };

  return (
    <div style={{ padding: mobile ? "18px 14px 40px" : "26px 32px 48px" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginBottom: 18 }}>
        <SectionTitle style={{ margin: 0 }} meta="feriados nacionais + dias da empresa">Calendário</SectionTitle>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-pill)", padding: "5px 6px" }}>
            <button onClick={() => shiftMes(-1)} title="Mês anterior" style={navMiniCal}><i data-lucide="chevron-left" style={{ width: 16, height: 16, strokeWidth: 1.8 }}></i></button>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--paper)", minWidth: 132, textAlign: "center", textTransform: "capitalize" }}>{mesNome} {ano}</span>
            <button onClick={() => shiftMes(1)} title="Próximo mês" style={navMiniCal}><i data-lucide="chevron-right" style={{ width: 16, height: 16, strokeWidth: 1.8 }}></i></button>
          </span>
          {ref !== hoje.slice(0, 7) && <button onClick={() => setRef(hoje.slice(0, 7))} style={{ background: "none", border: "1px solid var(--hairline-strong)", borderRadius: "var(--radius-pill)", color: "var(--brass)", fontFamily: "var(--font-mono)", fontSize: 11, padding: "7px 13px", cursor: "pointer" }}>Hoje</button>}
          <Button variant="primary" onClick={() => novoEvento(hoje)}>+ Novo evento</Button>
        </div>
      </div>

      <div style={{ border: "1px solid var(--hairline)", borderRadius: "var(--radius)", overflow: "hidden", background: "var(--surface)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", borderBottom: "1px solid var(--hairline-strong)" }}>
          {diasSem.map((d, i) => (
            <div key={i} style={{ padding: "9px 6px", textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: (i === 0 || i === 6) ? "var(--clay)" : "var(--muted-2)" }}>{d}</div>
          ))}
        </div>
        {semanas.map((sem, wi) => {
          const wIni = sem[0].iso, wFim = sem[6].iso;
          const idx = (di) => sem.findIndex((d) => d.iso === di);
          // eventos que intersectam esta semana, ordenados por início (e mais longos primeiro)
          const weekEvs = eventos
            .filter((e) => e.data <= wFim && fimDe(e) >= wIni)
            .sort((a, b) => (a.data < b.data ? -1 : a.data > b.data ? 1 : (fimDe(b) < fimDe(a) ? 1 : -1)));
          return (
            <div key={wi} style={{ borderBottom: "1px solid var(--hairline)" }}>
              {/* números dos dias + feriados */}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}>
                {sem.map((dia) => {
                  const fer = feriados[dia.iso];
                  const ehHoje = dia.iso === hoje;
                  return (
                    <div key={dia.iso} onClick={() => novoEvento(dia.iso)} title="Clique para adicionar um evento"
                      style={{ minHeight: mobile ? 40 : 46, borderRight: "1px solid var(--hairline)", padding: "5px 6px 2px", cursor: "pointer", background: dia.outroMes ? "var(--ink)" : "transparent", opacity: dia.outroMes ? 0.45 : 1, overflow: "hidden" }}>
                      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 4 }}>
                        <span style={{ display: "inline-grid", placeItems: "center", width: 22, height: 22, borderRadius: "50%", fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: ehHoje ? 700 : 400, background: ehHoje ? "var(--brass)" : "transparent", color: ehHoje ? "var(--ink)" : ((dia.dow === 0 || dia.dow === 6) ? "var(--clay)" : "var(--paper)") }}>{dia.dia}</span>
                        {fer && <span title={fer} style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--clay)", flexShrink: 0 }}></span>}
                      </div>
                      {fer && <div title={fer} style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 8.5, letterSpacing: "0.01em", color: "var(--clay)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{fer}</div>}
                    </div>
                  );
                })}
              </div>
              {/* barras dos eventos: cada uma numa linha, spanning pelas colunas dos dias */}
              {weekEvs.length > 0 && (
                <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: "1px 4px 5px" }}>
                  {weekEvs.map((e) => {
                    const contIni = e.data < wIni, contFim = fimDe(e) > wFim;
                    const s = contIni ? 0 : idx(e.data), en = contFim ? 6 : idx(fimDe(e));
                    const multi = fimDe(e) !== e.data;
                    return (
                      <div key={e.id} style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}>
                        <button onClick={(ev) => { ev.stopPropagation(); editarEvento(e); }}
                          title={e.titulo + (multi ? "  (" + window.dateLabel(e.data).slice(0, 5) + " – " + window.dateLabel(fimDe(e)).slice(0, 5) + ")" : "")}
                          style={{ gridColumn: (s + 1) + " / " + (en + 2), display: "flex", alignItems: "center", gap: 5, background: "var(--surface-2)", border: "none",
                            borderLeft: contIni ? "none" : ("3px solid " + (e.cor || "var(--brass)")),
                            borderTopLeftRadius: contIni ? 0 : 5, borderBottomLeftRadius: contIni ? 0 : 5, borderTopRightRadius: contFim ? 0 : 5, borderBottomRightRadius: contFim ? 0 : 5,
                            padding: "2px 7px", cursor: "pointer", textAlign: "left", minWidth: 0, overflow: "hidden" }}>
                          {multi && <span style={{ width: 6, height: 6, borderRadius: "50%", background: e.cor || "var(--brass)", flexShrink: 0 }}></span>}
                          <span style={{ flex: 1, minWidth: 0, fontFamily: "var(--font-body)", fontSize: 10.5, color: "var(--paper)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{(contIni ? "… " : "") + e.titulo}</span>
                        </button>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <p style={{ fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--muted-2)", lineHeight: 1.6, margin: "14px 2px 0", maxWidth: 720 }}>
        Clique em qualquer dia para <b style={{ color: "var(--paper)" }}>marcar um dia importante</b> da empresa — defina <b style={{ color: "var(--paper)" }}>Início</b> e <b style={{ color: "var(--paper)" }}>Fim</b> para eventos de <b style={{ color: "var(--paper)" }}>vários dias</b>. O ponto vermelho indica <b style={{ color: "var(--clay)" }}>feriado nacional</b>. Clique num evento para editar ou excluir.
      </p>

      <Dialog open={!!dlg} title={dlg && dlg.id ? "Editar evento" : "Novo evento"} onClose={() => setDlg(null)} width={460}
        footer={<>
          {dlg && dlg.id && <Button accent="var(--clay)" onClick={excluir}>Excluir</Button>}
          <Button onClick={() => setDlg(null)}>Cancelar</Button>
          <Button variant="solid" onClick={salvar}>Salvar</Button>
        </>}>
        {dlg && (
          <div style={{ display: "grid", gap: 16 }}>
            <Input label="Título" value={dlg.titulo} onChange={(v) => setDlg({ ...dlg, titulo: v })} icon="tag" placeholder="Ex.: Reunião de fechamento" />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <Input label="Início" type="date" value={dlg.data} onChange={(v) => setDlg({ ...dlg, data: v, fim: (dlg.fim && dlg.fim >= v) ? dlg.fim : v })} icon="calendar" inputStyle={{ colorScheme: "dark" }} />
              <Input label="Fim" type="date" value={dlg.fim || dlg.data} onChange={(v) => setDlg({ ...dlg, fim: v })} icon="calendar" inputStyle={{ colorScheme: "dark" }} />
            </div>
            {dlg.fim && dlg.fim !== dlg.data && <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: -6, fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted)" }}><i data-lucide="calendar-range" style={{ width: 13, height: 13, strokeWidth: 1.7, color: "var(--brass)" }}></i>Evento de vários dias</div>}
            <div>
              <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 9 }}>Cor</span>
              <div style={{ display: "flex", gap: 10 }}>
                {CORES.map((c) => (
                  <button key={c} onClick={() => setDlg({ ...dlg, cor: c })} title="Cor do evento"
                    style={{ width: 30, height: 30, borderRadius: "50%", background: c, cursor: "pointer", border: dlg.cor === c ? "2px solid var(--paper)" : "2px solid var(--hairline)", padding: 0 }} />
                ))}
              </div>
            </div>
          </div>
        )}
      </Dialog>
    </div>
  );
}

const navMiniCal = { width: 28, height: 28, borderRadius: "50%", background: "none", border: "none", display: "grid", placeItems: "center", cursor: "pointer", color: "var(--muted)" };

window.Calendario = Calendario;