'use client';

import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
import { formatTime, type TimeMode, type TimeStyle } from './format';

interface TimeCtx {
  mode: TimeMode;
  setMode: (m: TimeMode) => void;
  format: (ts: string | number | Date | null | undefined, style?: TimeStyle) => string;
}

const Ctx = createContext<TimeCtx>({ mode: 'utc', setMode: () => {}, format: (ts, style) => formatTime(ts, 'utc', style) });
const KEY = 'ip.time-mode';

export function TimeProvider({ children }: { children: ReactNode }) {
  // UTC on the server and on first paint; the stored preference is applied after hydration (no mismatch).
  const [mode, setModeState] = useState<TimeMode>('utc');
  useEffect(() => {
    try {
      const v = window.localStorage.getItem(KEY);
      if (v === 'local' || v === 'utc') setModeState(v);
    } catch {
      /* private mode */
    }
  }, []);
  const setMode = useCallback((m: TimeMode) => {
    setModeState(m);
    try {
      window.localStorage.setItem(KEY, m);
    } catch {
      /* ignore */
    }
  }, []);
  const value = useMemo<TimeCtx>(() => ({ mode, setMode, format: (ts, style) => formatTime(ts, mode, style) }), [mode, setMode]);
  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
}

export function useTime() {
  return useContext(Ctx);
}

/** Inline timestamp that follows the UTC/local toggle. */
export function Time({ ts, style = 'short', className }: { ts: string | number | Date | null | undefined; style?: TimeStyle; className?: string }) {
  const { format } = useTime();
  return (
    <time dateTime={ts ? new Date(ts).toISOString() : undefined} className={className} suppressHydrationWarning>
      {format(ts, style)}
    </time>
  );
}