import React, { useState, useMemo, useCallback, useEffect, Suspense } from 'react';
import {
  PropertyType,
  RoomType,
  FinishLevel,
  SelectedRoom,
  UserInfo,
  ServiceItem
} from './types';
import {
  ROOM_DIMENSIONS,
  CEILING_HEIGHT,
  FINISH_MULTIPLIERS,
  VAT_RATES,
  PROTECTION_PRICE_PER_M2,
  PROPERTY_ROOM_MAPPING,
  EMAILJS_CONFIG,
  CALENDLY_URL
} from './constants';
import { getFinishLabel, getFinishDescription, openCalendlyPopup, preloadCalendly } from './utils';
import BelAirLogo from './components/BelAirLogo';
import { PROPERTY_ICONS } from './components/icons';
// Use local lightweight icons to avoid heavy lucide-react bundle on initial load
import {
  ArrowRight, Calendar, Phone, ArrowUp, LayoutGrid, Zap, Leaf, Home, Loader2
} from './components/AppIcons';

// Import Data Synchronously to prevent "Click Lag" on fast devices
// The data size is negligible compared to the HTTP latency of a separate chunk
import { SERVICES_LUT } from './services';
import { ROOM_ICONS } from './components/room-icons';

// Eager load the SummaryCard to make Step 3 instant
import RoomSummaryCard from './components/RoomSummaryCard';

// Lazy Load heavy components that are not needed immediately
const ContactStep = React.lazy(() => import('./components/ContactStep'));
const PrintQuote = React.lazy(() => import('./components/PrintQuote'));
const RoomEditor = React.lazy(() => import('./components/RoomEditor'));

// --- Global Types for External Libraries ---
declare global {
  interface Window {
    emailjs: any;
    Calendly: any;
  }
}

// --- MAIN APP ---

