"use client";
import { useState, useEffect } from 'react';
import { aboutService, AboutPageData, AboutBanner, AboutService, AboutProcess, AboutJourney } from '../api/aboutService';

interface UseAboutReturn {
  data: AboutPageData | null;
  loading: boolean;
  error: string | null;
  refetch: () => Promise<void>;
}

interface UseAboutBannerReturn {
  data: AboutBanner[] | null;
  loading: boolean;
  error: string | null;
  refetch: () => Promise<void>;
}

interface UseAboutServiceReturn {
  data: AboutService[] | null;
  loading: boolean;
  error: string | null;
  refetch: () => Promise<void>;
}

interface UseAboutProcessReturn {
  data: AboutProcess[] | null;
  loading: boolean;
  error: string | null;
  refetch: () => Promise<void>;
}

interface UseAboutJourneyReturn {
  data: AboutJourney[] | null;
  loading: boolean;
  error: string | null;
  refetch: () => Promise<void>;
}

/**
 * Hook to fetch all about page data
 */
export const useAbout = (): UseAboutReturn => {
  const [data, setData] = useState<AboutPageData | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await aboutService.getAboutPageData();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

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

  return {
    data,
    loading,
    error,
    refetch: fetchData,
  };
};

/**
 * Hook to fetch about banners
 */
export const useAboutBanners = (): UseAboutBannerReturn => {
  const [data, setData] = useState<AboutBanner[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await aboutService.getBanners();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

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

  return {
    data,
    loading,
    error,
    refetch: fetchData,
  };
};

/**
 * Hook to fetch about services
 */
export const useAboutServices = (): UseAboutServiceReturn => {
  const [data, setData] = useState<AboutService[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await aboutService.getServices();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

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

  return {
    data,
    loading,
    error,
    refetch: fetchData,
  };
};

/**
 * Hook to fetch about processes
 */
export const useAboutProcesses = (): UseAboutProcessReturn => {
  const [data, setData] = useState<AboutProcess[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await aboutService.getProcesses();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

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

  return {
    data,
    loading,
    error,
    refetch: fetchData,
  };
};

/**
 * Hook to fetch about journeys
 */
export const useAboutJourneys = (): UseAboutJourneyReturn => {
  const [data, setData] = useState<AboutJourney[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await aboutService.getJourneys();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

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

  return {
    data,
    loading,
    error,
    refetch: fetchData,
  };
};