'use client';

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

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';

/** UTC on the server and on first paint; the stored preference is read after hydration through an external store. */
export function TimeProvider({ children }: { children: ReactNode }) {
  const [stored, setStored] = useStoredValue(KEY, 'utc');
  const mode: TimeMode = stored === 'local' ? 'local' : 'utc';
  const setMode = useCallback((m: TimeMode) => setStored(m), [setStored]);
  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>
  );
}