function App() {
  const [step, setStep] = useState(1);
  const [propertyType, setPropertyType] = useState<PropertyType | null>(null);
  const [finishLevel, setFinishLevel] = useState<FinishLevel>(FinishLevel.STANDARD);
  const [rooms, setRooms] = useState<SelectedRoom[]>([]);
  const [userInfo, setUserInfo] = useState<UserInfo>({
    firstName: '', lastName: '', email: '', phone: '', city: '', startDate: '', projectDetails: '', providesMaterials: false
  });
  const [showScrollTop, setShowScrollTop] = useState(false);
  const [quoteRef, setQuoteRef] = useState('');

  // NEW STATE FOR MODAL EDITING
  const [editingRoomId, setEditingRoomId] = useState<string | null>(null);
  const editingRoom = useMemo(() => rooms.find(r => r.id === editingRoomId), [rooms, editingRoomId]);

  // Data Loading - Now synchronous for instant interaction
  const servicesLut = SERVICES_LUT;
  const roomIcons = ROOM_ICONS;

  // Preload Images on Mount
  useEffect(() => {
    // 1. Remove Loader Instantly (No artificial delay)
    const loader = document.getElementById('loader');
    if (loader) {
      loader.style.display = 'none'; // Instant removal
      loader.remove();
    }

    // 2. Prefetch heavy editors for later steps
    const prefetchTimer = setTimeout(() => {
      import('./components/RoomEditor');
      import('./components/ContactStep');
      import('./components/PrintQuote');
    }, 1000);

    return () => clearTimeout(prefetchTimer);
  }, []);

  // Scroll to Top Logic (Optimized Passive Listener)
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 300) {
        setShowScrollTop(true);
      } else {
        setShowScrollTop(false);
      }
    };
    // @ts-ignore - Passive option is valid in modern browsers
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handlePropertySelect = useCallback((type: PropertyType) => {
    setPropertyType(type);
    setStep(2);
  }, []);

  const handleFinishSelect = useCallback((level: FinishLevel) => {
    setFinishLevel(level);
    setStep(3);
  }, []);

  const handleRoomAdd = useCallback((type: RoomType) => {
    const newRoom: SelectedRoom = {
      id: Math.random().toString(36).substr(2, 9),
      type,
      floorArea: ROOM_DIMENSIONS[type].floor,
      wallArea: 0,
      ceilingArea: ROOM_DIMENSIONS[type].floor,
      ceilingHeight: CEILING_HEIGHT,
      selectedServices: {}
    };

    // Auto-calculate walls
    const perimeter = ROOM_DIMENSIONS[type].perimeter;
    newRoom.wallArea = Math.round(perimeter * newRoom.ceilingHeight);

    setRooms(prev => [...prev, newRoom]);
    setEditingRoomId(newRoom.id); // IMMEDIATELY OPEN EDITOR
  }, []);

  const handleDeleteRoom = useCallback((id: string) => {
    setRooms(prev => prev.filter(r => r.id !== id));
    setEditingRoomId(prev => (prev === id ? null : prev));
  }, []);

  const handleResetRoom = useCallback((id: string) => {
    if (window.confirm("Voulez-vous vraiment réinitialiser toutes les prestations de cette pièce ?")) {
      setRooms(prev => prev.map(r => {
        if (r.id === id) {
          return {
            ...r,
            selectedServices: {},
            customSupplyValues: {}
          };
        }
        return r;
      }));
    }
  }, []);

  const handleDuplicateRoom = useCallback((id: string) => {
    setRooms(prev => {
      const roomToDuplicate = prev.find(r => r.id === id);
      if (roomToDuplicate) {
        const newId = Math.random().toString(36).substr(2, 9);
        const newRoom = {
          ...roomToDuplicate,
          id: newId,
          customLabel: roomToDuplicate.customLabel ? `${roomToDuplicate.customLabel} (Copie)` : undefined
        };
        return [...prev, newRoom];
      }
      return prev;
    });
  }, []);

  const handleCopyToSameType = useCallback((sourceId: string) => {
    setRooms(prev => {
      const sourceRoom = prev.find(r => r.id === sourceId);
      if (!sourceRoom) return prev;

      if (window.confirm(`Copier la configuration de "${sourceRoom.customLabel || sourceRoom.type}" vers toutes les autres pièces du même type ?`)) {
        return prev.map(r => {
          if (r.type === sourceRoom.type && r.id !== sourceId) {
            return {
              ...r,
              selectedServices: { ...sourceRoom.selectedServices },
              customSupplyValues: { ...sourceRoom.customSupplyValues } // also copy supply prices/urls
            };
          }
          return r;
        });
      }
      return prev;
    });
  }, []);

  const handleRenameRoom = useCallback((id: string, name: string) => {
    setRooms(prev => prev.map(r => r.id === id ? { ...r, customLabel: name } : r));
  }, []);

  const handleUpdateArea = useCallback((id: string, field: 'floor' | 'wall', value: number) => {
    setRooms(prev => prev.map(r => {
      if (r.id === id) {
        const updated = { ...r };
        if (field === 'floor') {
          updated.floorArea = value;
          updated.ceilingArea = value;
          const side = Math.sqrt(value);
          updated.wallArea = Math.round((side * 4) * updated.ceilingHeight);
        } else {
          updated.wallArea = value;
        }
        return updated;
      }
      return r;
    }));
  }, []);

  const handleUpdateHeight = useCallback((id: string, height: number) => {
    setRooms(prev => prev.map(r => {
      if (r.id === id) {
        const h = r.ceilingHeight || 2.7;
        const currentPerimeter = r.wallArea / h;
        const newWallArea = Math.round(currentPerimeter * height);
        return { ...r, ceilingHeight: height, wallArea: newWallArea };
      }
      return r;
    }));
  }, []);

  const handleToggleService = useCallback((roomId: string, serviceId: string, isAdditive: boolean = false, delta: number = 0) => {
    setRooms(prev => prev.map(r => {
      if (r.id === roomId) {
        const currentQty = r.selectedServices[serviceId] || 0;
        let newQty = 0;

        if (isAdditive) {
          newQty = Math.max(0, currentQty + delta);
        } else {
          newQty = currentQty > 0 ? 0 : 1;
        }

        const newServices = { ...r.selectedServices };
        if (newQty > 0) {
          newServices[serviceId] = newQty;
        } else {
          delete newServices[serviceId];
        }
        return { ...r, selectedServices: newServices };
      }
      return r;
    }));
  }, []);

  const handleUpdateSupply = useCallback((roomId: string, serviceId: string, value: number, url?: string) => {
    setRooms(prev => prev.map(r => {
      if (r.id === roomId) {
        const newSupplyValues = { ...r.customSupplyValues };
        newSupplyValues[serviceId] = { price: value, url };
        return { ...r, customSupplyValues: newSupplyValues };
      }
      return r;
    }));
  }, []);

  const calculationResult = useMemo(() => {
    let totalHT = 0;
    const categoryBreakdown: Record<string, number> = {};

    rooms.forEach(room => {
      Object.entries(room.selectedServices).forEach(([serviceId, qty]) => {
        const service = servicesLut[serviceId];
        if (service) {
          let quantity: number = Number(qty);
          if (service.unit === 'm2' && !service.allowQuantity) {
            if (service.target === 'wall') quantity = room.wallArea;
            else if (service.target === 'ceiling') quantity = room.ceilingArea;
            else quantity = room.floorArea;
          }

          const defaultSupply = service.supplyPrice || 0;
          const customSupplyData = room.customSupplyValues?.[serviceId];
          const finalSupply = customSupplyData ? customSupplyData.price : defaultSupply;
          const baseLabor = service.unitPriceHT - defaultSupply;

          let multiplier: number = FINISH_MULTIPLIERS.STANDARD;
          if (finishLevel === FinishLevel.RENTAL) multiplier = FINISH_MULTIPLIERS.RENTAL;
          if (finishLevel === FinishLevel.PRESTIGE) multiplier = FINISH_MULTIPLIERS.PRESTIGE;

          const finalLabor = baseLabor * multiplier;
          const lineTotal = (finalLabor + finalSupply) * quantity;

          totalHT += lineTotal;

          if (!categoryBreakdown[service.category]) categoryBreakdown[service.category] = 0;
          categoryBreakdown[service.category] += lineTotal;
        }
      });
    });

    const totalFloorArea = rooms.reduce((acc, r) => acc + r.floorArea, 0);
    const protectionCost = totalFloorArea * PROTECTION_PRICE_PER_M2;
    totalHT += protectionCost;

    categoryBreakdown['Installation & Protection'] = protectionCost;

    const vatRate = propertyType === PropertyType.OFFICE ? VAT_RATES.OFFICE : VAT_RATES.STANDARD;
    const totalTTC = totalHT * (1 + vatRate);

    const estimatedDays = Math.ceil(totalHT / 900);
    let duration = "";
    if (estimatedDays < 5) duration = "3 à 5 jours";
    else if (estimatedDays < 10) duration = "8 à 12 jours";
    else if (estimatedDays < 20) duration = "15 à 20 jours";
    else if (estimatedDays < 40) duration = "5 à 7 semaines";
    else duration = "2 à 3 mois";

    const minBudget = totalHT * 0.95;
    const maxBudget = totalHT * 1.20;

    return { totalHT, totalTTC, vatRate, duration, categoryBreakdown, minBudget, maxBudget };
  }, [rooms, finishLevel, propertyType, servicesLut]);

  const handleContactSubmit = (submittedInfo: UserInfo) => {
    setUserInfo(submittedInfo);

    const city = submittedInfo.city ? submittedInfo.city.toUpperCase().replace(/[^A-Z]/g, '').substring(0, 3) : 'PAR';
    const year = new Date().getFullYear();
    const storageKey = `quoteCount_${year}`;
    const current = parseInt(localStorage.getItem(storageKey) || '0');
    const next = current + 1;
    localStorage.setItem(storageKey, next.toString());
    const newRef = `${city}-${year}-${next.toString().padStart(3, '0')}`;

    setQuoteRef(newRef);

    const fullDetails = [
      "--- NOUVEAU PROJET SIMULATEUR ---",
      `RÉFÉRENCE : ${newRef}`,
      `CLIENT : ${submittedInfo.firstName} ${submittedInfo.lastName}`,
      `EMAIL : ${submittedInfo.email}`,
      `TÉLÉPHONE : ${submittedInfo.phone}`,
      `ADRESSE : ${submittedInfo.city}`,
      `TYPE DE BIEN : ${propertyType}`,
      `GAMME : ${finishLevel}`,
      `DETAILS PROJET : ${submittedInfo.projectDetails || "Non spécifié"}`,
      `DURÉE ESTIMÉE : ${calculationResult.duration}`,
      "",
      "--- DÉTAIL DES PIÈCES ET PRESTATIONS ---",
      ...rooms.map(r => {
        const servicesText = Object.entries(r.selectedServices).map(([id, qty]) => {
          const s = servicesLut[id];
          return s ? `   - ${s.label} (${s.allowQuantity ? 'x' + qty : 'Oui'})` : null;
        }).filter(Boolean).join('\n');
        return `PIÈCE : ${r.customLabel || r.type} (${r.floorArea}m²)\n${servicesText}`;
      }),
      "",
      "--- BUDGET ESTIMÉ ---",
      `Total HT : ${calculationResult.totalHT.toLocaleString('fr-FR')} €`,
      `Total TTC : ${calculationResult.totalTTC.toLocaleString('fr-FR')} €`
    ].join('\n');

    const templateParams = {
      to_name: "BelAir Habitat",
      from_name: `${submittedInfo.firstName} ${submittedInfo.lastName}`,
      from_email: submittedInfo.email,
      phone: submittedInfo.phone,
      city: submittedInfo.city,
      property_type: propertyType,
      finish_level: finishLevel,
      total_rooms: rooms.length,
      total_ht: `${calculationResult.totalHT.toFixed(2)} €`,
      duration: calculationResult.duration,
      project_details: submittedInfo.projectDetails,
      message: fullDetails,
      rooms_summary: fullDetails
    };

    window.emailjs.send(
      EMAILJS_CONFIG.SERVICE_ID,
      EMAILJS_CONFIG.TEMPLATE_ID,
      templateParams,
      EMAILJS_CONFIG.PUBLIC_KEY
    ).catch((err: any) => console.error("Email error", err));

    setStep(5);
    window.scrollTo(0, 0);
  };

  useEffect(() => {
    // 1. Initial Load: Preload lightweight assets or critical data if needed

    // 2. Delayed Preload: Load Calendly script after 3 seconds so it doesn't slow down the first paint
    // This allows the "Upper Option" (Header button) to become fast quickly without blocking startup.
    const timer = setTimeout(() => {
      requestAnimationFrame(() => preloadCalendly());
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  const handleNextStep = useCallback(() => {
    if (step === 3 && rooms.length === 0) {
      alert("Veuillez ajouter au moins une pièce.");
      return;
    }

    // Aggressive Preload: Start loading Calendly as soon as they go to Contact step
    if (step === 3) {
      requestAnimationFrame(() => preloadCalendly());
    }

    setStep(s => s + 1);
    scrollToTop();
  }, [step, rooms.length]);

  const handleNewQuote = useCallback(() => {
    if (window.confirm("Tout effacer et recommencer ?")) {
      setRooms([]);
      setUserInfo({ firstName: '', lastName: '', email: '', phone: '', city: '', startDate: '', projectDetails: '', providesMaterials: false });
      setQuoteRef('');
      setStep(1);
      scrollToTop();
    }
  }, []);

  return (
    <div className="min-h-screen bg-slate-50 font-sans pb-24 text-slate-900 selection:bg-brand-900 selection:text-white will-change-transform">

      <header className="bg-white/90 backdrop-blur-xl sticky top-0 z-30 border-b border-slate-200 shadow-sm transition-all duration-300">
        <div className="max-w-5xl mx-auto px-4 h-16 md:h-20 flex items-center justify-between">
          <div className="flex items-center gap-3 cursor-pointer touch-manipulation" onClick={() => setStep(1)}>
            <BelAirLogo />
          </div>

          <div className="flex items-center gap-2 md:gap-4">
            {step > 1 && !editingRoomId && (
              <div className="hidden md:flex flex-col items-end mr-2">
                <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Budget Estimé</span>
                <span className="text-lg font-bold text-brand-900">
                  {calculationResult.totalHT.toLocaleString('fr-FR', { maximumFractionDigits: 0 })} €
                </span>
              </div>
            )}

            <a href="tel:0980801214" className="flex items-center justify-center w-10 h-10 rounded-full bg-white border border-slate-200 text-slate-700 hover:border-brand-600 hover:text-brand-900 transition-all touch-manipulation" title="Appeler">
              <Phone size={20} />
            </a>

            <button
              onClick={() => openCalendlyPopup(CALENDLY_URL)}
              className="bg-white text-brand-900 border-2 border-gold-400 px-3 py-2 md:px-5 md:py-2.5 rounded-full font-bold text-xs md:text-sm hover:bg-gold-50 hover:shadow-glow transition-all shadow-sm flex items-center gap-2 touch-manipulation"
            >
              <Calendar size={16} className="text-gold-600" />
              <span className="hidden sm:inline">Rendez-vous</span>
            </button>
          </div>
        </div>
      </header>

      {editingRoom && propertyType && (
        <Suspense fallback={<div className="fixed inset-0 bg-white/80 z-50 flex items-center justify-center"><Loader2 className="animate-spin text-brand-600" size={40} /></div>}>
          <RoomEditor
            room={editingRoom}
            propertyType={propertyType}
            onClose={() => setEditingRoomId(null)}
            onReset={handleResetRoom}
            onCopyToSameType={handleCopyToSameType}
            onRename={handleRenameRoom}
            onUpdateArea={handleUpdateArea}
            onUpdateHeight={handleUpdateHeight}
            onToggleService={handleToggleService}
            onUpdateSupply={handleUpdateSupply}
          />
        </Suspense>
      )}

      <main className="max-w-5xl mx-auto px-4 py-8 md:py-12">

        {step === 1 && (
          <div className="animate-in fade-in slide-in-from-bottom-4 duration-150 will-change-transform">
            <h1 className="text-3xl md:text-4xl font-serif font-bold text-center text-brand-900 mb-4 leading-tight">
              Quel type de bien <br className="md:hidden" /> souhaitez-vous rénover ?
            </h1>
            <p className="text-center text-slate-500 mb-10 max-w-lg mx-auto">
              Sélectionnez la catégorie correspondant à votre projet.
            </p>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {Object.values(PropertyType).map((type) => {
                const Icon = PROPERTY_ICONS[type];
                return (
                  <button
                    key={type}
                    onClick={() => handlePropertySelect(type)}
                    className="group relative flex flex-col items-center justify-center p-6 md:p-8 bg-white rounded-2xl shadow-sm hover:shadow-xl border border-slate-200 hover:border-brand-600 transition-all duration-300 hover:-translate-y-1 text-center touch-manipulation"
                  >
                    <div className="w-14 h-14 bg-slate-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-brand-900 group-hover:text-white transition-colors relative z-10 text-brand-700">
                      <Icon size={28} />
                    </div>
                    <span className="text-base md:text-lg font-bold text-brand-900 leading-tight relative z-10">{type}</span>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="animate-in fade-in slide-in-from-bottom-4 duration-150 will-change-transform">
            <button onClick={() => setStep(1)} className="text-slate-400 hover:text-slate-600 mb-6 flex items-center gap-2 text-sm font-medium touch-manipulation">
              <ArrowRight className="rotate-180" size={16} /> Retour
            </button>

            <h1 className="text-2xl md:text-3xl font-serif font-bold text-center text-slate-900 mb-4">
              Quel est votre objectif ?
            </h1>
            <p className="text-center text-slate-500 mb-10">
              Cela nous aide à ajuster les gammes de matériaux.
            </p>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {Object.values(FinishLevel).map((level) => {
                const isPrestige = level === FinishLevel.PRESTIGE;
                const isRental = level === FinishLevel.RENTAL;

                // CLEAN WHITE LUXURY DESIGN
                // All cards are White Background with Dark Text.
                // Differentiation comes from Borders and Icon Colors.

                let cardClasses = "";
                let iconClasses = "";
                let titleClasses = "text-brand-900"; // Always Dark Navy
                let descClasses = "text-slate-500";  // Always Slate Grey

                if (isPrestige) {
                  // Prestige: Gold Border, Gold Icon, Subtle Gold Glow
                  cardClasses = "bg-white border-2 border-gold-400 shadow-glow scale-[1.02] ring-0";
                  iconClasses = "bg-gold-50 text-gold-600";
                } else if (isRental) {
                  // Rental: Green Border
                  cardClasses = "bg-white border border-emerald-200 hover:border-emerald-400 hover:shadow-lg";
                  iconClasses = "bg-emerald-50 text-emerald-600";
                } else {
                  // Standard: Slate/Blue Border
                  cardClasses = "bg-white border border-slate-200 hover:border-brand-500 hover:shadow-lg";
                  iconClasses = "bg-slate-50 text-brand-600";
                }

                return (
                  <button
                    key={level}
                    onClick={() => handleFinishSelect(level)}
                    className={`flex flex-col items-start p-8 rounded-2xl transition-all duration-300 text-left group h-full justify-between touch-manipulation relative overflow-hidden ${cardClasses}`}
                  >
                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shrink-0 ${iconClasses} transition-colors`}>
                      {isPrestige ? <Zap size={28} /> : isRental ? <Leaf size={28} /> : <Home size={28} />}
                    </div>

                    <div className="w-full">
                      <span className={`block text-xl font-serif font-bold mb-2 ${titleClasses}`}>
                        {getFinishLabel(level, propertyType)}
                      </span>
                      <span className={`block text-sm leading-relaxed ${descClasses}`}>
                        {getFinishDescription(level, propertyType)}
                      </span>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {step === 3 && !editingRoomId && (
          <div className="animate-in fade-in slide-in-from-bottom-4 duration-150 max-w-3xl mx-auto will-change-transform">
            <div className="flex items-center justify-between mb-6">
              <button onClick={() => setStep(2)} className="text-slate-400 hover:text-slate-600 flex items-center gap-2 text-sm font-medium touch-manipulation">
                <ArrowRight className="rotate-180" size={16} /> Retour
              </button>
              <div className="flex flex-col items-end">
                <span className="text-xs font-bold uppercase text-slate-400">Total estimé</span>
                <span className="text-2xl font-bold text-brand-800">{calculationResult.totalHT.toLocaleString('fr-FR', { maximumFractionDigits: 0 })} €</span>
                <span className="text-xs font-medium text-slate-500 mt-1 flex items-center gap-1">
                  <span className="opacity-70">⏱️</span> {calculationResult.duration}
                </span>
              </div>
            </div>

            <h1 className="text-2xl md:text-3xl font-serif font-bold text-center text-slate-900 mb-8">
              Définissons votre projet
            </h1>

            <div className="space-y-4 mb-12">
              {/* Note: Suspense is removed because RoomSummaryCard is now imported synchronously for speed */}
              {rooms.map((room) => (
                <RoomSummaryCard
                  key={room.id}
                  room={room}
                  finishLevel={finishLevel}
                  servicesLut={servicesLut}
                  onEdit={setEditingRoomId}
                  onDelete={handleDeleteRoom}
                  onDuplicate={handleDuplicateRoom}
                />
              ))}

              {rooms.length === 0 && (
                <div className="text-center py-16 bg-white rounded-xl border-2 border-dashed border-slate-200">
                  <div className="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-300">
                    <LayoutGrid size={32} />
                  </div>
                  <p className="text-slate-500 font-medium">Commencez par ajouter une pièce</p>
                </div>
              )}
            </div>

            <div className="bg-slate-900 text-white p-4 md:p-6 rounded-2xl shadow-xl">
              <p className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-4 text-center">Ajouter une pièce</p>
              <div className="flex overflow-x-auto gap-4 pb-2 scrollbar-hide snap-x snap-mandatory">
                {(propertyType ? PROPERTY_ROOM_MAPPING[propertyType] : []).map(type => {
                  const Icon = roomIcons[type] || Loader2;
                  return (
                    <button
                      key={type}
                      onClick={() => handleRoomAdd(type)}
                      className="snap-center flex flex-col items-center justify-center gap-2 min-w-[80px] p-2 hover:bg-slate-800 rounded-lg transition-colors group shrink-0 touch-manipulation"
                    >
                      <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center group-hover:bg-blue-600 transition-colors border border-slate-700 group-hover:border-blue-500">
                        <Icon size={18} className={!roomIcons[type] ? "animate-spin text-slate-500" : ""} />
                      </div>
                      <span className="text-[10px] text-center font-medium leading-tight whitespace-nowrap">{type.split('/')[0]}</span>
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="h-24"></div>

            <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 p-4 shadow-lg z-40">
              <div className="max-w-3xl mx-auto flex items-center justify-between">
                <div className="hidden sm:block">
                  <div className="flex items-center gap-4">
                    <div>
                      <span className="text-xs text-slate-500 uppercase font-bold block">Budget Estimé</span>
                      <span className="text-xl font-bold text-slate-900">
                        {calculationResult.minBudget.toLocaleString('fr-FR', { maximumFractionDigits: 0 })} - {calculationResult.maxBudget.toLocaleString('fr-FR', { maximumFractionDigits: 0 })} €
                      </span>
                    </div>
                    <div className="h-8 w-px bg-slate-200"></div>
                    <div>
                      <span className="text-xs text-slate-500 uppercase font-bold block">Durée</span>
                      <span className="text-base font-bold text-slate-700">
                        {calculationResult.duration || "N/A"}
                      </span>
                    </div>
                  </div>
                </div>
                <button
                  onClick={() => setStep(4)}
                  disabled={rooms.length === 0}
                  className="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-blue-500 text-white px-8 py-3 rounded-full font-bold hover:shadow-glow hover:scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-lg shadow-blue-500/20 touch-manipulation"
                >
                  <span>Voir mon estimation</span>
                  <ArrowRight size={20} />
                </button>
              </div>
            </div>
          </div>
        )}

        {step === 4 && (
          <Suspense fallback={<div className="flex justify-center p-12"><Loader2 className="animate-spin text-blue-600" size={40} /></div>}>
            <ContactStep
              initialUserInfo={userInfo}
              onSubmit={handleContactSubmit}
              onBack={() => setStep(3)}
            />
          </Suspense>
        )}

        {step === 5 && (
          <Suspense fallback={<div className="flex justify-center p-12"><Loader2 className="animate-spin text-blue-600" size={40} /></div>}>
            <PrintQuote
              userInfo={userInfo}
              propertyType={propertyType}
              rooms={rooms}
              calculationResult={calculationResult}
              finishLevel={finishLevel}
              quoteRef={quoteRef}
              onEdit={() => setStep(3)}
              onNewQuote={handleNewQuote}
            />
          </Suspense>
        )}

      </main>

      {showScrollTop && !editingRoomId && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-24 right-6 bg-slate-900 text-white p-3 rounded-full shadow-lg hover:bg-slate-800 transition-all z-50 md:bottom-10 animate-in fade-in slide-in-from-bottom-2 will-change-transform touch-manipulation"
          title="Remonter en haut"
        >
          <ArrowUp size={20} />
        </button>
      )}

    </div>
  );
}

export default App;