// resources/assets/ts/ContactsPage/hooks/useContactManagement.ts

import { useState, useEffect, useCallback } from 'react';
import { Contact, Option } from '../types';

interface UseContactManagementReturn {
  // Data
  contacts: Contact[];
  loading: boolean;
  error: string | null;

  //  Pagination
  page: number;
  rowsPerPage: number;
  totalContacts: number;
  handlePageChange: (newPage: number) => void;
  handleRowsPerPageChange: (newRowsPerPage: number) => void;

  // Filter options
  statusFilter: Option[];
  brancheFilter: Option[];
  userFilter: Option[];
  verantwortlicherFilter: Option[];
  prioritaetFilter: Option[];
  filtersLoading: boolean;

  // Filter setters
  setStatusFilter: React.Dispatch<React.SetStateAction<Option[]>>;
  setBrancheFilter: React.Dispatch<React.SetStateAction<Option[]>>;
  setUserFilter: React.Dispatch<React.SetStateAction<Option[]>>;
  setVerantwortlicherFilter: React.Dispatch<React.SetStateAction<Option[]>>;
  setPrioritaetFilter: React.Dispatch<React.SetStateAction<Option[]>>;

  // Search
  searchTerm: string;
  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;

  // Methods
  fetchContacts: () => void;
  resetFilters: () => void;
  handleRemoveFilter: (type: 'status' | 'branche' | 'user' | 'verantwortlicher' | 'prioritaet', value?: string | number) => void;
}

