App.tsx

import React, { useState, useMemo, useEffect } from 'react';
import {
  Calendar as CalendarIcon,
  Plus,
  ChevronLeft,
  ChevronRight,
  ChevronDown,
  Users,
  LogOut,
  Building2,
  HelpCircle,
  Info,
  Settings,
  Activity,
  Package,
  Box,
  ClipboardList
} from 'lucide-react';
import { format, addMonths, subMonths, addWeeks, subWeeks, addDays, subDays, startOfDay, isAfter, isBefore, endOfDay } from 'date-fns';
import { enUS, ar } from 'date-fns/locale';
import { User, Role, Route, Status, ViewMode, Customer, DeliveryDestination } from './types';
import { ModalVariant } from './components/ConfirmationModal';

const CalendarView = React.lazy(() => import('./components/CalendarView'));
const RouteEditor = React.lazy(() => import('./components/RouteEditor').then(module => ({ default: module.RouteEditor })));
const UserManagement = React.lazy(() => import('./components/UserManagement'));
const CustomerManagement = React.lazy(() => import('./components/CustomerManagement'));
const UserModal = React.lazy(() => import('./components/UserModal'));
const ConfirmationModal = React.lazy(() => import('./components/ConfirmationModal'));
const Auth = React.lazy(() => import('./components/Auth'));
const Reporting = React.lazy(() => import('./components/Reporting'));
const About = React.lazy(() => import('./components/About'));
const AppStatus = React.lazy(() => import('./components/AppStatus'));
const SystemSettings = React.lazy(() => import('./components/SystemSettings'));
const ProductManagement = React.lazy(() => import('./components/ProductManagement').then(module => ({ default: module.ProductManagement })));
const FleetManagement = React.lazy(() => import('./components/FleetManagement').then(module => ({ default: module.FleetManagement })));
const WarehouseView = React.lazy(() => import('./components/WarehouseView').then(module => ({ default: module.WarehouseView })));
const HelpModal = React.lazy(() => import('./components/HelpModal'));
const LogisticsDashboard = React.lazy(() => import('./components/LogisticsDashboard'));

import { useAuth } from './contexts/AuthContext';
import { useData } from './contexts/DataContext';
import { db, auth } from './services/firebase';
import { collection, onSnapshot, doc, setDoc, deleteDoc } from 'firebase/firestore';
import { getInitials, formatName, getFriendlyErrorMessage } from './utils';
import LanguageSwitcher from './components/LanguageSwitcher';
import { useTranslation } from 'react-i18next';
import { version } from './package.json';
import { getNextRouteId } from './services/RouteService';
import LoadingScreen from './components/LoadingScreen';
import { useAppState, AppView } from './hooks/useAppState';
import { Sidebar } from './components/App/Sidebar';
import { AppHeader } from './components/App/AppHeader';

