"use client";

import { useEffect, useMemo, useState } from "react";
import { Timer } from "lucide-react";

/*
  O aviso de corte de produção.

  Responde antes de o cliente perguntar: "se eu fechar agora, sai hoje?". A
  loja grava a hora limite; aqui a conta é feita no relógio de quem está
  olhando, e o tempo que falta desce sozinho.

  Depois da hora, ou no fim de semana, o texto muda para o próximo dia útil —
  prometer "hoje" às onze da noite de sábado seria mentira com relógio.
*/

function proximoDiaUtil(data: Date) {
  const d = new Date(data);
  do {
    d.setDate(d.getDate() + 1);
  } while (d.getDay() === 0 || d.getDay() === 6);
  return d;
}

export function VendorCorteDeProducao({ horaLimite }: { horaLimite: string }) {
  const [agora, setAgora] = useState<Date | null>(null);

  /* O relógio só começa no cliente: renderizar hora no servidor daria um
     número velho e um salto assim que a página assume. O primeiro valor vem
     do próprio intervalo, sem `setState` solto dentro do efeito. */
  useEffect(() => {
    const marcar = () => setAgora(new Date());
    const primeiro = window.setTimeout(marcar, 0);
    const relogio = window.setInterval(marcar, 30000);
    return () => {
      window.clearTimeout(primeiro);
      window.clearInterval(relogio);
    };
  }, []);

  const conta = useMemo(() => {
    if (!agora) return null;
    const [h, m] = String(horaLimite || "")
      .split(":")
      .map((parte) => Number(parte));
    if (!Number.isFinite(h) || h < 0 || h > 23) return null;

    const limite = new Date(agora);
    limite.setHours(h, Number.isFinite(m) ? m : 0, 0, 0);

    const fimDeSemana = agora.getDay() === 0 || agora.getDay() === 6;
    const passou = agora.getTime() >= limite.getTime();

    if (fimDeSemana || passou) {
      const dia = proximoDiaUtil(agora);
      return {
        hoje: false,
        quando: dia.toLocaleDateString("pt-BR", { weekday: "long" }),
        falta: null as string | null,
      };
    }

    const minutos = Math.max(0, Math.round((limite.getTime() - agora.getTime()) / 60000));
    const horas = Math.floor(minutos / 60);
    return {
      hoje: true,
      quando: null,
      falta: horas > 0 ? `em ${horas}h ${minutos % 60}min` : `em ${minutos}min`,
    };
  }, [agora, horaLimite]);

  if (!conta) return null;

  return (
    <div
      className="inline-flex w-full items-stretch overflow-hidden border bg-[var(--vd-surface)] text-[10px] leading-tight sm:w-auto"
      style={{ borderRadius: "var(--vd-radius-md)", borderColor: "var(--vd-border)" }}
    >
      <div className="flex shrink-0 items-center px-2" style={{ color: "var(--vd-primary)" }}>
        <Timer className="h-4 w-4" />
      </div>

      <div className="min-w-0 flex-1 py-1 pr-2">
        <p className="text-[10px] leading-tight text-[var(--vd-muted-fg)]">Este item entra em</p>
        <p className="text-[12px] font-bold uppercase leading-tight tracking-tight">
          {conta.hoje ? "Produção hoje*" : `Produção ${conta.quando}*`}
        </p>
        <p className="text-[10px] leading-tight text-[var(--vd-muted-fg)]">
          {conta.hoje ? "se finalizado até" : "próximo dia útil"}
        </p>
      </div>

      <div
        className="flex shrink-0 flex-col items-center justify-center px-2.5"
        style={{ backgroundColor: "var(--vd-primary)", color: "var(--vd-primary-fg)" }}
      >
        <span className="text-sm font-bold leading-none tabular-nums">{horaLimite}</span>
        {conta.falta ? <span className="mt-0.5 text-[9px] opacity-90">{conta.falta}</span> : null}
      </div>
    </div>
  );
}