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,
  WASTE_PRICE_PER_M3,
  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, CATEGORY_ORDER } from "./services";
import emailjs from "@emailjs/browser";
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 ---

// Waste Volume Factors (m3 per unit)
const WASTE_VOLUME_FACTORS: Record<string, number> = {
  // Flooring
  demo_floor_tile: 0.04,
  demo_floor_wood: 0.03,
  demo_carpet_vinyl: 0.01,

  // Walls & Ceilings
  demo_wall_tile: 0.03,
  demo_wall_paper: 0.005,
  demo_wall_crepi: 0.01,
  demo_partition: 0.08,
  demo_ceiling_false: 0.05,

  // Fixtures
  demo_kitchen_total: 3.5,
  demo_fireplace: 1.5,
  demo_sanitary: 0.3, // Bath, WC
  demo_water_heater: 0.4,
  demo_radiator: 0.1,

  // Joinery
  demo_door_internal: 0.15,
  demo_window: 0.15,
  demo_cupboard: 0.1,
  demo_terrace: 0.1,
  demo_elec_light: 0.02,
};

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;
    let totalWasteVolume = 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;

          // Calculate Waste Volume
          if (service.category === "Démolition / Dépose") {
            const factor = WASTE_VOLUME_FACTORS[service.id] || 0.02; // Default fallback
            totalWasteVolume += quantity * factor;
          }
        }
      });
    });

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

    categoryBreakdown["Installation & Protection"] = protectionCost;

    const wasteCost = Math.ceil(totalWasteVolume) * WASTE_PRICE_PER_M3;
    if (wasteCost > 0) {
      totalHT += wasteCost;
      categoryBreakdown["Évacuation & Traitement Déchets"] = wasteCost;
    }

    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.2;

    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}`,
      "",
      "--- RÉPARTITION PAR LOTS ---",
      ...Object.entries(calculationResult.categoryBreakdown)
        .sort(([, a], [, b]) => (b as number) - (a as number))
        .map(([cat, amount]) => {
          const percent = (
            ((amount as number) / calculationResult.totalHT) *
            100
          ).toFixed(1);
          return `${cat} : ${(amount as number).toLocaleString("fr-FR", { minimumFractionDigits: 2 })} € (${percent}%)`;
        }),
      "",
      "--- DÉTAIL DES PIÈCES ET PRESTATIONS ---",
      ...rooms.map((r) => {
        const servicesList = Object.entries(r.selectedServices)
          .map(([id, qty]) => ({ id, qty, s: servicesLut[id] }))
          .filter((item) => item.s)
          .sort((a, b) => {
            const idxA = CATEGORY_ORDER.indexOf(a.s!.category);
            const idxB = CATEGORY_ORDER.indexOf(b.s!.category);
            return (idxA === -1 ? 999 : idxA) - (idxB === -1 ? 999 : idxB);
          })
          .map(({ id, qty, s }) => {
            let quantity: number = Number(qty);
            if (s!.unit === "m2" && !s!.allowQuantity) {
              if (s!.target === "wall") quantity = r.wallArea;
              else if (s!.target === "ceiling") quantity = r.ceilingArea;
              else quantity = r.floorArea;
            }

            const defaultSupply = s!.supplyPrice || 0;
            const customSupplyData = r.customSupplyValues?.[id];
            const finalSupply = customSupplyData
              ? customSupplyData.price
              : defaultSupply;
            const baseLabor = s!.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;

            const description = s!.description
              ? `\n     > ${s!.description}`
              : "";
            return `   - ${s!.label} (${quantity} ${s!.unit}) : ${lineTotal.toLocaleString("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} € HT${description}`;
          });

        const servicesText =
          servicesList.length > 0
            ? servicesList.join("\n")
            : "   - Aucune prestation spécifique sélectionnée (uniquement protection standard)";

        return `PIÈCE : ${r.customLabel || r.type} (${r.floorArea}m²)\n${servicesText}`;
      }),
      "",
      "* Ce devis est une estimation automatique. Le montant final sera validé après visite technique.",
      "",
      "--- BUDGET ESTIMÉ ---",
      `Total HT : ${calculationResult.totalHT.toLocaleString("fr-FR")} €`,
      `TVA (${(calculationResult.vatRate * 100).toFixed(0)}%) : ${(calculationResult.totalHT * calculationResult.vatRate).toLocaleString("fr-FR")} €`,
      `Total TTC : ${calculationResult.totalTTC.toLocaleString("fr-FR")} €`,
    ]
      .filter(Boolean)
      .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,
    };

    emailjs
      .send(
        EMAILJS_CONFIG.SERVICE_ID,
        EMAILJS_CONFIG.TEMPLATE_ID,
        templateParams,
        EMAILJS_CONFIG.PUBLIC_KEY,
      )
      .then(() => {
        setStep(5);
        window.scrollTo(0, 0);
      })
      .catch((err: any) => {
        console.error("Email error", err);
        alert("Erreur lors de l'envoi du devis. Veuillez réessayer.");
      });
  };

  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(() => {
    // Immediate reset: Clear all data and go back to start
    setRooms([]);
    setUserInfo({
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      city: "",
      startDate: "",
      projectDetails: "",
      providesMaterials: false,
    });
    setQuoteRef("");
    setPropertyType(null);
    setFinishLevel(FinishLevel.STANDARD);
    setEditingRoomId(null);
    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 />
            <span className="text-[10px] text-slate-400 font-mono mt-1">
              v2025.1
            </span>
          </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;