"use client";

import Link from "next/link";
import { Check, Clock } from "lucide-react";
import { DicaEvento, useDica } from "./dica";
import { estiloSituacao, type EventoAgenda } from "./tipos";

/**
 * Cartao de evento.
 *
 * Cartao branco com borda fina e sombra leve, mais uma barra de cor na
 * lateral — a barra da a leitura de longe (qual categoria), o branco deixa o
 * texto sempre legivel em qualquer cor de categoria. Pintar o cartao inteiro
 * na cor forte deixaria a agenda ilegivel num dia cheio.
 *
 * Compromisso proprio abre para edicao; prazo espelhado leva ao registro de
 * origem, que e onde ele pode ser mudado de verdade.
 */
export default function CartaoEvento({
  evento,
  hora,
  aoAbrirCompromisso,
  aoArrastar,
  aoConcluir,
  arrastando,
  compacto = false,
}: {
  evento: EventoAgenda;
  hora?: string | null;
  aoAbrirCompromisso?: (id: string) => void;
  aoArrastar?: (e: React.PointerEvent, evento: EventoAgenda) => void;
  aoConcluir?: (evento: EventoAgenda) => void;
  arrastando?: boolean;
  compacto?: boolean;
}) {
  const cor = evento.categoria_cor;
  const situacao = estiloSituacao(evento.situacao);
  const { dicaProps, camada, fecharDica } = useDica();
  const movel = Boolean(aoArrastar) && (evento.tipo === "compromisso" || evento.tipo === "pedido_entrega");

  /* O subtitulo vem do banco como "HH:MM · Cliente" ou "HH:MM–HH:MM · Cliente".
     Quando a hora ja esta na pilula, repetir aqui e ruido — sobra so o
     cliente, e sobrando nada, some. */
  const complemento = (() => {
    const bruto = String(evento.subtitulo || "").trim();
    if (!bruto) return "";
    const semHora = bruto.replace(/^\d{2}:\d{2}(–\d{2}:\d{2})?\s*(·\s*)?/, "").trim();
    return hora ? semHora : bruto;
  })();

  const conteudo = (
    <>
      <span aria-hidden className="absolute bottom-2 left-0 top-2 w-[3px] rounded-full" style={{ background: cor }} />
      <span className="flex min-w-0 flex-1 flex-col gap-[3px]">
        <span className="flex items-center gap-2">
          {hora && (
            <span
              className="flex shrink-0 items-center gap-1 rounded-[6px] px-[7px] py-[3px] text-[11px] font-semibold tabular-nums text-white"
              style={{ background: cor }}
            >
              <Clock className="h-[11px] w-[11px]" />
              {hora}
            </span>
          )}
          <span className="min-w-0 flex-1 truncate text-[12px] font-semibold leading-[1.25] text-[var(--ag-text)]">
            {evento.titulo}
          </span>
          {!compacto && situacao.texto && (
            <span
              className="ml-auto hidden h-[20px] shrink-0 items-center rounded-full px-[7px] text-[10px] font-medium sm:flex"
              style={{ background: situacao.fundo, color: situacao.cor }}
            >
              {situacao.texto}
            </span>
          )}
        </span>
        {complemento ? (
          <span className="truncate text-[11px] font-normal text-[var(--ag-text-3)]">{complemento}</span>
        ) : null}
      </span>
    </>
  );

  /* Quando ha botao de concluir, o cartao reserva o espaco dele a direita.
     Sem isso o botao deita em cima do titulo — no celular, onde ele fica
     sempre visivel, o nome do compromisso sumia atras. */
  const temAcao = evento.tipo === "compromisso" && Boolean(aoConcluir);

  const base = `group relative flex min-h-[52px] items-center gap-2 overflow-hidden rounded-[11px] border border-[var(--ag-border)] bg-[var(--ag-surface)] py-2.5 pl-[14px] text-left shadow-[var(--ag-sombra-2)] transition-[transform,box-shadow,border-color] duration-150 ease-out hover:-translate-y-px hover:border-[rgba(108,60,240,0.28)] hover:shadow-[var(--ag-sombra-4)] ${
    temAcao ? "pr-14 sm:pr-2.5 sm:group-hover:pr-14" : "pr-2.5"
  } ${arrastando ? "opacity-40" : ""} ${movel ? "touch-none cursor-grab active:cursor-grabbing" : ""}`;

  return (
    <div className="relative">
      {evento.tipo === "compromisso" && aoAbrirCompromisso ? (
        <button
          type="button"
          onClick={() => aoAbrirCompromisso(evento.origem_id)}
          {...dicaProps(<DicaEvento evento={evento} />)}
          onPointerDown={
            movel
              ? (e) => {
                  fecharDica();
                  aoArrastar!(e, evento);
                }
              : fecharDica
          }
          className={`${base} w-full`}
        >
          {conteudo}
        </button>
      ) : (
        <Link
          href={evento.rota}
          {...dicaProps(<DicaEvento evento={evento} />)}
          onPointerDown={
            movel
              ? (e) => {
                  fecharDica();
                  aoArrastar!(e, evento);
                }
              : fecharDica
          }
          className={base}
        >
          {conteudo}
        </Link>
      )}
      {camada}

      {evento.tipo === "compromisso" && aoConcluir && (
        <button
          type="button"
          onClick={() => aoConcluir(evento)}
          aria-label="Concluir compromisso"
          title="Concluir"
          /* Sempre visivel no celular: no toque nao existe passar o mouse, e o
             botao ficaria inalcançavel. No computador ele aparece ao
             aproximar, para nao poluir a lista. */
          className="absolute right-2 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-xl bg-[var(--ag-surface)] text-emerald-600 opacity-100 shadow-[var(--ag-sombra-3)] transition-opacity hover:bg-emerald-50 focus-visible:opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
        >
          <Check className="h-4 w-4" />
        </button>
      )}
    </div>
  );
}