'use client';
import React, { createContext, useContext, useState, useEffect } from 'react';
import Image from 'next/image';
import type { ReactNode } from 'react';
import type { Session } from '@supabase/supabase-js';
import { createClient } from '@/utils/supabase/client';

interface TVModeContextProps {
  tvMode: boolean;
  toggleTVMode: () => void;
}

const TVModeContext = createContext<TVModeContextProps | undefined>(undefined);

export const TVModeProvider = ({ children }: { children: ReactNode }) => {
  const [tvMode, setTVMode] = useState(false);

  const toggleTVMode = () => {
    setTVMode((prev) => !prev);
  };

  return (
    <TVModeContext.Provider value={{ tvMode, toggleTVMode }}>
      {children}
    </TVModeContext.Provider>
  );
};

export const useTVMode = () => {
  const context = useContext(TVModeContext);
  if (!context) {
    throw new Error('useTVMode must be used within a TVModeProvider');
  }
  return context;
};

export const TVToggle = () => {
  const { tvMode, toggleTVMode } = useTVMode();
  const supabase = createClient();
  const [session, setSession] = useState<Session | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Function to fetch the session
    async function fetchSession() {
      try {
        const {
          data: { session },
        } = await supabase.auth.getSession();
        setSession(session);
      } catch (error) {
        console.error('Error fetching session:', error);
      } finally {
        setLoading(false);
      }
    }

    // Call the function
    fetchSession().catch((error) => {
      console.error('Error fetching session:', error);
    });

    // Set up auth state change listener
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    // Clean up the subscription when component unmounts
    return () => {
      subscription.unsubscribe();
    };
  }, [supabase]);

  if (loading || !session) return <div />;

  return (
    <button onClick={toggleTVMode} className='mr-4 mt-1'>
      {tvMode ? (
        <Image
          src='/images/exit_fullscreen.svg'
          alt='Exit TV Mode'
          width={25}
          height={25}
        />
      ) : (
        <Image
          src='/images/fullscreen.svg'
          alt='Enter TV Mode'
          width={25}
          height={25}
        />
      )}
    </button>
  );
};