// resources/assets/ts/ContactsPage/ContactsPage.tsx
import React, { useState } from 'react';
import { msg } from '@lingui/macro';
import type { MessageDescriptor } from '@lingui/core';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import AssignmentIcon from '@mui/icons-material/Assignment';
import CorporateFareIcon from '@mui/icons-material/CorporateFare';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import BadgeOutlinedIcon from '@mui/icons-material/BadgeOutlined';
import SettingsIcon from '@mui/icons-material/Settings';

import ContactsSidebar from './components/ContactsSidebar';
import ContactsAddSingle from './components/ContactsAddSingle';
import ContactsSearchView from './components/ContactsSearchAndFilters/ContactsSearchView';
import ContactsEinstellungen from './components/ContactsEinstellungen';
import ContactsAddMultiple from './components/ContactsAddMultipleView/ContactsAddMultiple';
import EmployeesAddMultiple from './components/ContactsAddMultipleEmployees/EmployeesAddMultiple';
import ContactsMeineAufgaben from './components/ContactsMeineAufgaben';
import ContactsAddEmployee from './components/ContactsAddEmployee';
import { useContactManagement } from './hooks/useContactManagement';
import ContactsPageTitle from './components/ContactsPageTitle';

// ─── Shared type ────────────────────────────────────────────────────────────
export type ActiveView =
  | 'search'
  | 'aufgaben'
  | 'addSingle'
  | 'addMultiple'
  | 'addEinstellungen'
  | 'addEmployeeSingle'
  | 'addEmployeeMultiple';


// ─── Breadcrumb label + icon map ─────────────────────────────────────────────

//can remove the icons later, feels too noisy so not using it for now
// Labels are Lingui MessageDescriptors; translate at render time via i18n._(label).
export const viewLabels: Record<ActiveView, { label: MessageDescriptor; icon: React.ReactNode }> = {
  search: { label: msg`Search contacts`, icon: <SearchIcon fontSize="small" /> },
  aufgaben: { label: msg`My tasks`, icon: <AssignmentIcon fontSize="small" /> },
  addSingle: { label: msg`Add single company`, icon: <CorporateFareIcon fontSize="small" /> },
  addMultiple: { label: msg`Import multiple companies`, icon: <CloudUploadIcon fontSize="small" /> },
  addEmployeeSingle: { label: msg`Single employee`, icon: <BadgeOutlinedIcon fontSize="small" /> },
  addEmployeeMultiple: { label: msg`Import multiple employees`, icon: <CloudUploadIcon fontSize="small" /> },
  addEinstellungen: { label: msg`Settings`, icon: <SettingsIcon fontSize="small" /> },
};

// ─── Component ───────────────────────────────────────────────────────────────
const ContactsPage = () => {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));

  const [activeView, setActiveView] = useState<ActiveView>('search');
  const [mobileOpen, setMobileOpen] = useState(false);

  const contactManagement = useContactManagement();

  const handleContactAdded = () => {
    setActiveView('search');
    contactManagement.fetchContacts();
  };

  const handleMultipleContactsAdded = () => {
    setActiveView('search');
    contactManagement.fetchContacts();
  };

  const handleEmployeeAdded = () => {
    setActiveView('search');
    contactManagement.fetchContacts();
  };

  return (
    <Box sx={{ display: 'flex', bgcolor: 'background.default', minHeight: '100vh' }}>
      <ContactsSidebar
        activeView={activeView}
        onViewChange={setActiveView}
        mobileOpen={mobileOpen}
        onMobileToggle={() => setMobileOpen(false)}
      />

      <Box component="main" sx={{ flexGrow: 1,  p: { xs: 4, md: 5 }, }}>

        {/* PAGE HEADER — breadcrumb + hamburger on mobile */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3, }}>
          {/* {!isDesktop && (
            <IconButton onClick={() => setMobileOpen(true)} edge="start">
              <MenuIcon />
            </IconButton>
          )} */}
          <ContactsPageTitle
            activeLabel={viewLabels[activeView].label}
            activeIcon={viewLabels[activeView].icon}
            isDesktop={isDesktop}
            onMenuToggle={() => setMobileOpen(true)}
          />
        </Box>

        {/* VIEWS */}
        {activeView === 'search' ? (
          <ContactsSearchView
            searchTerm={contactManagement.searchTerm}
            onSearchChange={contactManagement.setSearchTerm}
            statusFilter={contactManagement.statusFilter}
            brancheFilter={contactManagement.brancheFilter}
            userFilter={contactManagement.userFilter}
            verantwortlicherFilter={contactManagement.verantwortlicherFilter}
            prioritaetFilter={contactManagement.prioritaetFilter}
            setStatusFilter={contactManagement.setStatusFilter}
            setBrancheFilter={contactManagement.setBrancheFilter}
            setUserFilter={contactManagement.setUserFilter}
            setVerantwortlicherFilter={contactManagement.setVerantwortlicherFilter}
            setPrioritaetFilter={contactManagement.setPrioritaetFilter}
            contacts={contactManagement.contacts}
            loading={contactManagement.loading}
            filtersLoading={contactManagement.filtersLoading}
            page={contactManagement.page}
            rowsPerPage={contactManagement.rowsPerPage}
            totalContacts={contactManagement.totalContacts}
            onPageChange={contactManagement.handlePageChange}
            onRowsPerPageChange={contactManagement.handleRowsPerPageChange}
            onResetFilters={contactManagement.resetFilters}
            onRemoveFilter={contactManagement.handleRemoveFilter}
          />
        ) : activeView === 'aufgaben' ? (
          <ContactsMeineAufgaben />
        ) : activeView === 'addSingle' ? (
          <ContactsAddSingle onSuccess={handleContactAdded} />
        ) : activeView === 'addMultiple' ? (
          <ContactsAddMultiple
            onSuccess={handleMultipleContactsAdded}
            onNavigateToEinstellungen={() => setActiveView('addEinstellungen')}
          />
        ) : activeView === 'addEmployeeSingle' ? (
          <ContactsAddEmployee onSuccess={handleEmployeeAdded} />
        ) : activeView === 'addEmployeeMultiple' ? (
          <EmployeesAddMultiple
            onSuccess={() => { window.location.href = '/contacts'; }}
            onBack={() => setActiveView('search')}
          />
        ) : activeView === 'addEinstellungen' ? (
          <ContactsEinstellungen />
        ) : null}

      </Box>
    </Box>
  );
};

export default ContactsPage;