/**
 * Scheduler - Main wrapper component that renders appropriate scheduler view
 * Refactored to avoid conditional hooks issue
 */

import React from 'react';
import { useOutletContext } from 'react-router-dom';
import { User, Business } from '../types';
import { useAppointments, useUpdateAppointment, useDeleteAppointment } from '../hooks/useAppointments';
import { useResources } from '../hooks/useResources';
import { useServices } from '../hooks/useServices';
import ResourceScheduler from './ResourceScheduler';
import OwnerScheduler from './OwnerScheduler';

const Scheduler: React.FC = () => {
  const { user, business } = useOutletContext<{ user: User, business: Business }>();

  // Fetch data from API (shared across both views)
  const { data: appointments = [], isLoading: appointmentsLoading } = useAppointments();
  const { data: resources = [], isLoading: resourcesLoading } = useResources();
  const { data: services = [], isLoading: servicesLoading } = useServices();

  // Show loading state
  if (appointmentsLoading || resourcesLoading || servicesLoading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="text-gray-500 dark:text-gray-400">Loading scheduler...</div>
      </div>
    );
  }

  // Render appropriate scheduler based on user role
  if (user.role === 'resource') {
    return <ResourceScheduler user={user} business={business} />;
  }

  // Owner, manager, staff get horizontal timeline view
  return <OwnerScheduler user={user} business={business} />;
};

export default Scheduler;