import { useEffect, useState } from 'react';

export type TimeOfDay = 'dawn' | 'day' | 'dusk' | 'night';

export interface TimeOfDayPalette {
  background: string;
  contentTint: string;
}

const PALETTES: Record<TimeOfDay, TimeOfDayPalette> = {
  dawn:  { background: '#fff6ec', contentTint: 'rgba(255, 196, 138, 0.05)' },
  day:   { background: '#f7f8fa', contentTint: 'rgba(255, 255, 255, 0)' },
  dusk:  { background: '#fff0e6', contentTint: 'rgba(255, 138, 92, 0.06)' },
  night: { background: '#101728', contentTint: 'rgba(124, 138, 255, 0.04)' },
};

export function getTimeOfDay(date: Date = new Date()): TimeOfDay {
  const h = date.getHours();
  if (h >= 5 && h < 9) return 'dawn';
  if (h >= 9 && h < 17) return 'day';
  if (h >= 17 && h < 20) return 'dusk';
  return 'night';
}

export function getPalette(tod: TimeOfDay): TimeOfDayPalette {
  return PALETTES[tod];
}

const TICK_MS = 5 * 60 * 1000;

export function useTimeOfDay(): TimeOfDay {
  const [tod, setTod] = useState<TimeOfDay>(() => getTimeOfDay());
  useEffect(() => {
    const id = window.setInterval(() => {
      setTod((prev) => {
        const next = getTimeOfDay();
        return next === prev ? prev : next;
      });
    }, TICK_MS);
    return () => window.clearInterval(id);
  }, []);
  return tod;
}
