import { useState, useEffect } from 'react';
import { useApi } from './useApi';
import { useLoader } from '../context/loaders/useLoader';
import { useToast } from '../context/toasts/useToast';
import { BoardWithDetails } from '../types/kanban';

export function useBoard(boardId: number) {
  const [board, setBoard] = useState<BoardWithDetails | null>(null);
  const [error, setError] = useState<Error | null>(null);

  const { getBoard } = useApi();
  const { withLoader } = useLoader();
  const { addNotification } = useToast();

  const fetchBoard = async () => {
    try {
      setError(null);
      const data = await withLoader(() => getBoard(boardId), 'Loading board...');
      setBoard(data);
      return data;
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Failed to load board';
      setError(err instanceof Error ? err : new Error(errorMessage));
      addNotification({
        type: 'error',
        title: 'Error Loading Board',
        message: errorMessage,
        duration: 5000,
      });
      return null;
    }
  };

  const updateBoardData = (updatedBoard: BoardWithDetails) => {
    setBoard(updatedBoard);
  };

  useEffect(() => {
    fetchBoard();
  }, [boardId]);

  return {
    board,
    error, // For debugging, not for UI display
    loading: false, // Loading is handled by global loader
    fetchBoard,
    updateBoardData,
  };
}