import { InsightMetricCard } from "@/components/insights/InsightMetricCard";
import { useInsight } from "@/hooks/useInsights.queries";
import { Colors } from "@/constants/theme";

export const DailySleepWidget = () => {
  const { data: insight, isLoading } = useInsight("DAILY_SLEEP");

  const metadata = insight?.metadata;
  const diffMinutes = metadata?.diffMinutes ?? null;

  return (
    <InsightMetricCard
      icon="moon"
      title="Sono"
      iconColor={Colors.light.accentDarkPurple}
      iconBackground={Colors.light.accentPurple}
      isLoading={isLoading}
      emptyMessage="Não há dados disponíveis para o dia de hoje"
      value={
        metadata?.totalHours != null
          ? formatHours(metadata.totalHours)
          : undefined
      }
      windowLabel={metadata?.windowLabel}
      detail={metadata?.napStr || undefined}
      comparison={metadata?.diffStr || null}
      comparisonColor={
        diffMinutes != null && diffMinutes < 0
          ? Colors.light.danger
          : Colors.light.tint
      }
    />
  );
};

// A single record is capped at 15h, but a day sums them, so guard the display
const MAX_SLEEP_HOURS = 24;

function formatHours(hours: number): string {
  if (hours >= MAX_SLEEP_HOURS) return `${MAX_SLEEP_HOURS}h+`;

  const minutes = Math.round(hours * 60);
  const h = Math.floor(minutes / 60);

  if (minutes % 60 === 0) return `${h}h`;

  return `${h}h ${minutes % 60}min`;
}