import { useCallback, useState, useEffect, useRef } from 'react';
import { useQuery } from '@tanstack/react-query';
import { resolveApiBase } from '../lib/api-base';

const API_BASE = resolveApiBase();

export interface School {
  id: number;
  code: string;
  name: string;
  region: string | null;
  district: string | null;
}

export interface Commodity {
  id: number;
  code: string;
  name: string;
  unit: string | null;
}

export interface FilteredSupplier {
  id: number;
  name: string;
  code: string | null;
  region: string | null;
  phone: string | null;
  contact_person: string | null;
  commodities: string[];
}

interface FilterParams {
  schoolId?: number;
  commodityId?: number;
  commodity?: string;
  region?: string;
}

const getAuthHeaders = (): HeadersInit => {
  const headers: HeadersInit = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  };
  if (typeof window !== 'undefined') {
    const token = localStorage.getItem('gcx_fshs_token');
    if (token) headers['Authorization'] = `Bearer ${token}`;
  }
  return headers;
};

/**
 * Hook for searching schools with autocomplete
 */
export function useSchoolSearch(query: string, enabled: boolean = true) {
  return useQuery<School[]>({
    queryKey: ['schools-search', query],
    queryFn: async () => {
      // Allow searching even with empty query to show initial results
      const res = await fetch(`${API_BASE}/schools/search?q=${encodeURIComponent(query)}&limit=25`, {
        headers: getAuthHeaders(),
      });
      if (!res.ok) throw new Error('Failed to search schools');
      const data = await res.json();
      return data.data || [];
    },
    enabled: enabled,
    staleTime: 30 * 1000, // 30 seconds
  });
}

/**
 * Hook for searching commodities with autocomplete
 */
export function useCommoditySearch(query: string, enabled: boolean = true) {
  return useQuery<Commodity[]>({
    queryKey: ['commodities-search', query],
    queryFn: async () => {
      const res = await fetch(`${API_BASE}/commodities/search?q=${encodeURIComponent(query)}&limit=30`, {
        headers: getAuthHeaders(),
      });
      if (!res.ok) throw new Error('Failed to search commodities');
      const data = await res.json();
      return data.data || [];
    },
    enabled,
    staleTime: 60 * 1000, // 1 minute
  });
}

export interface RegionInfo {
  code: string;
  name: string;
  supplier_count: number;
  total_pos: number;
}

/**
 * Hook for getting list of all regions (Ghana regions from PO API)
 */
export function useRegionsList() {
  return useQuery<RegionInfo[]>({
    queryKey: ['regions-list'],
    queryFn: async () => {
      const res = await fetch(`${API_BASE}/regions/list`, {
        headers: getAuthHeaders(),
      });
      if (!res.ok) throw new Error('Failed to fetch regions');
      const data = await res.json();
      // Use the detailed regions array if available
      return data.regions || data.data?.map((r: string) => ({ code: r, name: r, supplier_count: 0, total_pos: 0 })) || [];
    },
    staleTime: 5 * 60 * 1000, // 5 minutes
  });
}

/**
 * Hook for filtering suppliers based on school, commodity, and region
 */
export function useSupplierFilter(params: FilterParams) {
  const queryString = new URLSearchParams();
  if (params.schoolId) queryString.set('school_id', String(params.schoolId));
  if (params.commodityId) queryString.set('commodity_id', String(params.commodityId));
  if (params.commodity) queryString.set('commodity', params.commodity);
  if (params.region) queryString.set('region', params.region);

  const hasFilters = !!(params.schoolId || params.commodityId || params.commodity || params.region);

  return useQuery<FilteredSupplier[]>({
    queryKey: ['suppliers-filter', params],
    queryFn: async () => {
      const res = await fetch(`${API_BASE}/suppliers/filter?${queryString.toString()}`, {
        headers: getAuthHeaders(),
      });
      if (!res.ok) throw new Error('Failed to filter suppliers');
      const data = await res.json();
      return data.data || [];
    },
    enabled: hasFilters,
    staleTime: 30 * 1000,
  });
}

/**
 * Hook for debounced input value
 */
export function useDebounce<T>(value: T, delay: number = 300): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

/**
 * Main hook for smart supplier filtering with all autocomplete features
 */
