"use client";

import { useEffect, useState } from "react";
import CartaoEvento from "./cartao-evento";
import type { EventoAgenda } from "./tipos";

/**
 * O dia como linha do tempo.
 *
 * Uma lista solta nao responde a pergunta que a pessoa faz de manha: "o que
 * tenho pela frente e quando". Com as horas na lateral, o buraco entre um
 * compromisso e outro fica visivel — e buraco na agenda e informacao, e onde
 * cabe o proximo servico.
 *
 * A faixa de horas nao e fixa: comeca uma hora antes do primeiro compromisso
 * e termina uma depois do ultimo. Mostrar 00h as 23h todo dia empurraria o
 * conteudo para fora da tela do celular.
 */

const SEM_HORA = "sem-hora";

function horaDe(evento: EventoAgenda): number | null {
  /* O horario vem no subtitulo, no formato HH:MM, porque a agenda agrega
     origens diferentes e so o compromisso proprio tem hora marcada. */
  const achado = String(evento.subtitulo || "").match(/^(\d{2}):(\d{2})/);
  return achado ? Number(achado[1]) : null;
}

export default function LinhaDoDia({
  eventos,
  ehHoje,
  aoAbrirCompromisso,
  aoArrastar,
  aoConcluir,
  arrastandoId,
}: {
  eventos: EventoAgenda[];
  ehHoje: boolean;
  aoAbrirCompromisso: (id: string) => void;
  aoArrastar: (e: React.PointerEvent, evento: EventoAgenda) => void;
  aoConcluir: (evento: EventoAgenda) => void;
  arrastandoId?: string | null;
}) {
  const [agora, setAgora] = useState(() => new Date());

  useEffect(() => {
    if (!ehHoje) return;
    /* De minuto em minuto: a linha do agora parada num horario velho e pior
       que nao ter linha nenhuma. */
    const id = window.setInterval(() => setAgora(new Date()), 60000);
    return () => window.clearInterval(id);
  }, [ehHoje]);

  const semHora = eventos.filter((e) => horaDe(e) === null);
  const comHora = eventos.filter((e) => horaDe(e) !== null);

  const horas = comHora.map((e) => horaDe(e) as number);
  const inicio = horas.length ? Math.max(0, Math.min(...horas) - 1) : 8;
  const fim = horas.length ? Math.min(23, Math.max(...horas) + 1) : 18;
  const faixa = Array.from({ length: fim - inicio + 1 }, (_, i) => inicio + i);

  const horaAgora = agora.getHours();
  const minutoAgora = agora.getMinutes();

  if (eventos.length === 0) return null;

  return (
    <div className="overflow-hidden rounded-[14px] border border-[var(--ag-border)] bg-[var(--ag-surface)] p-4 shadow-[var(--ag-sombra-1)] sm:p-5">
      <div className="space-y-4">
        {semHora.length > 0 && (
          <div className="space-y-2">
            <p className="px-1 text-[11px] font-semibold uppercase tracking-[0.03em] text-[var(--ag-text-4)]">
              Sem horário marcado
            </p>
            {semHora.map((e) => (
              <CartaoEvento
                key={`${SEM_HORA}-${e.tipo}-${e.origem_id}`}
                evento={e}
                aoAbrirCompromisso={aoAbrirCompromisso}
                aoArrastar={aoArrastar}
                aoConcluir={aoConcluir}
                arrastando={arrastandoId === e.origem_id}
              />
            ))}
          </div>
        )}

        {comHora.length > 0 && (
          <div className="relative">
            {faixa.map((h) => {
              const doBloco = comHora.filter((e) => horaDe(e) === h);
              const agoraNestaHora = ehHoje && horaAgora === h;
              return (
                <div key={h} className="relative flex gap-3 border-t border-[var(--ag-line-h)] py-2 first:border-t-0">
                  <span className="w-12 shrink-0 pt-1 text-[12px] font-medium tabular-nums text-[var(--ag-text-4)]">
                    {String(h).padStart(2, "0")}:00
                  </span>
                  <div className="min-w-0 flex-1 space-y-2 lg:max-w-2xl">
                    {doBloco.length === 0 ? (
                      <div className="h-3" />
                    ) : (
                      doBloco.map((e) => (
                        <CartaoEvento
                          key={`${e.tipo}-${e.origem_id}`}
                          evento={e}
                          hora={String(e.subtitulo || "").slice(0, 5)}
                          aoAbrirCompromisso={aoAbrirCompromisso}
                          aoArrastar={aoArrastar}
                          aoConcluir={aoConcluir}
                          arrastando={arrastandoId === e.origem_id}
                        />
                      ))
                    )}
                  </div>

                  {/* Marcador do agora, so no dia de hoje. */}
                  {agoraNestaHora && (
                    <div
                      aria-hidden
                      className="pointer-events-none absolute left-12 right-0 z-10 flex items-center"
                      style={{ top: `${(minutoAgora / 60) * 100}%`, transform: "translateY(-50%)" }}
                    >
                      <span className="rounded-full bg-[#6C3CF0] px-[9px] py-[4px] text-[11px] font-semibold text-white shadow-sm">
                        {String(horaAgora).padStart(2, "0")}:{String(minutoAgora).padStart(2, "0")}
                      </span>
                      <span className="h-0 flex-1 border-t border-dashed" style={{ borderColor: "rgba(108,60,240,0.55)" }} />
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}