"use client"; import { useEffect, useState } from "react"; import { Clock, Plus } from "lucide-react"; import { useRolagemHorizontal } from "./gestos"; import { DicaEvento, useDica } from "./dica"; import { chaveDoDia, estiloSituacao, horarioDoEvento, type EventoAgenda } from "./tipos"; /** * Semana (ou dia) como grade de horario, com o bloco do compromisso na * altura da propria duracao — a mesma linguagem visual de qualquer agenda * premium: quem olha ve de relance onde o dia esta cheio, nao so que existe * "algo" as 14h. * * As celulas de fundo (uma por hora, por dia) carregam data-dia/data-hora e * ficam abaixo dos blocos. Durante o arrasto os blocos ganham * pointer-events-none, entao o ponteiro sempre acerta a celula por baixo — * sem isso, soltar em cima de outro compromisso perderia o alvo. */ const ROW_H = 72; const EIXO_W = 56; /* Calibrado para os sete dias caberem sem rolagem num monitor comum: acima disso a semana ficava cortada em telas de 1600px e a pessoa tinha de arrastar para ver sexta e sabado. Em tela maior o flex-1 estica as colunas bem alem deste minimo. */ const COL_MIN_W = 172; const MAX_SEM_HORA = 3; /* Linhas discretas de proposito: a grade e referencia, nao conteudo. Quando ela tem o mesmo peso do cartao, a tela vira tabela. */ const LINHA_H = "var(--ag-line-h)"; const LINHA_V = "var(--ag-line-v)"; /* Faixas de altura que decidem quanto cabe dentro do cartao. Sem isso todo compromisso vira pill com reticencias, mesmo os de duas horas que tem espaco de sobra. Os numeros saem da soma real do conteudo, nao de chute: 20px de padding vertical, 16px por linha de titulo, 6px de respiro e 20px do rodape. Chutar para baixo fazia o titulo de duas linhas passar por cima do horario. */ const ALTURA_2_LINHAS = 78; const ALTURA_STATUS = 62; const ALTURA_HORA = 58; function horaFmt(min: number) { const h = Math.floor(min / 60); const m = min % 60; return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`; } type Posicionado = { evento: EventoAgenda; inicioMin: number; fimMin: number; lane: number; lanes: number; }; /* Faixas por sobreposicao: varre em ordem de inicio e usa a primeira faixa livre (fim <= novo inicio), como qualquer agenda faz para nao empilhar compromissos do mesmo horario um em cima do outro. O numero de faixas e contado por bloco de sobreposicao, e nao pelo dia inteiro: com a conta global, duas reunioes empilhadas as 9h espremiam a largura de todos os outros compromissos do dia — inclusive os que estavam sozinhos as 15h e tinham a coluna toda disponivel. E dai vinha o "Reuniao de alinhament..." cortado sem motivo. */ function posicionarDia(eventos: EventoAgenda[]): Posicionado[] { const comHorario = eventos .map((e) => { const { inicioMin, fimMin } = horarioDoEvento(e); if (inicioMin === null) return null; return { evento: e, inicioMin, fimMin: fimMin && fimMin > inicioMin ? fimMin : inicioMin + 60 }; }) .filter((x): x is { evento: EventoAgenda; inicioMin: number; fimMin: number } => x !== null) .sort((a, b) => a.inicioMin - b.inicioMin || a.fimMin - b.fimMin); const resultado: Posicionado[] = []; let bloco: Posicionado[] = []; let fimPorFaixa: number[] = []; let fimDoBloco = -1; const fechar = () => { const lanes = Math.max(1, fimPorFaixa.length); for (const item of bloco) resultado.push({ ...item, lanes }); bloco = []; fimPorFaixa = []; }; for (const item of comHorario) { /* Comecou depois do fim de tudo que veio antes: bloco novo, largura cheia. */ if (bloco.length && item.inicioMin >= fimDoBloco) fechar(); let lane = fimPorFaixa.findIndex((fim) => fim <= item.inicioMin); if (lane === -1) { lane = fimPorFaixa.length; fimPorFaixa.push(item.fimMin); } else { fimPorFaixa[lane] = item.fimMin; } bloco.push({ ...item, lane, lanes: 0 }); fimDoBloco = Math.max(fimDoBloco, item.fimMin); } if (bloco.length) fechar(); return resultado; } export default function GradeHoraria({ dias, porDia, hojeChave, aoAbrir, aoArrastar, aoCriar, diaAlvo, horaAlvo, arrastandoId, }: { dias: Date[]; porDia: Map; hojeChave: string; aoAbrir: (evento: EventoAgenda) => void; aoArrastar: (e: React.PointerEvent, evento: EventoAgenda) => void; aoCriar?: (dia: string, hora: number | null) => void; diaAlvo: string | null; horaAlvo: number | null; arrastandoId?: string | null; }) { const [agora, setAgora] = useState(() => new Date()); useEffect(() => { const id = window.setInterval(() => setAgora(new Date()), 60000); return () => window.clearInterval(id); }, []); const { ref: scrollRef, temMaisPraDireita, podeRolar, arrastandoTela } = useRolagemHorizontal(dias.length); const { dicaProps, camada, fecharDica } = useDica(); const todosComHora = dias.flatMap((d) => porDia.get(chaveDoDia(d)) ?? []).map((e) => horarioDoEvento(e).inicioMin); const horasUsadas = todosComHora.filter((h): h is number => h !== null).map((min) => Math.floor(min / 60)); const horaInicio = horasUsadas.length ? Math.max(0, Math.min(...horasUsadas) - 1) : 8; const horaFim = horasUsadas.length ? Math.min(23, Math.max(...horasUsadas) + 1) : 19; const horas = Array.from({ length: horaFim - horaInicio + 1 }, (_, i) => horaInicio + i); const alturaTotal = horas.length * ROW_H; const emArrasto = Boolean(arrastandoId); /* A linha do agora atravessa a grade inteira — do corredor de horas ate o ultimo dia — e nao so a coluna de hoje. Por isso e calculada uma vez aqui em cima, e nao dentro de cada coluna. */ const minutoInicio = horaInicio * 60; const minutoAgora = agora.getHours() * 60 + agora.getMinutes(); const hojeNaSemana = dias.some((d) => chaveDoDia(d) === hojeChave); const mostrarAgora = hojeNaSemana && minutoAgora >= minutoInicio && minutoAgora <= horaFim * 60; const topoAgora = ((minutoAgora - minutoInicio) / 60) * ROW_H; return (
1 ? EIXO_W + dias.length * COL_MIN_W : undefined }}> {/* Cabecalho: dia da semana + numero, e a faixa "sem horario" logo abaixo. */}
{/* Canto: fica parado nos dois eixos, senao o cabecalho do dia passaria por baixo dele ao rolar para o lado. */} {dias.map((dia) => { const chave = chaveDoDia(dia); const ehHoje = chave === hojeChave; return (

{dia.toLocaleDateString("pt-BR", { weekday: "short" }).replace(".", "")}

{dia.getDate()}

); })}
{/* Sem horario: prazos e compromissos sem hora marcada, um chip por evento, sem competir por espaco com a grade proporcional embaixo. */} {dias.some((d) => (porDia.get(chaveDoDia(d)) ?? []).some((e) => horarioDoEvento(e).inicioMin === null)) && (
Sem hora {dias.map((dia) => { const chave = chaveDoDia(dia); const semHora = (porDia.get(chave) ?? []).filter((e) => horarioDoEvento(e).inicioMin === null); const visiveis = semHora.slice(0, MAX_SEM_HORA); const ocultas = semHora.length - visiveis.length; return (
{ /* So o vazio da faixa cria: o clique que veio de um mini-cartao ja abriu aquele compromisso. */ if ((ev.target as HTMLElement).closest("button")) return; aoCriar(chave, null); } : undefined } className={`flex min-w-0 flex-1 flex-col content-start gap-[4px] border-l p-[6px] ${ aoCriar ? "cursor-pointer hover:bg-[rgba(108,60,240,0.03)]" : "" } ${diaAlvo === chave && horaAlvo === null ? "bg-[rgba(108,60,240,0.06)]" : ""}`} style={{ borderColor: LINHA_V }} > {visiveis.map((e) => ( ))} {ocultas > 0 && ( +{ocultas} )}
); })}
)} {/* Grade proporcional. */}
{/* Corredor das horas parado na esquerda: ao arrastar a semana para o lado, sem isto some a unica referencia de que horas e cada linha — e a grade vira um monte de retangulos soltos. */}
{horas.map((h) => (
{String(h).padStart(2, "0")}:00
))}
{dias.map((dia) => { const chave = chaveDoDia(dia); const ehHoje = chave === hojeChave; const doDia = porDia.get(chave) ?? []; const posicionados = posicionarDia(doDia); return (
1 ? COL_MIN_W : undefined, borderColor: LINHA_V, background: ehHoje ? "rgba(108,60,240,0.035)" : undefined, }} > {/* A celula vazia e o atalho de criar: ate aqui so o botao do topo abria o formulario, e clicar no horario que a pessoa ja estava olhando nao fazia nada. Fica como div, e nao button, porque o arrasto-para-rolar solta o gesto quando o alvo e um botao — e a grade toda deixaria de rolar por arrasto. */} {horas.map((h) => (
aoCriar(chave, h) : undefined} role={aoCriar ? "button" : undefined} tabIndex={aoCriar ? -1 : undefined} aria-label={ aoCriar ? `Criar compromisso às ${String(h).padStart(2, "0")}:00` : undefined } className={`group/celula relative border-t first:border-t-0 ${ aoCriar ? "cursor-pointer" : "" }`} style={{ height: ROW_H, borderColor: LINHA_H, background: diaAlvo === chave && horaAlvo === h ? "rgba(108,60,240,0.08)" : undefined, }} > {aoCriar && !emArrasto && ( )}
))} {posicionados.map(({ evento, inicioMin, fimMin, lane, lanes }) => { const top = ((inicioMin - minutoInicio) / 60) * ROW_H; /* 28px e o piso do mini-cartao: abaixo disso o texto vazava nos compromissos de 15 minutos, e o bloco passava a ler como etiqueta solta em vez de cartao. */ const altura = Math.max(((fimMin - inicioMin) / 60) * ROW_H - 4, 28); const largura = 100 / lanes; const situacao = estiloSituacao(evento.situacao); /* Formatos conforme a altura real do bloco. O compacto so vale para compromisso curto de verdade — nao e o padrao para todo mundo. */ const duasLinhas = altura >= ALTURA_2_LINHAS; const comStatus = altura >= ALTURA_STATUS; const compacto = altura < ALTURA_HORA; return ( ); })}
); })} {/* Linha do agora: uma so, atravessando a grade inteira. */} {mostrarAgora && (
{horaFmt(minutoAgora)}
)}
{/* Sinaliza que ha mais dias pra ver rolando pra direita — sem isso, o ultimo dia visivel parece cortado sem motivo, nao um convite pra rolar. */} {temMaisPraDireita && (
)} {camada}
); } function podeArrastarNaGrade(tipo: string) { return tipo === "compromisso" || tipo === "pedido_entrega"; }