export function useSmartSupplierFilter() {
  // Input states
  const [schoolQuery, setSchoolQuery] = useState('');
  const [commodityQuery, setCommodityQuery] = useState('');
  const [regionQuery, setRegionQuery] = useState('');
  
  // Selected filter values
  const [selectedSchool, setSelectedSchool] = useState<School | null>(null);
  const [selectedCommodity, setSelectedCommodity] = useState<Commodity | null>(null);
  const [selectedRegion, setSelectedRegion] = useState<string>('');

  // Dropdown visibility
  const [showSchoolDropdown, setShowSchoolDropdown] = useState(false);
  const [showCommodityDropdown, setShowCommodityDropdown] = useState(false);
  const [showRegionDropdown, setShowRegionDropdown] = useState(false);

  // Debounced queries
  const debouncedSchoolQuery = useDebounce(schoolQuery, 300);
  const debouncedCommodityQuery = useDebounce(commodityQuery, 300);
  const debouncedRegionQuery = useDebounce(regionQuery, 200);

  // API queries - enabled when dropdown is open (load initial results on focus)
  const { data: schools = [], isLoading: schoolsLoading } = useSchoolSearch(
    debouncedSchoolQuery,
    !selectedSchool && showSchoolDropdown
  );
  
  const { data: commodities = [], isLoading: commoditiesLoading } = useCommoditySearch(
    debouncedCommodityQuery,
    !selectedCommodity && showCommodityDropdown
  );
  
  const { data: allRegions = [], isLoading: regionsLoading } = useRegionsList();

  // Filter regions based on query - now using RegionInfo objects
  const filteredRegions = allRegions.filter(r => 
    r.name.toLowerCase().includes(debouncedRegionQuery.toLowerCase()) ||
    r.code.toLowerCase().includes(debouncedRegionQuery.toLowerCase())
  );

  // Get filtered suppliers
  const { data: suppliers = [], isLoading: suppliersLoading, refetch: refetchSuppliers } = useSupplierFilter({
    schoolId: selectedSchool?.id,
    commodityId: selectedCommodity?.id,
    commodity: !selectedCommodity && commodityQuery.length >= 2 ? commodityQuery : undefined,
    region: selectedRegion || (regionQuery.length >= 2 ? regionQuery : undefined),
  });

  // Selection handlers
  const selectSchool = useCallback((school: School) => {
    setSelectedSchool(school);
    setSchoolQuery(school.name);
    setShowSchoolDropdown(false);
  }, []);

  const selectCommodity = useCallback((commodity: Commodity) => {
    setSelectedCommodity(commodity);
    setCommodityQuery(commodity.name);
    setShowCommodityDropdown(false);
  }, []);

  const selectRegion = useCallback((region: RegionInfo | string) => {
    if (typeof region === 'string') {
      setSelectedRegion(region);
      setRegionQuery(region);
    } else {
      setSelectedRegion(region.name);
      setRegionQuery(region.name);
    }
    setShowRegionDropdown(false);
  }, []);

  // Clear handlers
  const clearSchool = useCallback(() => {
    setSelectedSchool(null);
    setSchoolQuery('');
  }, []);

  const clearCommodity = useCallback(() => {
    setSelectedCommodity(null);
    setCommodityQuery('');
  }, []);

  const clearRegion = useCallback(() => {
    setSelectedRegion('');
    setRegionQuery('');
  }, []);

  const clearAll = useCallback(() => {
    clearSchool();
    clearCommodity();
    clearRegion();
  }, [clearSchool, clearCommodity, clearRegion]);

  const hasActiveFilters = !!(selectedSchool || selectedCommodity || selectedRegion || 
    commodityQuery.length >= 2 || regionQuery.length >= 2);

  return {
    // School
    schoolQuery,
    setSchoolQuery,
    selectedSchool,
    selectSchool,
    clearSchool,
    schools,
    schoolsLoading,
    showSchoolDropdown,
    setShowSchoolDropdown,

    // Commodity
    commodityQuery,
    setCommodityQuery,
    selectedCommodity,
    selectCommodity,
    clearCommodity,
    commodities,
    commoditiesLoading,
    showCommodityDropdown,
    setShowCommodityDropdown,

    // Region
    regionQuery,
    setRegionQuery,
    selectedRegion,
    selectRegion,
    clearRegion,
    filteredRegions,
    allRegions,
    regionsLoading,
    showRegionDropdown,
    setShowRegionDropdown,

    // Results
    suppliers,
    suppliersLoading,
    hasActiveFilters,
    refetchSuppliers,
    clearAll,
  };
}