import { useState, useEffect } from 'react';
import caseStudyService, {
  CaseStudy,
  CaseStudyCategory,
  Client,
  CaseStudyListResponse,
} from '../api/caseStudyService';

// Hook to fetch all case studies
export const useCaseStudies = (params?: {
  category?: string;
  client?: string;
  search?: string;
  featured?: boolean;
  ordering?: string;
  page?: number;
  page_size?: number;
}) => {
  const [caseStudies, setCaseStudies] = useState<CaseStudy[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  const [pagination, setPagination] = useState<{
    count: number;
    next: string | null;
    previous: string | null;
  } | null>(null);

  useEffect(() => {
    const fetchCaseStudies = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getCaseStudies(params);
        setCaseStudies(data.results);
        setPagination({
          count: data.count,
          next: data.next,
          previous: data.previous,
        });
      } catch (err) {
        setError(err as Error);
        console.error('Error fetching case studies:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchCaseStudies();
  }, [
    params?.category,
    params?.client,
    params?.search,
    params?.featured,
    params?.ordering,
    params?.page,
    params?.page_size,
  ]);

  return { caseStudies, loading, error, pagination };
};

// Hook to fetch a single case study by slug
export const useCaseStudy = (slug: string | null) => {
  const [caseStudy, setCaseStudy] = useState<CaseStudy | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!slug) {
      setLoading(false);
      return;
    }

    const fetchCaseStudy = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getCaseStudyBySlug(slug);
        setCaseStudy(data);
      } catch (err) {
        setError(err as Error);
        console.error(`Error fetching case study ${slug}:`, err);
      } finally {
        setLoading(false);
      }
    };

    fetchCaseStudy();
  }, [slug]);

  return { caseStudy, loading, error };
};

// Hook to fetch featured case studies
export const useFeaturedCaseStudies = () => {
  const [featuredCaseStudies, setFeaturedCaseStudies] = useState<CaseStudy[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchFeaturedCaseStudies = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getFeaturedCaseStudies();
        setFeaturedCaseStudies(data);
      } catch (err) {
        setError(err as Error);
        console.error('Error fetching featured case studies:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchFeaturedCaseStudies();
  }, []);

  return { featuredCaseStudies, loading, error };
};

// Hook to fetch latest case studies
export const useLatestCaseStudies = (limit: number = 6) => {
  const [latestCaseStudies, setLatestCaseStudies] = useState<CaseStudy[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchLatestCaseStudies = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getLatestCaseStudies(limit);
        setLatestCaseStudies(data);
      } catch (err) {
        setError(err as Error);
        console.error('Error fetching latest case studies:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchLatestCaseStudies();
  }, [limit]);

  return { latestCaseStudies, loading, error };
};

// Hook to fetch popular case studies
export const usePopularCaseStudies = (limit: number = 6) => {
  const [popularCaseStudies, setPopularCaseStudies] = useState<CaseStudy[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchPopularCaseStudies = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getPopularCaseStudies(limit);
        setPopularCaseStudies(data);
      } catch (err) {
        setError(err as Error);
        console.error('Error fetching popular case studies:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchPopularCaseStudies();
  }, [limit]);

  return { popularCaseStudies, loading, error };
};

// Hook to fetch related case studies
export const useRelatedCaseStudies = (slug: string | null) => {
  const [relatedCaseStudies, setRelatedCaseStudies] = useState<CaseStudy[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!slug) {
      setLoading(false);
      return;
    }

    const fetchRelatedCaseStudies = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getRelatedCaseStudies(slug);
        setRelatedCaseStudies(data);
      } catch (err) {
        setError(err as Error);
        console.error(`Error fetching related case studies for ${slug}:`, err);
      } finally {
        setLoading(false);
      }
    };

    fetchRelatedCaseStudies();
  }, [slug]);

  return { relatedCaseStudies, loading, error };
};

// Hook to fetch case study categories
export const useCaseStudyCategories = () => {
  const [categories, setCategories] = useState<CaseStudyCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getCategories();
        setCategories(data);
      } catch (err) {
        setError(err as Error);
        console.error('Error fetching case study categories:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchCategories();
  }, []);

  return { categories, loading, error };
};

// Hook to fetch categories with case studies
export const useCategoriesWithCaseStudies = () => {
  const [categories, setCategories] = useState<CaseStudyCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getCategoriesWithCaseStudies();
        setCategories(data);
      } catch (err) {
        setError(err as Error);
        console.error('Error fetching categories with case studies:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchCategories();
  }, []);

  return { categories, loading, error };
};

// Hook to fetch all clients
export const useClients = () => {
  const [clients, setClients] = useState<Client[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchClients = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getClients();
        setClients(data);
      } catch (err) {
        setError(err as Error);
        console.error('Error fetching clients:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchClients();
  }, []);

  return { clients, loading, error };
};

// Hook to fetch a single client by slug
export const useClient = (slug: string | null) => {
  const [client, setClient] = useState<Client | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!slug) {
      setLoading(false);
      return;
    }

    const fetchClient = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getClientBySlug(slug);
        setClient(data);
      } catch (err) {
        setError(err as Error);
        console.error(`Error fetching client ${slug}:`, err);
      } finally {
        setLoading(false);
      }
    };

    fetchClient();
  }, [slug]);

  return { client, loading, error };
};

// Hook to fetch case studies for a specific client
export const useClientCaseStudies = (slug: string | null) => {
  const [caseStudies, setCaseStudies] = useState<CaseStudy[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!slug) {
      setLoading(false);
      return;
    }

    const fetchClientCaseStudies = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await caseStudyService.getClientCaseStudies(slug);
        setCaseStudies(data.results);
      } catch (err) {
        setError(err as Error);
        console.error(`Error fetching case studies for client ${slug}:`, err);
      } finally {
        setLoading(false);
      }
    };

    fetchClientCaseStudies();
  }, [slug]);

  return { caseStudies, loading, error };
};