// resources/assets/ts/ContactsPage/ContactsAddressView.tsx

import React, { useEffect, useState } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
import Alert from '@mui/material/Alert';
import CircularProgress from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';
import {
  loadDynamicFilterOptions,
  getStatusLabel,
  getBrancheLabel,
  getPotenzialLabel,
  isFiltersLoaded,
  getLoadError
} from './constants/filters';

import GetadrFirmenTable from './components/GetadrFirmenTable';
import ContactsSidebar from './components/ContactsSidebar';

import { ContactsAddressViewProps, Employee } from './types';

import { ActiveView, viewLabels } from './ContactsPage';
import ContactsPageTitle from './components/ContactsPageTitle';

//import views
import ContactsAddSingle from './components/ContactsAddSingle';
import ContactsAddMultiple from './components/ContactsAddMultipleView/ContactsAddMultiple';
import ContactsEinstellungen from './components/ContactsEinstellungen';

//import Tabs
import MitarbeiterTab from './components/MitarbeiterTab/MitarbeiterTab';
import AufgabenTab from './components/AufgabenTab/AufgabenTab';
import NotizenDateiTab from './components/NotizenDateiTab/NotizenDateiTab';
import ContactsMeineAufgaben from './components/ContactsMeineAufgaben';
import ContactsAddEmployee from './components/ContactsAddEmployee';
import EmployeesAddMultiple from './components/ContactsAddMultipleEmployees/EmployeesAddMultiple';


import { useContactManagement } from './hooks/useContactManagement';

import {
  PictureAsPdf as PdfIcon,
} from '@mui/icons-material';
import MenuIcon from '@mui/icons-material/Menu';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';


