"use client";

import { useEffect, useState } from "react";
import { getSupabaseClient } from "@/lib/supabase";

type Carga = { entregas: number; media: number; situacao: string };

/**
 * Quanto o dia ja esta carregado, mostrado na hora de prometer o prazo.
 *
 * O lugar importa mais que o aviso: dentro do orcamento, antes da data virar
 * promessa. Depois de fechado com o cliente, saber que a quinta esta cheia
 * nao serve para nada.
 *
 * Nao bloqueia nem obriga. A pessoa que atende sabe de coisas que o sistema
 * nao sabe — o pedido pode ser pequeno, o cliente pode ser o principal.
 */
export default function CargaDoDia({ data }: { data: string }) {
  const [carga, setCarga] = useState<Carga | null>(null);

  useEffect(() => {
    if (!data || !/^\d{4}-\d{2}-\d{2}$/.test(data)) {
      setCarga(null);
      return;
    }
    let ativo = true;
    (async () => {
      try {
        const supabase = getSupabaseClient();
        const { data: linhas } = await supabase.rpc("get_carga_do_dia", { p_data: data });
        const linha = Array.isArray(linhas) ? linhas[0] : null;
        if (ativo) setCarga(linha ? (linha as Carga) : null);
      } catch {
        if (ativo) setCarga(null);
      }
    })();
    return () => {
      ativo = false;
    };
  }, [data]);

  /* Sem historico o aviso nao aparece: empresa nova levaria alerta de lotacao
     no primeiro pedido do dia. */
  if (!carga || carga.situacao === "sem_referencia") return null;

  const texto =
    carga.entregas === 0
      ? "Nenhuma entrega marcada para esse dia."
      : `${carga.entregas} ${carga.entregas === 1 ? "entrega já marcada" : "entregas já marcadas"} · média da casa: ${carga.media} por dia`;

  const tom =
    carga.situacao === "cheio"
      ? "bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300"
      : carga.situacao === "ocupado"
        ? "bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300"
        : "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300";

  const rotulo =
    carga.situacao === "cheio" ? "Dia cheio" : carga.situacao === "ocupado" ? "Dia ocupado" : "Dia tranquilo";

  return (
    <p className={`mt-1.5 rounded-lg px-2.5 py-1.5 text-[11px] font-semibold ${tom}`}>
      <strong className="font-black">{rotulo}.</strong> {texto}
    </p>
  );
}