import React, { useState, useMemo } from 'react';
import {
  NavigationScreen,
  TruckProfile,
  DriverProfile,
  LogisticsHub,
} from './types/fleet';
import {
  INITIAL_TRUCK,
  INITIAL_DRIVER,
  LOGISTICS_HUBS,
  calculateDynamicRoutes,
} from './data/fleetData';
import { Sidebar } from './components/Sidebar';
import { Header } from './components/Header';
import { LoginScreen } from './components/screens/LoginScreen';
import { BerandaScreen } from './components/screens/BerandaScreen';
import { BandingkanRuteScreen } from './components/screens/BandingkanRuteScreen';
import { DetailRisikoScreen } from './components/screens/DetailRisikoScreen';
import { ProfilTrukScreen } from './components/screens/ProfilTrukScreen';
import { PetaOfflineScreen } from './components/screens/PetaOfflineScreen';
import { PengaturanScreen } from './components/screens/PengaturanScreen';
import { NavigasiAktifScreen } from './components/screens/NavigasiAktifScreen';
import { SuratJalanModal } from './components/modals/SuratJalanModal';
import { OtpModal } from './components/modals/OtpModal';
import { DriverProfileModal } from './components/modals/DriverProfileModal';
import { OnboardingGuideModal } from './components/modals/OnboardingGuideModal';
import { CustomLocationModal } from './components/modals/CustomLocationModal';
import { createCustomHub } from './data/indonesiaLocations';

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(true);
  const [currentScreen, setCurrentScreen] = useState<NavigationScreen>('beranda');
  const [driver, setDriver] = useState<DriverProfile>(INITIAL_DRIVER);
  const [truck, setTruck] = useState<TruckProfile>(INITIAL_TRUCK);

  // Dynamic origin & destination hubs
  const [originHub, setOriginHub] = useState<LogisticsHub>(
    () => LOGISTICS_HUBS.find((h) => h.id === 'hub-bandung-gedebage') || LOGISTICS_HUBS[1]
  );
  const [destinationHub, setDestinationHub] = useState<LogisticsHub>(
    () => LOGISTICS_HUBS.find((h) => h.id === 'hub-cirebon-dc04') || LOGISTICS_HUBS[0]
  );

  const [selectedRouteId, setSelectedRouteId] = useState<string>('rute-tol-utama');
  const [searchQuery, setSearchQuery] = useState<string>('');

  // Modals state
  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState<boolean>(false);
  const [isSuratJalanOpen, setIsSuratJalanOpen] = useState<boolean>(false);
  const [isOtpModalOpen, setIsOtpModalOpen] = useState<boolean>(false);
  const [isHelpModalOpen, setIsHelpModalOpen] = useState<boolean>(false);
  const [isDriverProfileModalOpen, setIsDriverProfileModalOpen] = useState<boolean>(false);
  const [isCustomLocationModalOpen, setIsCustomLocationModalOpen] = useState<boolean>(false);
  const [customLocationTarget, setCustomLocationTarget] = useState<'origin' | 'destination'>('destination');
  const [isMapPickMode, setIsMapPickMode] = useState<boolean>(false);

  // Initial Onboarding Tutorial modal (shown on first load unless dismissed)
  const [isOnboardingOpen, setIsOnboardingOpen] = useState<boolean>(() => {
    try {
      return localStorage.getItem('troute_onboarding_dismissed') !== 'true';
    } catch {
      return true;
    }
  });

  // Calculate dynamic routes whenever origin, destination, or truck specs change
  const dynamicRoutes = useMemo(() => {
    return calculateDynamicRoutes(originHub, destinationHub, truck);
  }, [originHub, destinationHub, truck]);

  const safeRoute = dynamicRoutes[0];
  const altRoute = dynamicRoutes[1];

  // Hub switching handlers
  const handleSelectOriginHub = (hub: LogisticsHub) => {
    setOriginHub(hub);
    setTruck((prev) => ({
      ...prev,
      originHubId: hub.id,
      origin: `${hub.name} (${hub.city})`,
    }));
  };

  const handleSelectDestinationHub = (hub: LogisticsHub) => {
    setDestinationHub(hub);
    setTruck((prev) => ({
      ...prev,
      destinationHubId: hub.id,
      destination: `${hub.name} (${hub.city})`,
    }));
  };

  const handleSwapHubs = () => {
    const tempOrigin = originHub;
    const tempDest = destinationHub;
    setOriginHub(tempDest);
    setDestinationHub(tempOrigin);
    setTruck((prev) => ({
      ...prev,
      originHubId: tempDest.id,
      origin: `${tempDest.name} (${tempDest.city})`,
      destinationHubId: tempOrigin.id,
      destination: `${tempOrigin.name} (${tempOrigin.city})`,
    }));
  };

  // Search input change handler
  const handleSearchChange = (query: string) => {
    setSearchQuery(query);
    if (!query) return;

    // Check if query matches any hub city or name
    const match = LOGISTICS_HUBS.find(
      (h) =>
        h.name.toLowerCase().includes(query.toLowerCase()) ||
        h.city.toLowerCase().includes(query.toLowerCase())
    );
    if (match && match.id !== originHub.id) {
      handleSelectDestinationHub(match);
    }
  };

  // Handlers for custom location modal and interactive map picking
  const handleSelectCustomHub = (hub: LogisticsHub, targetType: 'origin' | 'destination') => {
    if (targetType === 'origin') {
      handleSelectOriginHub(hub);
    } else {
      handleSelectDestinationHub(hub);
    }
  };

  const handleActivateMapPickMode = (targetType: 'origin' | 'destination') => {
    setCustomLocationTarget(targetType);
    setIsMapPickMode(true);
    setIsCustomLocationModalOpen(false);
    setCurrentScreen('beranda');
  };

  const handleMapPickLocation = (coords: [number, number], target: 'origin' | 'destination') => {
    const latStr = coords[0].toFixed(3);
    const lngStr = coords[1].toFixed(3);
    const newHub = createCustomHub(
      `Titik Peta (${latStr}, ${lngStr})`,
      'Koordinat Pilihan Pengemudi',
      coords
    );
    if (target === 'origin') {
      handleSelectOriginHub(newHub);
    } else {
      handleSelectDestinationHub(newHub);
    }
    setIsMapPickMode(false);
  };

  // Handle logout / exit cabin
  const handleLogout = () => {
    setIsAuthenticated(false);
    setCurrentScreen('login');
  };

  // Login Screen render
  if (!isAuthenticated || currentScreen === 'login') {
    return (
      <div className="min-h-screen bg-[#f8fafb]">
        <LoginScreen
          initialDriver={driver}
          onLoginSuccess={(updatedDriver) => {
            setDriver(updatedDriver);
            setIsAuthenticated(true);
            setCurrentScreen('beranda');
          }}
          onSkipLogin={() => {
            setIsAuthenticated(true);
            setCurrentScreen('beranda');
          }}
          onOpenTutorial={() => setIsOnboardingOpen(true)}
          onOpenOtpModal={() => setIsOtpModalOpen(true)}
          onOpenHelpModal={() => setIsHelpModalOpen(true)}
        />

        <OtpModal
          isOpen={isOtpModalOpen}
          onClose={() => setIsOtpModalOpen(false)}
          onVerifySuccess={() => {
            setIsOtpModalOpen(false);
            setIsAuthenticated(true);
            setCurrentScreen('beranda');
          }}
        />

        {/* Dispatch Hub Help Modal */}
        {isHelpModalOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
            <div className="bg-white rounded-2xl shadow-xl max-w-sm w-full p-6 text-left border border-[#e1e3e4]">
              <div className="flex items-center gap-3 mb-3 text-[#17323a]">
                <span className="material-symbols-outlined text-[28px] text-[#feae2c]">
                  headset_mic
                </span>
                <h3 className="text-base font-bold text-[#191c1d]">Bantuan Dispatch Hub</h3>
              </div>
              <p className="text-xs text-[#72787a] leading-relaxed mb-4">
                Pusat Komando Operasional Logistik Jalur Jawa - Bali - Sumatra 24 Jam.
              </p>
              <div className="p-3 bg-[#f2f4f5] rounded-xl flex flex-col gap-1 text-xs mb-4">
                <span className="text-[#72787a]">Hotline Darurat Tol &amp; Kerusakan:</span>
                <span className="font-mono font-bold text-sm text-[#001d25]">0800-1-TROUTE (876883)</span>
                <span className="text-[#72787a] mt-1">Radio Komunikasi Rig Kabin:</span>
                <span className="font-mono font-bold text-sm text-[#001d25]">CH-14 (142.850 MHz)</span>
              </div>
              <button
                onClick={() => setIsHelpModalOpen(false)}
                className="w-full py-2.5 bg-[#feae2c] text-[#17323a] font-bold text-xs rounded-xl hover:bg-[#ffb955] transition-colors cursor-pointer"
              >
                Tutup
              </button>
            </div>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#f8fafb] text-[#191c1d]">
      {/* Desktop Sidebar Dock */}
      <Sidebar
        currentScreen={currentScreen}
        onNavigate={(screen) => setCurrentScreen(screen)}
        truck={truck}
        isOpenMobile={isMobileSidebarOpen}
        onCloseMobile={() => setIsMobileSidebarOpen(false)}
        onLogout={handleLogout}
        onOpenTutorial={() => setIsOnboardingOpen(true)}
      />

      {/* Main App Layout */}
      <div className="lg:pl-72 flex flex-col min-h-screen">
        {/* Cockpit Top Header */}
        <Header
          truck={truck}
          driver={driver}
          searchQuery={searchQuery}
          onSearchChange={handleSearchChange}
          onOpenMobileSidebar={() => setIsMobileSidebarOpen(true)}
          onOpenSuratJalan={() => setIsSuratJalanOpen(true)}
          onOpenDriverProfileModal={() => setIsDriverProfileModalOpen(true)}
          onLogout={handleLogout}
        />

        {/* Content Viewport */}
        <main className="w-full pt-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex-1">
          {currentScreen === 'beranda' && (
            <BerandaScreen
              truck={truck}
              driver={driver}
              originHub={originHub}
              destinationHub={destinationHub}
              safeRoute={safeRoute}
              altRoute={altRoute}
              selectedRouteId={selectedRouteId}
              onSelectRoute={setSelectedRouteId}
              onSelectOriginHub={handleSelectOriginHub}
              onSelectDestinationHub={handleSelectDestinationHub}
              onSwapHubs={handleSwapHubs}
              onOpenDriverProfileModal={() => setIsDriverProfileModalOpen(true)}
              onNavigateToCompare={() => setCurrentScreen('bandingkan-rute')}
              onNavigateToRisk={() => setCurrentScreen('detail-risiko')}
              onNavigateToTruckProfile={() => setCurrentScreen('profil-truk')}
              onNavigateToOfflineMaps={() => setCurrentScreen('peta-offline')}
              onOpenSuratJalan={() => setIsSuratJalanOpen(true)}
              onStartNavigation={() => setCurrentScreen('navigasi-aktif')}
              onOpenCustomLocationModal={(targetType) => {
                setCustomLocationTarget(targetType);
                setIsCustomLocationModalOpen(true);
              }}
              onOpenTutorial={() => setIsOnboardingOpen(true)}
              isMapPickMode={isMapPickMode}
              mapPickTarget={customLocationTarget}
              onMapPickLocation={handleMapPickLocation}
              onCancelMapPickMode={() => setIsMapPickMode(false)}
              onActivateMapPickMode={handleActivateMapPickMode}
            />
          )}

          {currentScreen === 'bandingkan-rute' && (
            <BandingkanRuteScreen
              truck={truck}
              driver={driver}
              originHub={originHub}
              destinationHub={destinationHub}
              safeRoute={safeRoute}
              altRoute={altRoute}
              selectedRouteId={selectedRouteId}
              onSelectRoute={setSelectedRouteId}
              onNavigateToRisk={() => setCurrentScreen('detail-risiko')}
              onStartNavigation={() => setCurrentScreen('navigasi-aktif')}
              onBackToHome={() => setCurrentScreen('beranda')}
            />
          )}

          {currentScreen === 'detail-risiko' && (
            <DetailRisikoScreen
              truck={truck}
              driver={driver}
              originHub={originHub}
              destinationHub={destinationHub}
              onBackToCompare={() => setCurrentScreen('bandingkan-rute')}
              onStartNavigation={() => setCurrentScreen('navigasi-aktif')}
              onOpenSuratJalan={() => setIsSuratJalanOpen(true)}
            />
          )}

          {currentScreen === 'profil-truk' && (
            <ProfilTrukScreen
              truck={truck}
              onUpdateTruck={(updated) => setTruck(updated)}
              onBackToHome={() => setCurrentScreen('beranda')}
            />
          )}

          {currentScreen === 'peta-offline' && (
            <PetaOfflineScreen onBackToHome={() => setCurrentScreen('beranda')} />
          )}

          {currentScreen === 'pengaturan' && (
            <PengaturanScreen onBackToHome={() => setCurrentScreen('beranda')} />
          )}

          {currentScreen === 'navigasi-aktif' && (
            <NavigasiAktifScreen
              truck={truck}
              driver={driver}
              originHub={originHub}
              destinationHub={destinationHub}
              onExitNavigation={() => setCurrentScreen('bandingkan-rute')}
              onOpenSuratJalan={() => setIsSuratJalanOpen(true)}
            />
          )}
        </main>
      </div>

      {/* Global Modals */}
      <SuratJalanModal
        isOpen={isSuratJalanOpen}
        onClose={() => setIsSuratJalanOpen(false)}
        truck={truck}
        driver={driver}
        originHub={originHub}
        destinationHub={destinationHub}
      />

      <DriverProfileModal
        isOpen={isDriverProfileModalOpen}
        onClose={() => setIsDriverProfileModalOpen(false)}
        driver={driver}
        onSaveDriver={(updatedDriver) => setDriver(updatedDriver)}
      />

      {/* Onboarding / Tutorial Guide Modal */}
      <OnboardingGuideModal
        isOpen={isOnboardingOpen}
        onClose={(dontShowAgain) => {
          setIsOnboardingOpen(false);
          if (dontShowAgain) {
            try {
              localStorage.setItem('troute_onboarding_dismissed', 'true');
            } catch {
              // ignore
            }
          }
        }}
        onStartNavigationSample={() => {
          setIsOnboardingOpen(false);
          setCurrentScreen('bandingkan-rute');
        }}
      />

      {/* Custom Location / Lainnya Search & Map Pick Modal */}
      <CustomLocationModal
        isOpen={isCustomLocationModalOpen}
        onClose={() => setIsCustomLocationModalOpen(false)}
        targetType={customLocationTarget}
        currentHub={customLocationTarget === 'origin' ? originHub : destinationHub}
        onSelectCustomHub={handleSelectCustomHub}
        onActivateMapPickMode={handleActivateMapPickMode}
      />
    </div>
  );