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

const ENERGY_SCALE_MAX = 10;

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

  const metadata = insight?.metadata;
  const avgEnergy = metadata?.avgEnergy;
  const diffEnergy = metadata?.diffEnergy ?? null;

  return (
    <InsightMetricCard
      icon="flash"
      title="Energia"
      isLoading={isLoading}
      emptyMessage="Não há dados disponíveis para o dia de hoje"
      value={avgEnergy != null ? formatEnergy(avgEnergy) : undefined}
      windowLabel={metadata?.windowLabel}
      barRatio={
        avgEnergy != null
          ? Math.max(0, Math.min(1, avgEnergy / ENERGY_SCALE_MAX))
          : undefined
      }
      comparison={formatEnergyDiff(diffEnergy)}
      comparisonColor={energyDiffColor(diffEnergy)}
    />
  );
};

function formatEnergy(value: number): string {
  return value.toFixed(1).replace(".", ",");
}

// Positive means more energy than yesterday; nothing to compare reads null
function formatEnergyDiff(diff: number | null): string | null {
  if (diff == null) return null;

  const sign = diff > 0 ? "+" : diff < 0 ? "-" : "";

  return `${sign}${Math.abs(diff).toFixed(1).replace(".", ",")} que ontem`;
}

function energyDiffColor(diff: number | null): string {
  if (diff == null || diff === 0) return Colors.light.textSecondary;

  return diff > 0 ? Colors.light.tint : Colors.light.danger;
}