import { useState, useCallback } from 'react';
import apiClient, { ApiClientError } from '@/lib/api-client';

/**
 * API Hook 返回类型
 */
export interface UseApiReturn<T = any> {
  /** 加载状态 */
  loading: boolean;
  /** 错误对象 */
  error: ApiClientError | null;
  /** 执行请求 */
  request: (
    method: 'get' | 'post' | 'put' | 'patch' | 'delete',
    url: string,
    data?: any,
  ) => Promise<T | null>;
  /** GET 请求 */
  get: (url: string) => Promise<T | null>;
  /** POST 请求 */
  post: (url: string, data?: any) => Promise<T | null>;
  /** PUT 请求 */
  put: (url: string, data?: any) => Promise<T | null>;
  /** PATCH 请求 */
  patch: (url: string, data?: any) => Promise<T | null>;
  /** DELETE 请求 */
  del: (url: string) => Promise<T | null>;
  /** 重置错误状态 */
  clearError: () => void;
}

/**
 * API 请求 Hook
 * 
 * 提供统一的 API 调用接口，自动管理 loading 和 error 状态
 * 
 * @example
 * ```typescript
 * function UserProfile({ userId }) {
 *   const { loading, error, get } = useApi<User>();
 *   const [user, setUser] = useState<User | null>(null);
 * 
 *   useEffect(() => {
 *     get(`/users/${userId}`).then(setUser);
 *   }, [userId]);
 * 
 *   if (loading) return <div>加载中...</div>;
 *   if (error) return <div>错误: {error.message}</div>;
 *   return <div>{user?.username}</div>;
 * }
 * ```
 * 
 * @example
 * ```typescript
 * function CreateUserForm() {
 *   const { loading, error, post } = useApi<User>();
 * 
 *   const handleSubmit = async (data: CreateUserDto) => {
 *     const user = await post('/users', data);
 *     if (user) {
 *       alert('创建成功');
 *     } else if (error) {
 *       if (error.isValidationError()) {
 *         const fieldErrors = error.getAllFieldErrors();
 *         console.log('Validation errors:', fieldErrors);
 *       }
 *     }
 *   };
 * 
 *   return <form onSubmit={handleSubmit}>...</form>;
 * }
 * ```
 */
export function useApi<T = any>(): UseApiReturn<T> {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<ApiClientError | null>(null);

  /**
   * 执行请求
   */
  const request = useCallback(
    async (
      method: 'get' | 'post' | 'put' | 'patch' | 'delete',
      url: string,
      data?: any,
    ): Promise<T | null> => {
      setLoading(true);
      setError(null);

      try {
        let response: T;
        
        if (method === 'get' || method === 'delete') {
          response = await apiClient[method](url);
        } else {
          response = await apiClient[method](url, data);
        }
        
        return response;
      } catch (err) {
        if (err instanceof ApiClientError) {
          setError(err);
        } else {
          // 不应该发生，但为了类型安全
          console.error('Unexpected error:', err);
        }
        return null;
      } finally {
        setLoading(false);
      }
    },
    [],
  );

  /**
   * GET 请求
   */
  const get = useCallback(
    (url: string) => request('get', url),
    [request],
  );

  /**
   * POST 请求
   */
  const post = useCallback(
    (url: string, data?: any) => request('post', url, data),
    [request],
  );

  /**
   * PUT 请求
   */
  const put = useCallback(
    (url: string, data?: any) => request('put', url, data),
    [request],
  );

  /**
   * PATCH 请求
   */
  const patch = useCallback(
    (url: string, data?: any) => request('patch', url, data),
    [request],
  );

  /**
   * DELETE 请求
   */
  const del = useCallback(
    (url: string) => request('delete', url),
    [request],
  );

  /**
   * 清除错误状态
   */
  const clearError = useCallback(() => {
    setError(null);
  }, []);

  return {
    loading,
    error,
    request,
    get,
    post,
    put,
    patch,
    del,
    clearError,
  };
}

/**
 * 简化版 API Hook（只提供 request 方法）
 * 
 * @example
 * ```typescript
 * function DeleteButton({ userId }) {
 *   const { loading, execute } = useApiRequest();
 * 
 *   const handleDelete = async () => {
 *     const success = await execute(async () => {
 *       await apiClient.delete(`/users/${userId}`);
 *     });
 *     
 *     if (success) {
 *       alert('删除成功');
 *     }
 *   };
 * 
 *   return <button onClick={handleDelete} disabled={loading}>删除</button>;
 * }
 * ```
 */
export function useApiRequest<T = any>() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<ApiClientError | null>(null);
  const [data, setData] = useState<T | null>(null);

  /**
   * 执行异步操作
   */
  const execute = useCallback(
    async (fn: () => Promise<T>): Promise<boolean> => {
      setLoading(true);
      setError(null);

      try {
        const result = await fn();
        setData(result);
        return true;
      } catch (err) {
        if (err instanceof ApiClientError) {
          setError(err);
        }
        return false;
      } finally {
        setLoading(false);
      }
    },
    [],
  );

  const clearError = useCallback(() => {
    setError(null);
  }, []);

  return {
    loading,
    error,
    data,
    execute,
    clearError,
  };
}

/**
 * 列表数据 Hook（支持分页）
 * 
 * @example
 * ```typescript
 * function UserList() {
 *   const { data, loading, error, loadData, page, setPage } = useApiList<User>('/users', {
 *     initialPage: 1,
 *     limit: 20,
 *   });
 * 
 *   useEffect(() => {
 *     loadData();
 *   }, [page]);
 * 
 *   if (loading) return <div>加载中...</div>;
 *   if (error) return <div>错误: {error.message}</div>;
 * 
 *   return (
 *     <div>
 *       {data?.items.map(user => <UserCard key={user.id} user={user} />)}
 *       <Pagination page={page} total={data?.totalPages || 0} onChange={setPage} />
 *     </div>
 *   );
 * }
 * ```
 */
export function useApiList<T = any>(
  baseUrl: string,
  options: {
    initialPage?: number;
    limit?: number;
    autoLoad?: boolean;
  } = {},
) {
  const { initialPage = 1, limit = 20, autoLoad = false } = options;
  
  const [page, setPage] = useState(initialPage);
  const [data, setData] = useState<{
    items: T[];
    total: number;
    page: number;
    limit: number;
    totalPages: number;
    hasNext: boolean;
    hasPrev: boolean;
  } | null>(null);
  
  const { loading, error, get, clearError } = useApi();

  /**
   * 加载数据
   */
  const loadData = useCallback(
    async (params?: Record<string, any>) => {
      const queryParams = new URLSearchParams({
        page: page.toString(),
        limit: limit.toString(),
        ...params,
      });
      
      const result = await get(`${baseUrl}?${queryParams.toString()}`);
      if (result) {
        setData(result);
      }
    },
    [baseUrl, page, limit, get],
  );

  /**
   * 刷新当前页
   */
  const refresh = useCallback(() => {
    loadData();
  }, [loadData]);

  /**
   * 跳转到第一页
   */
  const goToFirstPage = useCallback(() => {
    setPage(1);
  }, []);

  /**
   * 跳转到最后一页
   */
  const goToLastPage = useCallback(() => {
    if (data?.totalPages) {
      setPage(data.totalPages);
    }
  }, [data?.totalPages]);

  return {
    data,
    loading,
    error,
    page,
    setPage,
    loadData,
    refresh,
    goToFirstPage,
    goToLastPage,
    clearError,
  };
}