import React from 'react';
import { useQuery } from '@tanstack/react-query';

import { getEvents, type TenantEvent } from '../api';
import { useAuth } from '../auth/context';

const STORAGE_KEY = 'tenant-admin.active-event';

export interface EventContextValue {
  events: TenantEvent[];
  isLoading: boolean;
  activeEvent: TenantEvent | null;
  selectEvent: (slug: string | null) => void;
}

const EventContext = React.createContext<EventContextValue | undefined>(undefined);

export function EventProvider({ children }: { children: React.ReactNode }) {
  const { status } = useAuth();
  const [storedSlug, setStoredSlug] = React.useState<string | null>(() => {
    if (typeof window === 'undefined') {
      return null;
    }
    return window.localStorage.getItem(STORAGE_KEY);
  });

  const authReady = status === 'authenticated';

  const {
    data: fetchedEvents = [],
    isLoading: queryLoading,
  } = useQuery<TenantEvent[]>({
    queryKey: ['tenant-events'],
    queryFn: async () => {
      try {
        return await getEvents();
      } catch (error) {
        console.warn('[EventContext] Failed to fetch events', error);
        throw error;
      }
    },
    staleTime: 60 * 1000,
    cacheTime: 5 * 60 * 1000,
    enabled: authReady,
  });

  const events = authReady ? fetchedEvents : [];
  const isLoading = authReady ? queryLoading : status === 'loading';

  React.useEffect(() => {
    if (!storedSlug && events.length === 1 && events[0]?.slug && typeof window !== 'undefined') {
      setStoredSlug(events[0].slug);
      window.localStorage.setItem(STORAGE_KEY, events[0].slug);
    }
  }, [events, storedSlug]);

  const activeEvent = React.useMemo(() => {
    if (!events.length) {
      return null;
    }

    const matched = events.find((event) => event.slug && event.slug === storedSlug);
    if (matched) {
      return matched;
    }

    if (!storedSlug && events.length === 1) {
      return events[0];
    }

    return null;
  }, [events, storedSlug]);

  const selectEvent = React.useCallback((slug: string | null) => {
    setStoredSlug(slug);
    if (typeof window !== 'undefined') {
      if (slug) {
        window.localStorage.setItem(STORAGE_KEY, slug);
      } else {
        window.localStorage.removeItem(STORAGE_KEY);
      }
    }
  }, []);

  const value = React.useMemo<EventContextValue>(
    () => ({
      events,
      isLoading,
      activeEvent,
      selectEvent,
    }),
    [events, isLoading, activeEvent, selectEvent]
  );

  return <EventContext.Provider value={value}>{children}</EventContext.Provider>;
}

export function useEventContext(): EventContextValue {
  const ctx = React.useContext(EventContext);
  if (!ctx) {
    throw new Error('useEventContext must be used within an EventProvider');
  }
  return ctx;
}