const App = () => {
  const { t, i18n } = useTranslation();
  const dateLocale = i18n.language === 'ar' ? ar : enUS;

  // --- Core State ---
  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const { currentUser: firebaseUser, loading: authLoading } = useAuth();
  const { users, customers, routes, loading: dataLoading, refreshUsers } = useData();

  const {
    isMobileMenuOpen, setIsMobileMenuOpen,
    currentView, setCurrentView,
    isReportsMenuOpen, setIsReportsMenuOpen,
    viewMode, setViewMode,
    currentDate, setCurrentDate,
    statusFilter, setStatusFilter,
    filterStartDate, setFilterStartDate,
    filterEndDate, setFilterEndDate,
    selectedRoute, setSelectedRoute,
    initialAssigneeId, setInitialAssigneeId,
    initialDestinations, setInitialDestinations,
    isUserModalOpen, setIsUserModalOpen,
    selectedUser, setSelectedUser,
    isFilterOpen, setIsFilterOpen,
    isHelpOpen, setIsHelpOpen,
    modalConfig, setModalConfig,
    showAlert, showConfirm,
    handlePrev, handleNext,
    visibleRoutes,
    isManager,
    handleCreateRouteFromCustomers,
    handleCreateRouteClick,
    initialDate
  } = useAppState(currentUser, routes);

  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [userToDelete, setUserToDelete] = useState<User | null>(null);

  // Sync current user to Firestore
  useEffect(() => {
    let unsubscribe: (() => void) | undefined;
    const syncUser = async () => {
      if (firebaseUser) {
        const userRef = doc(db, 'users', firebaseUser.uid);
        unsubscribe = onSnapshot(userRef, async (userSnap) => {
          if (userSnap.exists()) {
            setCurrentUser(userSnap.data() as User);
          } else {
            const newUser: User = {
              id: firebaseUser.uid,
              name: firebaseUser.displayName || 'New User',
              searchKey: (firebaseUser.displayName || 'New User').toLowerCase(),
              email: firebaseUser.email || '',
              phoneNumber: firebaseUser.phoneNumber || '',
              password: '',
              role: Role.PENDING
            };
            await setDoc(userRef, newUser);
          }
        });
      } else {
        setCurrentUser(null);
      }
    };
    syncUser();
    return () => { if (unsubscribe) unsubscribe(); };
  }, [firebaseUser]);

  // Derived list of business users
  const businessUsers = useMemo(() => {
    return users.filter(user => user.role !== Role.ADMINISTRATOR);
  }, [users]);

  const handleLogout = async () => {
    try {
      await auth.signOut();
      setCurrentUser(null);
      setCurrentView('CALENDAR');
      setIsMobileMenuOpen(false);
    } catch (error) {
      console.error("Error logging out", error);
    }
  };

  // --- Route Action ---
  const handleSaveRoute = async (routeData: Omit<Route, 'id' | 'createdAt'> | Route) => {
    try {
      const sanitizedDestinations = routeData.destinations.map(d => ({
        ...d,
        comments: d.comments || null,
        completedAt: d.completedAt || null
      }));

      let finalTitle = routeData.title;
      if (!finalTitle || finalTitle.trim() === '') {
        if (!('id' in routeData)) {
          const routeId = await getNextRouteId();
          const stopCount = sanitizedDestinations.length;
          const assigneeUser = users.find(u => u.id === routeData.assignedTo);
          let assigneeName = 'Unassigned';
          if (assigneeUser?.name) {
            const parts = assigneeUser.name.trim().split(/\s+/);
            assigneeName = parts.length >= 2 ? `${parts[0].charAt(0)}.${parts[parts.length - 1]}` : assigneeUser.name;
          }
          finalTitle = `Rt#${routeId} | ${format(new Date(), 'MMM.dd.yy')} | ${stopCount} Stops | ${assigneeName}`;
        } else {
          finalTitle = `Route Update - ${format(new Date(), 'MMM d, HH:mm')}`;
        }
      }

      const finalDescription = routeData.description;

      const payload = { ...routeData, title: finalTitle, description: finalDescription || '', destinations: sanitizedDestinations };

      if ('id' in routeData) {
        await setDoc(doc(db, 'routes', routeData.id), payload, { merge: true });
      } else {
        const id = doc(collection(db, 'routes')).id;
        await setDoc(doc(db, 'routes', id), { ...payload, id, createdAt: new Date(), createdBy: currentUser?.id || 'system' });
      }

      setCurrentView('CALENDAR');
      setCurrentDate(routeData.dueDate);
      setViewMode(ViewMode.DAY);
      setSelectedRoute(null);
      showAlert('Success', 'Route saved successfully', 'success');
    } catch (error) {
      showAlert("Error", getFriendlyErrorMessage(error), 'danger');
    }
  };

  const handleDeleteRoute = (routeId: string) => {
    showConfirm('Delete Route', 'Delete this route manifest?', async () => {
      try {
        await deleteDoc(doc(db, 'routes', routeId));
        setCurrentView('CALENDAR');
        setSelectedRoute(null);
        showAlert('Success', 'Route deleted', 'success');
      } catch (error) {
        showAlert('Error', getFriendlyErrorMessage(error), 'danger');
      }
    }, 'danger', 'Delete');
  };

  const handleRouteClick = (route: Route) => {
    setSelectedRoute(route);
    setInitialAssigneeId(null);
    setInitialDestinations([]);
    setCurrentView('ROUTE_EDITOR');
  };

  // --- User CRUD ---
  const handleSaveUser = async (userData: Omit<User, 'id'> | User) => {
    try {
      if ('id' in userData) {
        const updates: Partial<User> = { ...userData };
        if (userData.name) {
          updates.searchKey = userData.name.toLowerCase();
        }
        await setDoc(doc(db, 'users', userData.id), updates, { merge: true });
      } else {
        const { createSecondaryUser } = await import('./services/adminService');
        const newUserAuth = await createSecondaryUser(userData.email, userData.password || 'password123', userData.name);
        await setDoc(doc(db, 'users', newUserAuth.uid), {
          ...userData,
          id: newUserAuth.uid,
          searchKey: userData.name.toLowerCase(),
          password: ''
        });
      }
      setSelectedUser(null);
      await refreshUsers();
    } catch (error) {
      showAlert("Error", getFriendlyErrorMessage(error), 'danger');
    }
  };

  const handleDeleteUser = (userId: string) => {
    const user = users.find(u => u.id === userId);
    if (user) { setUserToDelete(user); setIsDeleteModalOpen(true); }
  };

  const confirmDeleteUser = async () => {
    if (userToDelete) {
      try {
        await deleteDoc(doc(db, 'users', userToDelete.id));
        await refreshUsers();
        showAlert('Success', 'User deleted', 'success');
      } finally {
        setUserToDelete(null);
        setIsDeleteModalOpen(false);
      }
    }
  };

  // --- Customer CRUD ---
  const handleAddCustomer = async (customer: Omit<Customer, 'id'>) => {
    const id = doc(collection(db, 'customers')).id;
    await setDoc(doc(db, 'customers', id), { ...customer, id });
  };
  const handleUpdateCustomer = (c: Customer) => setDoc(doc(db, 'customers', c.id), c, { merge: true });
  const handleDeleteCustomer = (id: string) => {
    showConfirm('Delete Customer', 'Delete this customer record?', async () => {
      await deleteDoc(doc(db, 'customers', id));
      showAlert('Success', 'Customer deleted', 'success');
    }, 'danger', 'Delete');
  };

  if (authLoading || (firebaseUser && dataLoading)) return <LoadingScreen />;
  if (!currentUser) return <Auth onLoginSuccess={() => { }} />;

  if (currentUser.role === Role.PENDING) {
    return (
      <div className="flex flex-col items-center justify-center h-screen bg-gray-50 p-4 text-center">
        <div className="bg-white p-8 rounded-2xl shadow-lg max-w-md w-full border border-gray-100">
          <Activity className="text-amber-600 mx-auto mb-6" size={48} />
          <h1 className="text-xl md:text-2xl font-bold mb-3">{t('login.pendingTitle', 'Approval Pending')}</h1>
          <p className="text-gray-500 mb-8">{t('login.pendingMessage', { name: currentUser.name })}</p>
          <button onClick={handleLogout} className="w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg hover:bg-gray-50">
            <LogOut size={18} /> <span>{t('login.signOut')}</span>
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-gray-50 text-gray-900 overflow-hidden">
      <aside className="w-64 bg-white border-r border-gray-200 hidden md:flex">
        <Sidebar t={t} version={version} currentUser={currentUser} currentView={currentView} setCurrentView={setCurrentView} isReportsMenuOpen={isReportsMenuOpen} setIsReportsMenuOpen={setIsReportsMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} isManager={isManager} handleLogout={handleLogout} />
      </aside>

      {isMobileMenuOpen && (
        <div className="fixed inset-0 z-50 md:hidden">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setIsMobileMenuOpen(false)} />
          <aside className="absolute inset-y-0 left-0 w-4/5 max-w-xs bg-white shadow-2xl">
            <Sidebar t={t} version={version} currentUser={currentUser} currentView={currentView} setCurrentView={setCurrentView} isReportsMenuOpen={isReportsMenuOpen} setIsReportsMenuOpen={setIsReportsMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} isManager={isManager} handleLogout={handleLogout} />
          </aside>
        </div>
      )}

      <main className="flex-1 flex flex-col h-full overflow-hidden relative w-full">
        <AppHeader
          t={t} currentView={currentView} viewMode={viewMode} currentDate={currentDate} dateLocale={dateLocale}
          isFilterOpen={isFilterOpen} statusFilter={statusFilter} filterStartDate={filterStartDate} filterEndDate={filterEndDate}
          setIsMobileMenuOpen={setIsMobileMenuOpen} handleCreateRouteClick={() => handleCreateRouteClick(null, currentDate)} setIsHelpOpen={setIsHelpOpen}
          handlePrev={handlePrev} handleNext={handleNext} setCurrentDate={setCurrentDate} setViewMode={setViewMode}
          setStatusFilter={setStatusFilter} setFilterStartDate={setFilterStartDate} setFilterEndDate={setFilterEndDate} setIsFilterOpen={setIsFilterOpen}
        />

        <div className="flex-1 overflow-y-auto bg-gray-50">
          <React.Suspense fallback={<LoadingScreen fullScreen={false} />}>
            {currentView === 'DASHBOARD' && <LogisticsDashboard users={users} routes={routes} customers={customers} onRouteClick={handleRouteClick} onViewChange={setCurrentView} />}
            {currentView === 'CALENDAR' && <CalendarView currentDate={currentDate} filterStatus={statusFilter} filterStartDate={filterStartDate} filterEndDate={filterEndDate} currentUser={currentUser} customers={customers} users={users} viewMode={viewMode} onRouteClick={handleRouteClick} onViewChange={setViewMode} onDateChange={setCurrentDate} />}
            {currentView === 'TEAM' && <UserManagement users={users} currentUser={currentUser} routes={routes} customers={customers} onAddUser={() => { setSelectedUser(null); setIsUserModalOpen(true); }} onEditUser={(u) => { setSelectedUser(u); setIsUserModalOpen(true); }} onDeleteUser={handleDeleteUser} onRouteClick={handleRouteClick} onAddRoute={handleCreateRouteClick} />}
            {currentView === 'CUSTOMERS' && <CustomerManagement customers={customers} currentUser={currentUser} onAdd={handleAddCustomer} onUpdate={handleUpdateCustomer} onDelete={handleDeleteCustomer} onCreateRoute={handleCreateRouteFromCustomers} />}
            {currentView === 'PRODUCTS' && isManager && <ProductManagement />}
            {currentView === 'FLEET' && isManager && <FleetManagement users={users} />}
            {currentView === 'WAREHOUSE' && isManager && <WarehouseView users={users} />}
            {currentView === 'REPORTS' && <Reporting customers={customers} routes={routes} users={businessUsers} />}
            {currentView === 'ROUTE_EDITOR' && <RouteEditor onClose={() => setCurrentView('CALENDAR')} onSave={handleSaveRoute} onDelete={handleDeleteRoute} users={businessUsers} allUsers={users} customers={customers} currentUser={currentUser} existingRoute={selectedRoute} initialAssigneeId={initialAssigneeId} initialDestinations={initialDestinations} initialDate={initialDate} onConfirm={showConfirm} onAlert={showAlert} />}
            {currentView === 'ABOUT' && <About />}
            {currentView === 'APP_STATUS' && <AppStatus onConfirm={showConfirm} />}
            {currentView === 'SETTINGS' && isManager && <SystemSettings onShowAlert={showAlert} onClose={() => setCurrentView('CALENDAR')} />}
          </React.Suspense>
        </div>
      </main>

      <UserModal isOpen={isUserModalOpen} onClose={() => setIsUserModalOpen(false)} onSave={handleSaveUser} existingUser={selectedUser} />
      <ConfirmationModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} onConfirm={confirmDeleteUser} title={t('userModal.deleteTitle')} message={t('userModal.deleteMessage', { name: userToDelete?.name })} confirmLabel="Delete User" variant="danger" />
      <HelpModal isOpen={isHelpOpen} onClose={() => setIsHelpOpen(false)} currentView={currentView} />
      <ConfirmationModal isOpen={modalConfig.isOpen} onClose={() => setModalConfig(prev => ({ ...prev, isOpen: false }))} onConfirm={modalConfig.onConfirm} title={modalConfig.title} message={modalConfig.message} variant={modalConfig.variant} showCancel={modalConfig.showCancel} confirmLabel={modalConfig.confirmLabel} />
    </div>
  );
};

export default App;