export const useContactManagement = (): UseContactManagementReturn => {

  // Data
  const [contacts, setContacts] = useState<Contact[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  //  Pagination state
  const [page, setPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(25);
  const [totalContacts, setTotalContacts] = useState(0);

  // Search filter values
  const [searchTerm, setSearchTerm] = useState('');

  // Filter options
  const [statusFilter, setStatusFilter] = useState<Option[]>([]);
  const [brancheFilter, setBrancheFilter] = useState<Option[]>([]);
  const [userFilter, setUserFilter] = useState<Option[]>([]);
  const [verantwortlicherFilter, setVerantwortlicherFilter] = useState<Option[]>([]);
  const [prioritaetFilter, setPrioritaetFilter] = useState<Option[]>([]);
  const [filtersLoading, setFiltersLoading] = useState(true);

   // Reset page when search term changes, need to show correct results if searching on a different page
  useEffect(() => {
    setPage(1);
  }, [searchTerm]);

  // Reset page when any filter changes
  useEffect(() => {
    if (!filtersLoading) {
      setPage(1);
    }
  }, [statusFilter, brancheFilter, userFilter, verantwortlicherFilter, prioritaetFilter]);

  // Fetch filter options (unchanged)
  const fetchFilterOptions = async () => {
    setFiltersLoading(true);
    try {
      const response = await fetch('/contacts/filter-options', {
        headers: { Accept: 'application/json' },
        credentials: 'include',
      });

      if (!response.ok) throw new Error('Failed to load filter options');

      const data = await response.json();

      setStatusFilter(data.status || [{ label: 'Alle', value: 'all', checked: true }]);
      setBrancheFilter(data.branche || [{ label: 'Alle', value: 'all', checked: true }]);
      setUserFilter(data.user || [{ label: 'Alle', value: 'all', checked: true }]);
      setVerantwortlicherFilter(data.verantwortlicher || [{ label: 'Alle', value: 'all', checked: true }]);
      setPrioritaetFilter(data.prioritaet || [{ label: 'Alle', value: 'all', checked: true }]);
    } catch (err) {
      console.error('Error loading filter options:', err);
      setStatusFilter([{ label: 'Alle', value: 'all', checked: true }]);
      setBrancheFilter([{ label: 'Alle', value: 'all', checked: true }]);
      setUserFilter([{ label: 'Alle', value: 'all', checked: true }]);
      setVerantwortlicherFilter([{ label: 'Alle', value: 'all', checked: true }]);
      setPrioritaetFilter([{ label: 'Alle', value: 'all', checked: true }]);
    } finally {
      setFiltersLoading(false);
    }
  };

  // Build query params with pagination
  const buildQueryParams = () => {
    if (!statusFilter.length || !brancheFilter.length || !userFilter.length) {
      return '';
    }

    const selectedStatuses = statusFilter.filter(opt => opt.checked && opt.value !== 'all').map(opt => opt.value);
    const selectedBranches = brancheFilter.filter(opt => opt.checked && opt.value !== 'all').map(opt => opt.value);
    const selectedUsers = userFilter.filter(opt => opt.checked && opt.value !== 'all').map(opt => opt.value);
    const selectedVerantwortlicher = verantwortlicherFilter.filter(opt => opt.checked && opt.value !== 'all').map(opt => opt.value);
    const selectedPrioritaet = prioritaetFilter.filter(opt => opt.checked && opt.value !== 'all').map(opt => opt.value);

    const params = new URLSearchParams();

    // Pagination params
    params.append('page', page.toString());
    params.append('per_page', rowsPerPage.toString());

    if (searchTerm.trim()) {
      params.append('fa_name', searchTerm.trim());
    }

    const allStatusesChecked = statusFilter.find(opt => opt.value === 'all')?.checked;
    const allBranchesChecked = brancheFilter.find(opt => opt.value === 'all')?.checked;
    const allUsersChecked = userFilter.find(opt => opt.value === 'all')?.checked;
    const allVerantwortlicherChecked = verantwortlicherFilter.find(opt => opt.value === 'all')?.checked;
    const allPrioritaetChecked = prioritaetFilter.find(opt => opt.value === 'all')?.checked;

    if (!allStatusesChecked && selectedStatuses.length > 0) {
      params.append('statusstring', selectedStatuses.join(','));
    }
    if (!allBranchesChecked && selectedBranches.length > 0) {
      params.append('branchestring', selectedBranches.join(','));
    }
    if (!allUsersChecked && selectedUsers.length > 0) {
      params.append('userfilter', selectedUsers.join(','));
    }
    if (!allVerantwortlicherChecked && selectedVerantwortlicher.length > 0) {
      params.append('verantwortlicher', selectedVerantwortlicher.join(','));
    }
    if (!allPrioritaetChecked && selectedPrioritaet.length > 0) {
      params.append('prioritaet', selectedPrioritaet.join(','));
    }

    return params.toString();
  };

  // UPDATED: Fetch contacts with pagination
  const fetchContacts = useCallback(() => {
    setLoading(true);
    setError(null);
    const queryString = buildQueryParams();


    // console.log('📊 Filters loaded:', { 
    //   statusFilter: statusFilter.length, 
    //   brancheFilter: brancheFilter.length,
    //   userFilter: userFilter.length 
    // }); 

    fetch(`/contacts/query?${queryString}`, {
      headers: { Accept: 'application/json' },
      credentials: 'include',
    })
      .then(async (res) => {
        //  console.log('✅ Response received:', res.status); 
        if (!res.ok) throw new Error(`Fehler beim Laden: ${res.status}`);
        const result = await res.json();

        // console.log('📦 Result:', result); 

        //  Handle paginated response
        const data = result.data || result; // Support both formats
        const pagination = result.pagination;

        const mapped: Contact[] = data.map((item: any) => ({
          id: item.KontaktID,
          firmenname: item.firmenname,
          abkuerzungAlternativeNamen: item.AbkuerzungAlternativenNamen || '',
          kategorieID: item.KategorieID,
          kategorieName: item.KategorieName || '',
          brancheID: item.BrancheID,
          brancheName: item.BrancheName || '',
          ersteller: item.Ersteller || '',
          verantwortlicher: item.Bearbeiter || '',
          prioritaetID: item.PriotitaetID,
          prioritaetName: item.PriotitaetName || '',
          prioritaetFarbe: item.PriotitaetFarbe || '',
          mitarbeiter: item.mitarbeiter?.map((ma: any) => ({
            name: ma.name,
            email: ma.email || null,
            dw1: ma.dw1 || null,
            dw2: ma.dw2 || null,
            dw3: ma.dw3 || null,
            dw4: ma.dw4 || null,
            fax: ma.fax || null,
            bemerkung: ma.bemerkung || null,
          })) || [],
          firmaPostanschrift: item.FirmaPostanschrift || '',
          firmaLieferadresse: item.FirmaLieferadresse || '',
          firmaTelefon: item.FirmaTelefon || '',
          firmaEmail: item.FirmaEmail || '',
          firmaURL: item.FirmaUrl || '',
          firmaBemerkung: item.FirmaBemerkung || '',
          mitarbeiterName: item.mitarbeiterName || '',
          mitarbeiterEmail: item.MitarbeiterEmail || '',
          mitarbeiterTelefon1: item.MitarbeiterTelefon1 || '',
          mitarbeiterTelefon2: item.MitarbeiterTelefon2 || '',
          mitarbeiterTelefon3: item.MitarbeiterTelefon3 || '',
          mitarbeiterTelefon4: item.MitarbeiterTelefon4 || '',
          mitarbeiterFax: item.MitarbeiterFax || '',
          mitarbeiterBemerkung: item.MitarbeiterBemerkung || '',
        }));

        setContacts(mapped);

        //  Set total from pagination metadata
        if (pagination) {
          setTotalContacts(pagination.total);
        }
      })
      .catch((err) => {
        console.error(err);
        setError(err.message || 'Etwas ist schiefgelaufen');
      })
      .finally(() => setLoading(false));
  }, [page, rowsPerPage, statusFilter, brancheFilter, userFilter, verantwortlicherFilter, prioritaetFilter, searchTerm]);

  //  NEW: Pagination handlers
  const handlePageChange = (newPage: number) => {
    setPage(newPage + 1); // MUI uses 0-indexed
  };

  const handleRowsPerPageChange = (newRowsPerPage: number) => {
    setRowsPerPage(newRowsPerPage);
    setPage(1);
  };

  //  UPDATED: Reset filters
  const resetFilters = () => {
    const resetOptions = (options: Option[]) =>
      options.map(opt => ({ ...opt, checked: true }));

    setStatusFilter(resetOptions(statusFilter));
    setBrancheFilter(resetOptions(brancheFilter));
    setUserFilter(resetOptions(userFilter));
    setVerantwortlicherFilter(resetOptions(verantwortlicherFilter));
    setPrioritaetFilter(resetOptions(prioritaetFilter));
    setSearchTerm('');
    setPage(1); // Reset to page 1
  };

  // UPDATED: Handle remove filter
  const handleRemoveFilter = (
    type: 'status' | 'branche' | 'user' | 'verantwortlicher' | 'prioritaet',
    value?: string | number
  ) => {
    switch (type) {
      case 'status':
        setStatusFilter(prev => prev.map(opt => opt.value === value ? { ...opt, checked: false } : opt));
        break;
      case 'branche':
        setBrancheFilter(prev => prev.map(opt => opt.value === value ? { ...opt, checked: false } : opt));
        break;
      case 'user':
        setUserFilter(prev => prev.map(opt => opt.value === value ? { ...opt, checked: false } : opt));
        break;
      case 'verantwortlicher':
        setVerantwortlicherFilter(prev => prev.map(opt => opt.value === value ? { ...opt, checked: false } : opt));
        break;
      case 'prioritaet':
        setPrioritaetFilter(prev => prev.map(opt => opt.value === value ? { ...opt, checked: false } : opt));
        break;
    }
    setPage(1); //  Reset to page 1
  };

  // Load filter options on mount
  useEffect(() => {
    fetchFilterOptions();
  }, []);

  //  UPDATED: Fetch contacts when filters or pagination changes
  useEffect(() => {
    if (!filtersLoading) {
      fetchContacts();
    }
  }, [filtersLoading, fetchContacts]);

  return {
    // Data
    contacts,
    loading,
    error,

    // ✅ NEW: Pagination
    page: page - 1, // Convert to 0-indexed for MUI
    rowsPerPage,
    totalContacts,
    handlePageChange,
    handleRowsPerPageChange,

    // Filter options
    statusFilter,
    brancheFilter,
    userFilter,
    verantwortlicherFilter,
    prioritaetFilter,
    filtersLoading,

    // Filter setters
    setStatusFilter,
    setBrancheFilter,
    setUserFilter,
    setVerantwortlicherFilter,
    setPrioritaetFilter,

    // Search
    searchTerm,
    setSearchTerm,

    // Methods
    fetchContacts,
    resetFilters,
    handleRemoveFilter,
  };
};