const ContactsAddressView: React.FC<ContactsAddressViewProps> = ({
  adresses,
  userOptions,
  currentUser,
  orderTypes,
  dyns,
  csrfToken
}) => {
    const theme = useTheme();
    const { i18n } = useLingui();
    const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
  const [employers, setEmployers] = useState<Employee[]>(
    adresses.length > 0 ? adresses[0].employer : []
  );

    
    const [mobileOpen, setMobileOpen] = useState(false);
  const [activeTab, setActiveTab] = useState<number>(0);
  const [activeView, setActiveView] = useState<
    'search' | 'aufgaben' | 'addSingle' | 'addMultiple' | 'addEinstellungen' | 'addEmployeeSingle' | 'addEmployeeMultiple'
  >('search');

  //  Use the shared hook to manage sidebar page loading, search etc. 
  const contactManagement = useContactManagement();

  

  //  Create refresh handlers
  const handleContactAdded = () => {
    contactManagement.fetchContacts(); // Refresh contacts
    window.location.href = '/contacts'; // Navigate back
  };

  const handleMultipleContactsAdded = () => {
    contactManagement.fetchContacts(); // Refresh contacts
    window.location.href = '/contacts'; // Navigate back
  };

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

  //state for filters.ts loading
  const [FiltersLoading, setFiltersLoading] = useState(true);
  const [FilterError, setFilterError] = useState<string | null>(null);

  // Load dynamic filter options on mount //old one before hook
  useEffect(() => {
    const loadFilters = async () => {
      try {
        setFiltersLoading(true);
        setFilterError(null);
        await loadDynamicFilterOptions();
      } catch (error) {
        setFilterError(error instanceof Error ? error.message : i18n._(msg`Failed to load filter options`));
        console.error('Filter loading error:', error);
      } finally {
        setFiltersLoading(false);
      }
    };

    loadFilters();
  }, []);

  // Keyboard shortcuts for tabs (only active when in contact detail view)
  useEffect(() => {
    if (activeView !== 'search') return;

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'F3') {
        event.preventDefault();
        setActiveTab(0);
      } else if (event.key === 'F4') {
        event.preventDefault();
        setActiveTab(1);
      } else if (event.key === 'F6') {
        event.preventDefault();
        setActiveTab(2);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [activeView]);

  useEffect(() => {
    if (adresses[activeTab]) {
      setEmployers(adresses[activeTab].employer);
    }
  }, [adresses, activeTab]);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setActiveTab(newValue);
  };

  // Handle sidebar view changes - FIXED to match ContactsPage pattern
  const handleViewChange = (view: 'search' | 'aufgaben' | 'addSingle' | 'addMultiple' | 'addEinstellungen') => {
    if (view === 'search') {
      // Navigate back to contacts search page
      window.location.href = '/contacts';
    } else {
      // Set active view to show different components
      setActiveView(view);
    }
  };

  const currentContactId = adresses && adresses.length > 0 ? adresses[0].id : null;

  return (
    <Box sx={{ display: 'flex', minHeight: '100vh',  minWidth: 0 }}>
      {/* Sidebar - same as ContactsPage */}
            <ContactsSidebar
              activeView={activeView}
              onViewChange={handleViewChange}
              mobileOpen={mobileOpen}
              onMobileToggle={() => setMobileOpen(false)}
            />

      {/* Main Content */}
      <Box
        component="main"
        sx={{
          flexGrow: 1,
          p: { xs: 4, md: 5 },
          backgroundColor: 'background.default',
          minWidth: 0,        // ADD — prevents flex child (get adr cards) from overflowing
          overflow: 'hidden', // ADD — clips content to its own boundary
        }}
      >
        {/* 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>
        {/*  Show error from hook if filter loading failed */}
        {contactManagement.error && (
          <Alert severity="error" sx={{ mb: 2 }}>
            <Trans>Error loading filter options:</Trans> {contactManagement.error}
          </Alert>
        )}
        {activeView === 'search' ? (
          // Contact Detail View (default)
          contactManagement.filtersLoading ? (
            <Box
              sx={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                minHeight: '200px',
                gap: 2
              }}
            >
              <CircularProgress />
              <Typography variant="body1" color="text.secondary">
                <Trans>Loading...</Trans>
              </Typography>
            </Box>
          ) : (
            <>
              {/* Company/Address Info Table - Only render when loaded */}
              <GetadrFirmenTable
                adresses={adresses}
                getStatusLabel={getStatusLabel}
                getBrancheLabel={getBrancheLabel}
                getPotenzialLabel={getPotenzialLabel}
              />

              {/* Material-UI Tabs */}
              <Box sx={{ borderBottom: 1, borderColor: 'divider', marginTop: '20px' }}>
                <Tabs
                  value={activeTab}
                  onChange={handleTabChange}
                  aria-label={i18n._(msg`address detail tabs`)}
                >
                  <Tab label={i18n._(msg`Employees (F3)`)} />
                  <Tab label={i18n._(msg`Tasks (F4)`)} />
                  <Tab label={i18n._(msg`Notes & file (F6)`)} />

                  <Box sx={{ flexGrow: 1 }} >

                    <Button
                      startIcon={<PdfIcon />}
                      onClick={() => {
                        if (adresses[0]?.id) {
                          window.open(
                            `/comment/pdf/${adresses[0].id}/crm_rep`,
                            'PDF_Window',
                            'width=800,height=900,toolbar=no,menubar=no,scrollbars=yes,resizable=yes'
                          );
                        }
                      }}
                      sx={{
                        ml: 2,
                        height: 48,
                        borderRadius: 0,
                        textTransform: 'none',
                        fontWeight: 500,
                        color: 'text.secondary',
                        borderBottom: '2px solid transparent',
                        // '&:hover': {
                        //   backgroundColor: 'rgba(25, 118, 210, 0.08)', 
                        // },
                        '&:active': {
                          backgroundColor: 'rgba(25, 118, 210, 0.12)',
                        },
                      }}
                    >
                      <Trans>Generate PDF</Trans>
                    </Button>


                  </Box>
                </Tabs>

              </Box>

              {/* Tab Panels */}
              <Box sx={{ padding: '20px 0' }}>
                {activeTab === 0 && (
                  <div role="tabpanel" style={{ padding: '5px' }}>
                    <MitarbeiterTab
                      adresses={adresses}
                      adrId={adresses[0]?.id}
                      csrfToken={csrfToken}
                    />
                  </div>
                )}

                {activeTab === 1 && (
                  <div role="tabpanel" style={{ padding: '5px' }}>
                    <AufgabenTab
                      contactId={currentContactId}
                      configCmsHex="0x2000"
                      canEdit={true}
                      canDelete={true}
                      adresses={adresses}
                    />
                  </div>
                )}

                {activeTab === 2 && (
                  <div role="tabpanel" style={{ padding: '5px' }}>
                    <NotizenDateiTab
                      contactId={currentContactId}
                      csrfToken={csrfToken}
                      currentUser={currentUser}
                    />
                  </div>
                )}

              </Box>
            </>
          )
        ) : 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={() => {
              // Refresh or navigate
              window.location.href = '/contacts';
            }}
            onBack={() => setActiveView('search')}
          />
        ) : activeView === 'addEinstellungen' ? (
          <ContactsEinstellungen />
        ) : null}
      </Box>
    </Box>
  );
};

export default ContactsAddressView;