import { useState, useEffect } from 'react';
import { api } from '../services/api';
import type { Department, SubDepartment } from '../types';

export const useDepartments = () => {
  const [departments, setDepartments] = useState<Department[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchDepartments = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await api.getDepartments();
      setDepartments(data);
    } catch (err: any) {
      setError(err.message || 'Failed to fetch departments');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDepartments();
  }, []);

  return {
    departments,
    loading,
    error,
    refresh: fetchDepartments,
  };
};

export const useSubDepartments = (departmentId?: string) => {
  const [subDepartments, setSubDepartments] = useState<SubDepartment[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchSubDepartments = async () => {
    if (!departmentId) {
      setSubDepartments([]);
      return;
    }

    setLoading(true);
    setError(null);
    try {
      const data = await api.getSubDepartments(parseInt(departmentId));
      setSubDepartments(data);
    } catch (err: any) {
      setError(err.message || 'Failed to fetch subdepartments');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchSubDepartments();
  }, [departmentId]);

  return {
    subDepartments,
    loading,
    error,
    refresh: fetchSubDepartments,
  };
};