[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # local env files .env*.local # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Kids Actvity Platform - Backend *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/junglebabydevs-projects/v0-ja-cademy) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/96h6qiUQROi) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/junglebabydevs-projects/v0-ja-cademy](https://vercel.com/junglebabydevs-projects/v0-ja-cademy)** ## Build your app Continue building your app on: **[https://v0.app/chat/96h6qiUQROi](https://v0.app/chat/96h6qiUQROi)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/[merchantName]/checkout/page.tsx" isMerged="true" "use client"; import { useState, useEffect } from "react"; import { useSearchParams, useRouter, useParams } from "next/navigation"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { ArrowLeft, Download } from "lucide-react"; import Link from "next/link"; import { API_BASE_URL } from "@/lib/api/config"; import { getMerchantId } from "@/lib/utils/merchant"; import { Skeleton } from "@/components/ui/skeleton"; export default function CheckoutPage() { const params = useParams(); const searchParams = useSearchParams(); const router = useRouter(); const merchantName = (params?.merchantName as string) || "mygym"; const registrationId = searchParams.get("registrationId"); const registrationID = searchParams.get("registrationID"); const locationId = searchParams.get("locationId"); const productId = searchParams.get("productId"); const childFullName = searchParams.get("childFullName"); const productName = searchParams.get("productName") || searchParams.get("className") || "Class"; const locationName = searchParams.get("locationName"); const price = searchParams.get("price"); const priceType = searchParams.get("priceType"); const classId = searchParams.get("classId") || ""; const [registrationData, setRegistrationData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [merchantId, setMerchantId] = useState(null); // Get merchant ID useEffect(() => { const fetchMerchantId = async () => { const normalizedName = merchantName.toLowerCase(); const merchantIdMap: Record = { mygym: 2, kidscamp: 3, "kids camp": 3, }; if (merchantIdMap[normalizedName]) { setMerchantId(merchantIdMap[normalizedName]); } else { const storedMerchantId = getMerchantId(); if (storedMerchantId) { setMerchantId(storedMerchantId); } } }; fetchMerchantId(); }, [merchantName]); // Build registration data from query params and session storage useEffect(() => { const loadRegistrationData = async () => { if (!registrationId || !merchantId) { setIsLoading(false); return; } try { setIsLoading(true); setError(null); // Get booking details from session storage let bookingDetails: any = null; if (typeof window !== "undefined") { try { const bookingDetailsStr = sessionStorage.getItem("bookingDetails"); if (bookingDetailsStr) { bookingDetails = JSON.parse(bookingDetailsStr); } } catch (err) { console.warn( "Could not read booking details from session storage:", err ); } } // Build registration data from query params and session storage const registrationDataFromParams: any = { registrationID: registrationID || registrationId, childFullName: childFullName || "N/A", product: productName || bookingDetails?.productName ? { name: productName || bookingDetails.productName } : null, location: locationName || bookingDetails?.locationName ? { name: locationName || bookingDetails.locationName } : null, pricing: null, }; // Get price from query params, session storage, or try to fetch let finalPrice = price; let finalPriceType = priceType; if ( bookingDetails?.price !== null && bookingDetails?.price !== undefined ) { finalPrice = bookingDetails.price; finalPriceType = bookingDetails.priceType; } if (finalPrice) { registrationDataFromParams.pricing = { price: Number(finalPrice), priceType: finalPriceType || undefined, }; } else if (productId) { // Fallback: Try to fetch pricing from API if not in session storage or query params try { const pricingResponse = await fetch( `${API_BASE_URL}/products/${productId}/pricing?onlyPublic=true` ); if (pricingResponse.ok) { const pricingData = await pricingResponse.json(); const pricings = Array.isArray(pricingData.data) ? pricingData.data : Array.isArray(pricingData) ? pricingData : [pricingData.data || pricingData]; const pricing = pricings.find((p: any) => p.isPublic && !p.isArchived) || pricings.find((p: any) => p.isRecommended) || pricings[0]; if (pricing) { registrationDataFromParams.pricing = { price: Number(pricing.price), priceType: pricing.priceType || undefined, }; } } } catch (err) { console.warn("Could not fetch pricing details:", err); } } // Try to fetch product name if we have productId but not productName (public endpoint) if (productId && !productName && !bookingDetails?.productName) { try { const productResponse = await fetch( `${API_BASE_URL}/products/${productId}` ); if (productResponse.ok) { const productData = await productResponse.json(); registrationDataFromParams.product = { name: productData.data?.name || productData.name || "N/A", }; } } catch (err) { console.warn("Could not fetch product details:", err); } } setRegistrationData(registrationDataFromParams); } catch (err: any) { console.error("Error loading registration:", err); setError(err.message || "Failed to load registration details"); } finally { setIsLoading(false); } }; loadRegistrationData(); }, [ registrationId, merchantId, locationId, productId, registrationID, childFullName, productName, locationName, price, priceType, ]); // QR code URL using registrationID as reference const qrReference = registrationData?.registrationID || registrationID || registrationId || "DUMMY"; const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=PAYNOW+${qrReference}`; const handleDownloadQR = () => { const link = document.createElement("a"); link.href = qrCodeUrl; link.download = "paynow-qr-code.png"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return (

{/* Header */}

{merchantName.charAt(0).toUpperCase()}

{merchantName}

Choose Payment Method

Payment will be made to 'Xfers Pte Ltd.' on behalf of Xfers Test Business

{/* Registration Details */} {isLoading ? (

) : error ? (

{error}

) : registrationData ? (

Registration Details

Product: {registrationData.product?.name || "N/A"}

Location: {registrationData.location?.name || "N/A"}

Student Name: {registrationData.childFullName || "N/A"}

{registrationData.pricing?.price && (

Price: ${registrationData.pricing.price} {registrationData.pricing.priceType ? ` (${registrationData.pricing.priceType})` : ""}

)}

Reference: {registrationData.registrationID || "N/A"}

) : null} {/* Payment Method Selection */}

PayNow

{/* Note Section */}

Note:

If you're on desktop, scan the QR code with your ibanking app. If you're accessing the page on mobile, follow the instructions below.

Click on save image button.
Go to your ibanking app.
Upload your QR code and make the payment.

{/* QR Code */}

); } [V0_FILE]typescriptreact:file="app/[merchantName]/layout.tsx" isMerged="true" import type { Metadata } from "next"; // Helper function to format merchant name for display function formatMerchantName(merchantName: string): string { const normalized = merchantName.toLowerCase(); // Handle special cases if (normalized === "kidscamp" || normalized === "kids camp") { return "KidsCamp"; } if (normalized === "mygym" || normalized === "my gym") { return "MyGym"; } // Default: capitalize first letter of each word return normalized .split(/[\s-]+/) .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(" "); } export async function generateMetadata({ params, }: { params: Promise<{ merchantName: string }>; }): Promise { const { merchantName } = await params; const displayName = formatMerchantName(merchantName || "MyGym"); return { title: `Activities - ${displayName} | Learn. Play. Grow!`, description: `Discover exciting classes and enrichment programmes at ${displayName} designed to spark curiosity, creativity, and confidence in children of all ages. Explore our wide range of classes across multiple locations.`, keywords: [ displayName, "classes", "enrichment programmes", "children activities", "learning", "play", "grow", ], openGraph: { title: `Activities - ${displayName} | Learn. Play. Grow!`, description: `Discover exciting classes and enrichment programmes at ${displayName} designed to spark curiosity, creativity, and confidence in children of all ages.`, type: "website", }, twitter: { card: "summary_large_image", title: `Activities - ${displayName} | Learn. Play. Grow!`, description: `Discover exciting classes and enrichment programmes at ${displayName} designed to spark curiosity, creativity, and confidence in children of all ages.`, }, }; } export default function MyGymLayout({ children, }: { children: React.ReactNode; }) { return children; } [V0_FILE]typescriptreact:file="app/[merchantName]/page.tsx" isMerged="true" "use client"; import { useState, useEffect } from "react"; import Link from "next/link"; import { useParams } from "next/navigation"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Skeleton } from "@/components/ui/skeleton"; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "@/components/ui/sheet"; import { API_BASE_URL } from "@/lib/api/config"; import { Users, Clock, Calendar, CalendarCheck, GraduationCap, Sparkles, Search, } from "lucide-react"; import Image from "next/image"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { DatePicker } from "@/components/ui/date-picker"; import { useMemo } from "react"; import { format, isWithinInterval, startOfDay, endOfDay } from "date-fns"; interface Location { id: number; name: string; } interface ClassDetail { id: number; classID: string; productId: number; product?: { id: number; name: string; description?: string; productType?: string; ageMin?: number; ageMax?: number; }; duration?: number; maxCapacity?: number; [key: string]: unknown; } interface Schedule { id: number; scheduleID?: string; productId?: number; dayOfWeek?: number; startTime?: string; endTime?: string; scheduleType?: string; recurrenceRule?: string; maxCapacity?: number; specificDate?: string; specificStartTime?: string; specificEndTime?: string; rangeStartDate?: string; rangeEndDate?: string; [key: string]: unknown; } const dayNumberToName: { [key: number]: string } = { 0: "Sunday", 1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday", }; // Mapping from merchantName to locations (can be enhanced to fetch from API) const MERCHANT_LOCATIONS: Record = { mygym: [ { id: 7, name: "Tampines" }, { id: 8, name: "Jurong East" }, { id: 9, name: "Great World" }, { id: 10, name: "Punggol" }, ], kidscamp: [ { id: 11, name: "Fort Canning" }, { id: 12, name: "Sentosa" }, { id: 14, name: "East Coast" }, { id: 13, name: "Kidscamp@Holland International School" }, ], lil_ninja_academy: [{ id: 15, name: "Orchard" }], // Add more merchants as needed }; interface CampDetail { id: number; name: string; description?: string; product?: { id: number; name: string; description?: string; productType?: string; ageMin?: number; ageMax?: number; }; campDetails?: { name?: string; description?: string; }; [key: string]: unknown; } interface BirthdayDetail { id: number; productId?: number; product?: { id: number; name: string; description?: string; productType?: string; ageMin?: number; ageMax?: number; isPublished?: boolean; isArchived?: boolean; }; venueType?: string; durationMinutes?: number; minKids?: number; maxKids?: number; minParents?: number; maxParents?: number; whatsIncluded?: string; cancellationPolicy?: string; [key: string]: unknown; } export default function ClassesPage() { // For static route (mygym), default to "mygym"; for dynamic route, use params from URL const params = useParams(); const merchantName = ((params as any)?.merchantName as string) || ((params as any)?.merchant as string) || "mygym"; const [merchantData, setMerchantData] = useState<{ name?: string; locations?: Location[]; } | null>(null); const merchantDisplayName = useMemo(() => { const raw = (merchantData?.name || merchantName || "").toString(); const cleaned = raw.replace(/_/g, " ").trim(); if (!cleaned) return "Merchant"; // Title Case words (preserve numbers) return cleaned .split(/\s+/) .map((word) => word.length === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() ) .join(" "); }, [merchantData?.name, merchantName]); const [isLoadingMerchant, setIsLoadingMerchant] = useState(true); const [locations, setLocations] = useState([]); // Fetch merchant data and locations for kidscamp useEffect(() => { const fetchMerchantData = async () => { // For kidscamp, fetch merchant data with locations from API const normalizedName = merchantName.toLowerCase(); if ( normalizedName === "kidscamp" || normalizedName === "kids camp" || normalizedName === "kidscampsingapore" ) { try { setIsLoadingMerchant(true); // Try to get merchant ID from localStorage if available const { getMerchantId } = await import("@/lib/utils/merchant"); const merchantId = getMerchantId(); if (merchantId) { // Make public API call (no authentication required for listing page) const url = `${API_BASE_URL}/merchants/${merchantId}?locations=true`; const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (response.ok) { const data = await response.json(); // Handle both wrapped and unwrapped responses const merchantData = data.data || data; setMerchantData(merchantData); // Extract locations from API response if ( merchantData.locations && Array.isArray(merchantData.locations) ) { const apiLocations: Location[] = merchantData.locations .filter( (loc: any) => loc.isActive !== false && loc.isArchived !== true ) // Only active, non-archived locations .map((loc: any) => ({ id: loc.id, name: loc.name || "", })); // Use API locations if we got at least one, otherwise fallback if (apiLocations.length > 0) { setLocations(apiLocations); // Set first location as selected for kidscamp if (apiLocations[0]?.id) { setSelectedLocationId(apiLocations[0].id); } } else { const fallbackLocations = MERCHANT_LOCATIONS["kidscamp"] || []; setLocations(fallbackLocations); // Set first location as selected for kidscamp if (fallbackLocations[0]?.id) { setSelectedLocationId(fallbackLocations[0].id); } } } else { // Fallback to hardcoded locations const fallbackLocations = MERCHANT_LOCATIONS["kidscamp"] || []; setLocations(fallbackLocations); // Set first location as selected for kidscamp if (fallbackLocations[0]?.id) { setSelectedLocationId(fallbackLocations[0].id); } } } else { // Fallback to hardcoded locations const fallbackLocations = MERCHANT_LOCATIONS["kidscamp"] || []; setLocations(fallbackLocations); // Set first location as selected for kidscamp if (fallbackLocations[0]?.id) { setSelectedLocationId(fallbackLocations[0].id); } } } else { // Fallback to hardcoded locations if merchant ID not available const fallbackLocations = MERCHANT_LOCATIONS["kidscamp"] || []; setLocations(fallbackLocations); // Set first location as selected for kidscamp if (fallbackLocations[0]?.id) { setSelectedLocationId(fallbackLocations[0].id); } } } catch (err) { console.error("Error fetching merchant data:", err); // Fallback to hardcoded locations setLocations(MERCHANT_LOCATIONS["kidscamp"] || []); } finally { setIsLoadingMerchant(false); } } else { // For other merchants, use hardcoded locations const key = normalizedName.replace(/\s+/g, "_"); setLocations(MERCHANT_LOCATIONS[key] || []); setIsLoadingMerchant(false); } }; fetchMerchantData(); }, [merchantName]); const [activeTab, setActiveTab] = useState<"classes" | "camp" | "birthday">( "classes" ); const [selectedLocationId, setSelectedLocationId] = useState( null ); const [hasManuallySelectedTab, setHasManuallySelectedTab] = useState(false); // Set default location when locations are loaded useEffect(() => { if (locations.length > 0 && selectedLocationId === null) { const normalizedName = merchantName.toLowerCase(); // For mygym, set "Great World" (id: 9) as default if (normalizedName === "mygym") { const greatWorld = locations.find((loc) => loc.id === 9); if (greatWorld) { setSelectedLocationId(greatWorld.id); } else { // Fallback to first location if Great World not found setSelectedLocationId(locations[0].id); } } else if (normalizedName === "lil_ninja_academy") { // For Lil Ninja Academy, default to Orchard (id: 15) const orchard = locations.find((loc) => loc.id === 15); setSelectedLocationId(orchard?.id || locations[0].id); } else { // For other merchants, use first location setSelectedLocationId(locations[0].id); } } }, [locations, selectedLocationId, merchantName]); const [classes, setClasses] = useState([]); const [camps, setCamps] = useState([]); const [birthdays, setBirthdays] = useState([]); const [isLoading, setIsLoading] = useState(false); const [isLoadingCamps, setIsLoadingCamps] = useState(false); const [isLoadingBirthdays, setIsLoadingBirthdays] = useState(false); // Track if we've loaded classes, camps, and birthdays for the current location const [hasClassesForLocation, setHasClassesForLocation] = useState(false); const [hasCampsForLocation, setHasCampsForLocation] = useState(false); const [hasBirthdaysForLocation, setHasBirthdaysForLocation] = useState(false); // Update hasClasses/hasCamps/hasBirthdays flags when data changes useEffect(() => { setHasClassesForLocation(classes.length > 0); }, [classes]); useEffect(() => { setHasCampsForLocation(camps.length > 0); }, [camps]); useEffect(() => { setHasBirthdaysForLocation(birthdays.length > 0); }, [birthdays]); // Set default tab when location changes: if no classes, default to camp or birthday useEffect(() => { if (selectedLocationId) { // Reset flags when location changes setHasClassesForLocation(false); setHasCampsForLocation(false); setHasBirthdaysForLocation(false); // Reset manual selection flag when location changes setHasManuallySelectedTab(false); } }, [selectedLocationId]); // Update tab when classes/camps/birthdays availability changes after loading // Only set default tab if user hasn't manually selected one useEffect(() => { if ( selectedLocationId && !isLoading && !isLoadingCamps && !isLoadingBirthdays && !hasManuallySelectedTab ) { if ( !hasClassesForLocation && hasCampsForLocation && !hasBirthdaysForLocation ) { setActiveTab("camp"); } else if ( !hasClassesForLocation && !hasCampsForLocation && hasBirthdaysForLocation ) { setActiveTab("birthday"); } else if ( hasClassesForLocation && !hasCampsForLocation && !hasBirthdaysForLocation ) { setActiveTab("classes"); } else if (hasClassesForLocation) { setActiveTab("classes"); } } }, [ hasClassesForLocation, hasCampsForLocation, hasBirthdaysForLocation, selectedLocationId, isLoading, isLoadingCamps, isLoadingBirthdays, hasManuallySelectedTab, ]); const [error, setError] = useState(null); const [campError, setCampError] = useState(null); const [birthdayError, setBirthdayError] = useState(null); const [searchQuery, setSearchQuery] = useState(""); const [selectedDate, setSelectedDate] = useState(""); const [filters, setFilters] = useState<{ age: string; category: string; }>({ age: "all", category: "all", }); const [selectedClass, setSelectedClass] = useState(null); const [isSheetOpen, setIsSheetOpen] = useState(false); const [selectedClassForDetails, setSelectedClassForDetails] = useState(null); const [isDetailsSheetOpen, setIsDetailsSheetOpen] = useState(false); const [selectedCampForDetails, setSelectedCampForDetails] = useState(null); const [isCampDetailsSheetOpen, setIsCampDetailsSheetOpen] = useState(false); const [campDetailsOptions, setCampDetailsOptions] = useState([]); const [isLoadingCampDetailsOptions, setIsLoadingCampDetailsOptions] = useState(false); const [campDetailsOptionsError, setCampDetailsOptionsError] = useState< string | null >(null); const [selectedBirthdayForDetails, setSelectedBirthdayForDetails] = useState(null); const [isBirthdayDetailsSheetOpen, setIsBirthdayDetailsSheetOpen] = useState(false); const [birthdayAddons, setBirthdayAddons] = useState([]); const [isLoadingBirthdayAddons, setIsLoadingBirthdayAddons] = useState(false); const [campOptionsByCampId, setCampOptionsByCampId] = useState< Record >({}); const [schedules, setSchedules] = useState([]); const [detailsSchedules, setDetailsSchedules] = useState([]); const [isLoadingSchedules, setIsLoadingSchedules] = useState(false); const [isLoadingDetailsSchedules, setIsLoadingDetailsSchedules] = useState(false); const [scheduleError, setScheduleError] = useState(null); const [detailsScheduleError, setDetailsScheduleError] = useState< string | null >(null); // Fetch classes when location is selected (always fetch to check availability) useEffect(() => { const fetchClasses = async () => { if (!selectedLocationId) { setClasses([]); return; } try { setIsLoading(true); setError(null); // Call the public API (no authentication required) const url = `${API_BASE_URL}/class-details?locationId=${selectedLocationId}&category=true&product=true`; const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error( errorData.message || "Failed to fetch classes. Please try again." ); } const data = await response.json(); const classesData = Array.isArray(data) ? data : data.data || []; setClasses(classesData); } catch (err: any) { console.error("Error fetching classes:", err); setError(err.message || "Failed to load classes. Please try again."); setClasses([]); } finally { setIsLoading(false); } }; fetchClasses(); }, [selectedLocationId]); // Fetch camps when location is selected (always fetch to check availability) useEffect(() => { const fetchCamps = async () => { if (!selectedLocationId) { setCamps([]); return; } try { setIsLoadingCamps(true); setCampError(null); // Call the public API (no authentication required) const url = `${API_BASE_URL}/camp-details?locationId=${selectedLocationId}&category=true&product=true`; const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error( errorData.message || "Failed to fetch camps. Please try again." ); } const data = await response.json(); const campsData = Array.isArray(data) ? data : data.data || []; setCamps(campsData); // Fetch first camp option for each camp to get correct age range // This is done in parallel for all camps const fetchCampOptionsPromises = campsData.map( async (camp: CampDetail) => { try { const optionsUrl = `${API_BASE_URL}/camps/${camp.id}/camp-options`; const optionsResponse = await fetch(optionsUrl, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (optionsResponse.ok) { const optionsData = await optionsResponse.json(); const options = Array.isArray(optionsData) ? optionsData : optionsData.data || []; return { campId: camp.id, options }; } return { campId: camp.id, options: [] }; } catch (err) { console.error( `Error fetching camp options for camp ${camp.id}:`, err ); return { campId: camp.id, options: [] }; } } ); const campOptionsResults = await Promise.all(fetchCampOptionsPromises); const optionsMap: Record = {}; campOptionsResults.forEach(({ campId, options }) => { optionsMap[campId] = options; }); setCampOptionsByCampId(optionsMap); } catch (err: any) { console.error("Error fetching camps:", err); setCampError(err.message || "Failed to load camps. Please try again."); setCamps([]); } finally { setIsLoadingCamps(false); } }; fetchCamps(); }, [selectedLocationId, activeTab]); // Fetch birthdays when location is selected (always fetch to check availability) useEffect(() => { const fetchBirthdays = async () => { if (!selectedLocationId) { setBirthdays([]); return; } try { setIsLoadingBirthdays(true); setBirthdayError(null); // Call the public API (no authentication required) const url = `${API_BASE_URL}/birthday-details?locationId=${selectedLocationId}&product=true&category=true`; const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error( errorData.message || "Failed to fetch birthdays. Please try again." ); } const data = await response.json(); const birthdaysData = Array.isArray(data) ? data : data.data || []; // Filter to only hide archived birthdays // Show all birthdays except those that are archived const activeBirthdays = birthdaysData.filter( (birthday: BirthdayDetail) => { const product = birthday.product || ({} as any); // Only hide if isArchived is explicitly true return product?.isArchived !== true; } ); setBirthdays(activeBirthdays); } catch (err: any) { console.error("Error fetching birthdays:", err); setBirthdayError( err.message || "Failed to load birthdays. Please try again." ); setBirthdays([]); } finally { setIsLoadingBirthdays(false); } }; fetchBirthdays(); }, [selectedLocationId, activeTab]); // Fetch schedules when sheet opens useEffect(() => { const fetchSchedules = async () => { if (!isSheetOpen || !selectedClass) { setSchedules([]); return; } const productId = selectedClass.productId || selectedClass.product?.id; if (!productId) { setSchedules([]); return; } try { setIsLoadingSchedules(true); setScheduleError(null); // Call the public API (no authentication required) const url = `${API_BASE_URL}/product/${productId}/schedules`; const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error( errorData.message || "Failed to fetch schedules. Please try again." ); } const data = await response.json(); const schedulesData = Array.isArray(data) ? data : data.data || []; setSchedules(schedulesData); } catch (err: any) { console.error("Error fetching schedules:", err); setScheduleError( err.message || "Failed to load schedules. Please try again." ); setSchedules([]); } finally { setIsLoadingSchedules(false); } }; fetchSchedules(); }, [isSheetOpen, selectedClass]); // Fetch schedules for details sheet useEffect(() => { const fetchDetailsSchedules = async () => { if (!isDetailsSheetOpen || !selectedClassForDetails) { setDetailsSchedules([]); return; } const productId = selectedClassForDetails.productId || selectedClassForDetails.product?.id; if (!productId) { setDetailsSchedules([]); return; } try { setIsLoadingDetailsSchedules(true); setDetailsScheduleError(null); // Call the public API (no authentication required) const url = `${API_BASE_URL}/product/${productId}/schedules`; const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error( errorData.message || "Failed to fetch schedules. Please try again." ); } const data = await response.json(); const schedulesData = Array.isArray(data) ? data : data.data || []; setDetailsSchedules(schedulesData); } catch (err: any) { console.error("Error fetching schedules:", err); setDetailsScheduleError( err.message || "Failed to load schedules. Please try again." ); setDetailsSchedules([]); } finally { setIsLoadingDetailsSchedules(false); } }; fetchDetailsSchedules(); }, [isDetailsSheetOpen, selectedClassForDetails]); // Fetch camp options for details sheet useEffect(() => { const fetchCampDetailsOptions = async () => { if (!isCampDetailsSheetOpen || !selectedCampForDetails) { setCampDetailsOptions([]); return; } const campId = selectedCampForDetails.id; if (!campId) { console.error("Camp ID is missing:", selectedCampForDetails); setCampDetailsOptions([]); return; } try { setIsLoadingCampDetailsOptions(true); setCampDetailsOptionsError(null); // Call the public API (no authentication required) const url = `${API_BASE_URL}/camps/${campId}/camp-options`; console.log("Fetching camp options from:", url); const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); console.error("Camp options API error:", errorData); throw new Error( errorData.message || "Failed to fetch camp options. Please try again." ); } const data = await response.json(); console.log("Camp options response:", data); // The API returns an array directly, not wrapped in { data: [...] } const optionsData = Array.isArray(data) ? data : data.data || []; console.log("Processed camp options:", optionsData); setCampDetailsOptions(optionsData); } catch (err: any) { console.error("Error fetching camp options:", err); setCampDetailsOptionsError( err.message || "Failed to load camp options. Please try again." ); setCampDetailsOptions([]); } finally { setIsLoadingCampDetailsOptions(false); } }; fetchCampDetailsOptions(); }, [isCampDetailsSheetOpen, selectedCampForDetails]); // Fetch birthday addons when details sheet opens useEffect(() => { const fetchBirthdayAddons = async () => { if (!isBirthdayDetailsSheetOpen || !selectedBirthdayForDetails) { setBirthdayAddons([]); return; } try { setIsLoadingBirthdayAddons(true); const productId = selectedBirthdayForDetails.productId || selectedBirthdayForDetails.product?.id; if (!productId) { setIsLoadingBirthdayAddons(false); return; } // Call the public API (no authentication required) const url = `${API_BASE_URL}/products/${productId}/birthday-addons`; const response = await fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, }); if (response.ok) { const data = await response.json(); const addonsData = Array.isArray(data) ? data : data.data || []; setBirthdayAddons(addonsData); } else { setBirthdayAddons([]); } } catch (err: any) { console.error("Error fetching birthday addons:", err); setBirthdayAddons([]); } finally { setIsLoadingBirthdayAddons(false); } }; fetchBirthdayAddons(); }, [isBirthdayDetailsSheetOpen, selectedBirthdayForDetails]); const handleViewSchedule = (classItem: ClassDetail) => { setSelectedClass(classItem); setIsSheetOpen(true); }; const handleViewDetails = (classItem: ClassDetail) => { setSelectedClassForDetails(classItem); setIsDetailsSheetOpen(true); }; const handleViewCampDetails = (camp: CampDetail) => { setSelectedCampForDetails(camp); setIsCampDetailsSheetOpen(true); }; const handleViewBirthdayDetails = (birthday: BirthdayDetail) => { setSelectedBirthdayForDetails(birthday); setIsBirthdayDetailsSheetOpen(true); }; const formatScheduleTime = (time?: string) => { if (!time) return ""; try { const [hours, minutes] = time.split(":"); const hour = parseInt(hours, 10); const ampm = hour >= 12 ? "PM" : "AM"; const hour12 = hour % 12 || 12; return `${hour12}:${minutes} ${ampm}`; } catch { return time; } }; // Helper function to check if age matches filter const matchesAgeFilter = ( filterAge: string, ageMin?: number, ageMax?: number ): boolean => { if (filterAge === "all") return true; // Convert age from months to years for comparison const minYears = ageMin ? Math.floor(ageMin / 12) : 0; const maxYears = ageMax ? Math.floor(ageMax / 12) : 0; // Parse filter range const [minFilter, maxFilter] = filterAge.split("-").map(Number); const hasMax = filterAge.includes("+"); if (hasMax) { // For "15+" filter, check if maxYears >= 15 return maxYears >= 15 || minYears >= 15; } else if (maxFilter !== undefined) { // For ranges like "0-3", "4-6", etc. // Check if there's any overlap between the class age range and filter range return ( (minYears <= maxFilter && maxYears >= minFilter) || (minYears >= minFilter && minYears <= maxFilter) || (maxYears >= minFilter && maxYears <= maxFilter) ); } return true; }; // Filter classes based on search and filters const filteredClasses = useMemo(() => { return classes.filter((classItem) => { const className = classItem.product?.name || ""; const description = classItem.product?.description || ""; const matchesSearch = searchQuery === "" || className.toLowerCase().includes(searchQuery.toLowerCase()) || description.toLowerCase().includes(searchQuery.toLowerCase()); // Age filter const ageMin = classItem.product?.ageMin; const ageMax = classItem.product?.ageMax; const matchesAge = matchesAgeFilter(filters.age, ageMin, ageMax); // Category filter (placeholder - add category data if available) const matchesCategory = filters.category === "all" || true; return matchesSearch && matchesAge && matchesCategory; }); }, [classes, searchQuery, filters]); // Filter camps based on search and filters const filteredCamps = useMemo(() => { return camps.filter((camp) => { const campName = camp.name || camp.product?.name || camp.campDetails?.name || ""; const description = camp.description || camp.product?.description || camp.campDetails?.description || ""; const matchesSearch = searchQuery === "" || campName.toLowerCase().includes(searchQuery.toLowerCase()) || description.toLowerCase().includes(searchQuery.toLowerCase()); // Age filter const ageMin = camp.product?.ageMin || (camp as any).ageMin; const ageMax = camp.product?.ageMax || (camp as any).ageMax; const matchesAge = matchesAgeFilter(filters.age, ageMin, ageMax); // Category filter (placeholder - add category data if available) const matchesCategory = filters.category === "all" || true; // Date filter - check if selected date falls within any camp option's date range const matchesDate = !selectedDate || (() => { try { const selectedDateObj = new Date(selectedDate + "T00:00:00"); if (isNaN(selectedDateObj.getTime())) return true; // Check if camp has direct startDate/endDate const startDate = (camp as any).startDate || (camp.campDetails as any)?.startDate; const endDate = (camp as any).endDate || (camp.campDetails as any)?.endDate; if (startDate && endDate) { const start = startOfDay(new Date(startDate)); const end = endOfDay(new Date(endDate)); return isWithinInterval(selectedDateObj, { start, end }); } // If no direct dates, check camp options (would need to fetch separately) // For now, if no dates available, show the camp return true; } catch { return true; } })(); return matchesSearch && matchesAge && matchesCategory && matchesDate; }); }, [camps, searchQuery, filters, selectedDate]); // Filter birthdays based on search and filters const filteredBirthdays = useMemo(() => { return birthdays.filter((birthday) => { const product = birthday.product || ({} as any); const name = product?.name || ""; const description = product?.description || ""; // Search filter const matchesSearch = name.toLowerCase().includes(searchQuery.toLowerCase()) || description.toLowerCase().includes(searchQuery.toLowerCase()); // Age filter const matchesAge = matchesAgeFilter( filters.age, product?.ageMin, product?.ageMax ); // Category filter (if needed, can be extended) const matchesCategory = filters.category === "all" || true; return matchesSearch && matchesAge && matchesCategory; }); }, [birthdays, searchQuery, filters]); const handleFilterChange = (key: string, value: string) => { setFilters((prev) => ({ ...prev, [key]: value })); }; return (

{/* Header */}

{merchantData?.name?.charAt(0).toUpperCase() || merchantName.charAt(0).toUpperCase()}

{merchantDisplayName}

{/* Hero Section */}

{/* Welcome Badge */}

Welcome to {merchantDisplayName}

{/* Main Heading */}

Learn. Play. Grow!

{/* Description */}

Exciting classes and enrichment programmes designed to spark curiosity, creativity, and confidence in children of all ages.

{/* Location Selection */}

Select Location

{locations.map((location) => ( ))}

{/* Tabs - Only show if location has classes, camps, or birthdays */} {selectedLocationId && (hasClassesForLocation || hasCampsForLocation || hasBirthdaysForLocation) && (

Select Activity Type

{hasClassesForLocation && ( )} {hasCampsForLocation && ( )} {hasBirthdaysForLocation && ( )}

)} {/* Search and Filters */} {selectedLocationId && (

setSearchQuery(e.target.value)} className="w-full pl-12 pr-4 py-3 rounded-full" />

Filter by:

{activeTab === "camp" && (

setSelectedDate(value)} placeholder="Select date" className="[&>button]:px-4 [&>button]:py-3 [&>button]:h-auto [&>button]:rounded-full [&>button]:min-w-[160px]" /> {selectedDate && ( )}

)}

)} {/* Classes List */} {selectedLocationId && activeTab === "classes" && (

Classes at{" "} {locations.find((l) => l.id === selectedLocationId)?.name}

{isLoading ? (

{[1, 2, 3].map((index) => (

{/* Image Skeleton */} {/* Content Skeleton */}

{/* Badge and Title Skeleton */}

{/* Description Skeleton */}

{/* Details Skeleton */}

{/* Buttons Skeleton */}

))}

) : error ? (

{error}

) : filteredClasses.length > 0 ? (

{filteredClasses.map((classItem) => { const className = classItem.product?.name || `Class ${classItem.id}`; const description = classItem.product?.description || ""; const ageMin = classItem.product?.ageMin || 0; const ageMax = classItem.product?.ageMax || 0; // Convert age from months to years for display (matching Add/Edit class page) const formatAge = (min: number, max: number) => { if (min === 0 && max === 0) return ""; const minYears = min / 12; const maxYears = max / 12; // Format to show decimals when needed (e.g., 0.5, 1.5) but whole numbers when not const formatYear = (years: number) => { if (years % 1 === 0) return years.toString(); return years.toFixed(1); }; return `${formatYear(minYears)} - ${formatYear( maxYears )} years`; }; // Convert duration from minutes to hours for display (matching Add/Edit class page) const formatDuration = (minutes?: number) => { if (!minutes) return ""; const hours = minutes / 60; return `${hours} hr${hours !== 1 ? "s" : ""}`; }; return (

{/* Image Section */}

{(classItem.product as any)?.imageUrl ? ( {className}

) : (

{className.charAt(0)}

)}

{/* Content Section */}

{/* Badge and Title */}

CLASS {selectedLocationId && ( {locations.find( (l) => l.id === selectedLocationId )?.name || `Location ${selectedLocationId}`} )}

{className}

by {merchantDisplayName}

{/* Description */} {description && (

{description}

)} {/* Details */}

{formatAge(ageMin, ageMax) && ( {formatAge(ageMin, ageMax)} )} {classItem.duration && ( {formatDuration(classItem.duration)} )} {classItem.maxCapacity && ( Max {classItem.maxCapacity} students )}

{/* Action Buttons */}

); })}

) : (

No classes found for this location.

)}

)} {/* Camps List */} {selectedLocationId && activeTab === "camp" && (

Camps at{" "} {locations.find((l) => l.id === selectedLocationId)?.name}

{isLoadingCamps ? (

{[1, 2, 3].map((index) => (

))}

) : campError ? (

{campError}

) : filteredCamps.length > 0 ? (

{filteredCamps.map((camp) => { const campName = camp.name || camp.product?.name || camp.campDetails?.name || `Camp ${camp.id}`; const description = camp.description || camp.product?.description || camp.campDetails?.description || ""; // Use first camp option's ageMin/ageMax if available, otherwise fall back to product's age // This matches the logic in the details popup which uses primaryOption?.ageMin ?? productAgeMin const campOptions = campOptionsByCampId[camp.id] || []; const primaryOption = campOptions[0]; const productAgeMin = camp.product?.ageMin; const productAgeMax = camp.product?.ageMax; // Prefer camp option's age over product's age (matches details popup logic) const ageMin = primaryOption?.ageMin ?? productAgeMin ?? 0; const ageMax = primaryOption?.ageMax ?? productAgeMax ?? 0; // Convert age from months to years for display const formatAge = (min: number, max: number) => { if (min === 0 && max === 0) return ""; const minYears = min / 12; const maxYears = max / 12; // Format to show decimals when needed (e.g., 0.5, 1.5) but whole numbers when not const formatYear = (years: number) => { if (years % 1 === 0) return years.toString(); return years.toFixed(1); }; return `${formatYear(minYears)} - ${formatYear( maxYears )} years`; }; return (

{campName.charAt(0)}

CAMP {selectedLocationId && ( {locations.find( (l) => l.id === selectedLocationId )?.name || `Location ${selectedLocationId}`} )}

{campName}

by {merchantDisplayName}

{description && (

{description}

)}

{formatAge(ageMin, ageMax) && ( {formatAge(ageMin, ageMax)} )}

); })}

) : (

No camps found for this location.

)}

)} {/* Birthdays List */} {selectedLocationId && activeTab === "birthday" && (

Birthdays at{" "} {locations.find((l) => l.id === selectedLocationId)?.name}

{isLoadingBirthdays ? (

{[1, 2, 3].map((index) => (

{/* Image Skeleton */} {/* Content Skeleton */}

{/* Badge and Title Skeleton */}

{/* Description Skeleton */}

{/* Details Skeleton */}

{/* Buttons Skeleton */}

))}

) : birthdayError ? (

{birthdayError}

) : filteredBirthdays.length > 0 ? (

{filteredBirthdays.map((birthday) => { const product = birthday.product || ({} as any); const name = product?.name || "Birthday Package"; const description = product?.description || ""; const ageMin = product?.ageMin || 0; const ageMax = product?.ageMax || 0; // Convert age from months to years for display const formatAge = (min: number, max: number) => { if (min === 0 && max === 0) return ""; const minYears = min / 12; const maxYears = max / 12; // Format to show decimals when needed (e.g., 0.5, 1.5) but whole numbers when not const formatYear = (years: number) => { if (years % 1 === 0) return years.toString(); return years.toFixed(1); }; return `${formatYear(minYears)} - ${formatYear( maxYears )} years`; }; // Convert duration from minutes to hours for display const formatDuration = (minutes?: number) => { if (!minutes) return ""; const hours = minutes / 60; return `${hours} hr${hours !== 1 ? "s" : ""}`; }; return (

{/* Image Section */}

{(product as any)?.imageUrl || (product as any)?.thumbnailUrl ? ( {name}

) : (

{name.charAt(0)}

)}

{/* Content Section */}

{/* Badge and Title */}

BIRTHDAY {selectedLocationId && ( {locations.find( (l) => l.id === selectedLocationId )?.name || `Location ${selectedLocationId}`} )}

{name}

by {merchantDisplayName}

{/* Description */} {description && (

{description}

)} {/* Details */}

{formatAge(ageMin, ageMax) && ( {formatAge(ageMin, ageMax)} )} {birthday.durationMinutes && ( {formatDuration(birthday.durationMinutes)} )} {birthday.minKids !== undefined && birthday.maxKids !== undefined && ( {birthday.minKids}-{birthday.maxKids} kids )} {birthday.venueType && ( {birthday.venueType === "AT_HOME" ? "At Home" : birthday.venueType === "AT_LOCATION" ? "At Location" : birthday.venueType === "BOTH" ? "Both" : birthday.venueType} )}

{/* Action Buttons */}

); })}

) : (

No birthdays found for this location.

)}

{/* Schedule Sheet */} {selectedClass && (

{selectedClass.product?.name || "Class"} Schedule View all available schedules for this class

Schedule

{isLoadingSchedules ? (

Loading schedule...

) : scheduleError ? (

{scheduleError}

) : schedules.length > 0 ? ( schedules .filter((schedule) => { // Only show RECURRING schedules with dayOfWeek if (schedule.scheduleType === "RECURRING") { return ( schedule.dayOfWeek !== null && schedule.dayOfWeek !== undefined ); } return false; }) .map((schedule) => { const dayName = schedule.dayOfWeek !== null && schedule.dayOfWeek !== undefined ? dayNumberToName[schedule.dayOfWeek] || "" : ""; return (

{dayName}

{schedule.startTime} - {schedule.endTime}

); }) ) : (

No schedule available

)}

)} {/* Details Sheet */} {selectedClassForDetails && (

{selectedClassForDetails.product?.name || "Unnamed Class"}

{/* Class Image */}

{(selectedClassForDetails.product as any)?.imageUrl || (selectedClassForDetails.product as any)?.thumbnailUrl ? ( {selectedClassForDetails.product?.name

) : merchantName.toLowerCase() === "mygym" ? (

) : merchantName.toLowerCase() === "lil_ninja_academy" ? ( {selectedClassForDetails.product?.name

) : (

)}

{/* Description */} {selectedClassForDetails.product?.description && (

Description

{selectedClassForDetails.product.description}

)} {/* Class Details */}

Class Details

{selectedClassForDetails.product?.productType && (

Type {selectedClassForDetails.product.productType}

)} {selectedClassForDetails.product?.ageMin !== undefined && selectedClassForDetails.product?.ageMax !== undefined && (

Age Range {(() => { const ageMin = selectedClassForDetails.product?.ageMin || 0; const ageMax = selectedClassForDetails.product?.ageMax || 0; // Convert age from months to years for display (matching Add/Edit class page) const minYears = ageMin / 12; const maxYears = ageMax / 12; // Format to show decimals when needed (e.g., 0.5, 1.5) but whole numbers when not const formatYear = (years: number) => { if (years % 1 === 0) return years.toString(); return years.toFixed(1); }; return `${formatYear(minYears)} - ${formatYear( maxYears )} years`; })()}

)} {selectedClassForDetails.duration !== undefined && (

Duration {/* Convert duration from minutes to hours for display (matching Add/Edit class page) */} {(() => { const hours = (selectedClassForDetails.duration || 0) / 60; return `${hours} hr${hours !== 1 ? "s" : ""}`; })()}

)} {selectedClassForDetails.maxCapacity !== undefined && (

Max Capacity {selectedClassForDetails.maxCapacity} students

)}

{/* Schedule */}

Schedule

{isLoadingDetailsSchedules ? (

Loading schedule...

) : detailsScheduleError ? (

{detailsScheduleError}

) : detailsSchedules.length > 0 ? ( detailsSchedules .filter((schedule) => { // Only show RECURRING schedules with dayOfWeek if (schedule.scheduleType === "RECURRING") { return ( schedule.dayOfWeek !== null && schedule.dayOfWeek !== undefined ); } return false; }) .map((schedule) => { const dayName = schedule.dayOfWeek !== null && schedule.dayOfWeek !== undefined ? dayNumberToName[schedule.dayOfWeek] || "" : ""; return (

{dayName}

{schedule.startTime} - {schedule.endTime}

); }) ) : (

No schedule available

)}

)} {/* Camp Details Sheet */} {selectedCampForDetails && (

{selectedCampForDetails.name || selectedCampForDetails.product?.name || selectedCampForDetails.campDetails?.name || "Unnamed Camp"} {(selectedCampForDetails.description || selectedCampForDetails.product?.description || selectedCampForDetails.campDetails?.description) && ( {selectedCampForDetails.description || selectedCampForDetails.product?.description || selectedCampForDetails.campDetails?.description} )}

{/* Camp Details */}

Camp Details

{(() => { // Use primary camp option (first one) for dates, schedule, age range const primaryOption = campDetailsOptions[0]; const productAgeMin = selectedCampForDetails.product?.ageMin || (selectedCampForDetails as any).ageMin; const productAgeMax = selectedCampForDetails.product?.ageMax || (selectedCampForDetails as any).ageMax; const displayStartDate = primaryOption?.startDate || (selectedCampForDetails.campDetails as any) ?.startDate || (selectedCampForDetails as any).startDate; const displayEndDate = primaryOption?.endDate || (selectedCampForDetails.campDetails as any)?.endDate || (selectedCampForDetails as any).endDate; const displaySchedule = primaryOption?.startTime && primaryOption?.endTime ? `${primaryOption.startTime} - ${primaryOption.endTime}` : (selectedCampForDetails.campDetails as any) ?.dailySchedule || (selectedCampForDetails as any).dailySchedule; const displayAgeMin = primaryOption?.ageMin ?? productAgeMin; const displayAgeMax = primaryOption?.ageMax ?? productAgeMax; const formatDate = (value?: string) => { if (!value) return "—"; try { const date = new Date(value); if (Number.isNaN(date.getTime())) return value; return format(date, "dd MMM, yyyy"); } catch { return value; } }; // Convert age from months to years for display const formatAge = (months?: number) => { if (months === undefined || months === null) return undefined; return months / 12; }; return ( <>

Dates {displayStartDate && displayEndDate ? `${formatDate( displayStartDate )} to ${formatDate(displayEndDate)}` : "—"}

Schedule {displaySchedule || "—"}

Age Range {displayAgeMin !== undefined && displayAgeMax !== undefined ? (() => { const minYears = formatAge(displayAgeMin); const maxYears = formatAge(displayAgeMax); const formatYear = (years?: number) => { if (years === undefined) return ""; if (years % 1 === 0) return years.toString(); return years.toFixed(1); }; return `${formatYear( minYears )} - ${formatYear(maxYears)} years`; })() : "—"}

); })()}

{/* Pricing Options */} {(() => { const optionPrices = campDetailsOptions .filter( (opt) => opt.price !== undefined && opt.price !== null ) .map((opt) => ({ name: opt.name || "Camp Option", price: Number(opt.price), priceType: opt.priceType, })); const pricingOptions = (selectedCampForDetails as any).pricingOptions || []; if ( optionPrices.length === 0 && pricingOptions.length === 0 ) { return null; } return (

Pricing Options

{optionPrices.map((pricing, idx) => ( {pricing.name}: ${pricing.price} {pricing.priceType ? ` (${pricing.priceType})` : ""} ))} {pricingOptions.map((pricing: any, idx: number) => ( {pricing.name}: ${pricing.price} ))}

); })()} {/* Camp Options */}

Camp Options

{isLoadingCampDetailsOptions ? (

Loading camp options...

) : campDetailsOptionsError ? (

{campDetailsOptionsError}

) : campDetailsOptions.length === 0 ? (

No camp options configured

) : (

{campDetailsOptions.map((option, index) => { const formatDate = (value?: string) => { if (!value) return "—"; try { const date = new Date(value); if (Number.isNaN(date.getTime())) return value; return format(date, "dd MMM, yyyy"); } catch { return value; } }; // Convert age from months to years for display const formatAge = (months?: number) => { if (months === undefined || months === null) return undefined; return months / 12; }; return (

{option.name} {option.isAvailable ? "Available" : "Unavailable"}

{option.startDate && option.endDate ? `${formatDate( option.startDate )} to ${formatDate(option.endDate)}` : null}

{option.startTime && option.endTime && ( {option.startTime} - {option.endTime} )} {option.ageMin !== undefined && option.ageMax !== undefined && ( Ages{" "} {(() => { const minYears = formatAge(option.ageMin); const maxYears = formatAge(option.ageMax); const formatYear = (years?: number) => { if (years === undefined) return ""; if (years % 1 === 0) return years.toString(); return years.toFixed(1); }; return `${formatYear( minYears )}-${formatYear(maxYears)} years`; })()} )} {option.capacity !== undefined && ( Capacity {option.capacity} )} {option.price !== undefined && ( ${option.price} {option.priceType ? ` (${option.priceType})` : ""} )}

); })}

)}

)} {/* Birthday Details Sheet */} {selectedBirthdayForDetails && (() => { const product = selectedBirthdayForDetails.product || ({} as any); return ( <> {product?.name || "Unnamed Birthday Package"} {product?.description && ( {product.description} )}

{/* Birthday Details */}

Birthday Details

Venue Type {selectedBirthdayForDetails.venueType === "AT_HOME" ? "At Home" : selectedBirthdayForDetails.venueType === "AT_LOCATION" ? "At Location" : selectedBirthdayForDetails.venueType === "BOTH" ? "Both" : selectedBirthdayForDetails.venueType || "—"}

Duration {selectedBirthdayForDetails.durationMinutes ? `${Math.round( Number( selectedBirthdayForDetails.durationMinutes ) / 60 )} hours` : "—"}

Kids Range {selectedBirthdayForDetails.minKids ?? "-"} -{" "} {selectedBirthdayForDetails.maxKids ?? "-"}

Parents Range {selectedBirthdayForDetails.minParents ?? "-"} -{" "} {selectedBirthdayForDetails.maxParents ?? "-"}

{product?.ageMin !== undefined && product?.ageMax !== undefined && (

Age Range {(product.ageMin / 12).toFixed(1)} -{" "} {(product.ageMax / 12).toFixed(1)} years

)} {selectedBirthdayForDetails.whatsIncluded && (

What's Included {selectedBirthdayForDetails.whatsIncluded}

)} {selectedBirthdayForDetails.cancellationPolicy && (

Cancellation Policy {selectedBirthdayForDetails.cancellationPolicy}

)} {product?.locationId && (

Location {locations.find( (l) => l.id === product?.locationId )?.name || `Location ${product.locationId}`}

)}

{/* Birthday Addons */}

Addons

{isLoadingBirthdayAddons ? (

Loading addons...

) : birthdayAddons.length === 0 ? (

No addons configured for this birthday package

) : (

{birthdayAddons.map((addon) => (

{addon.name}

{addon.description && (

{addon.description}

)}

{addon.unit === "PER_KID" ? "Per Kid" : addon.unit === "PER_PARENT" ? "Per Parent" : addon.unit === "PER_EVENT" ? "Per Event" : addon.unit}

${addon.unitPrice?.toFixed(2) || "0.00"}

{!addon.isActive && ( Inactive )}

))}

)}

); })()}

); } [V0_FILE]typescriptreact:file="app/[merchantName]/register/page.tsx" isMerged="true" "use client"; import { useState, useEffect } from "react"; import { useParams, useSearchParams, useRouter } from "next/navigation"; import Link from "next/link"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { ArrowLeft, Loader2 } from "lucide-react"; import { createRegistration } from "@/lib/api/registrations"; import { API_BASE_URL } from "@/lib/api/config"; import { getMerchantId } from "@/lib/utils/merchant"; import { DatePicker } from "@/components/ui/date-picker"; import { differenceInMonths } from "date-fns"; export default function RegisterPage() { const params = useParams(); const searchParams = useSearchParams(); const router = useRouter(); const merchantName = (params?.merchantName as string) || "mygym"; // Get data from query params const productId = searchParams.get("productId"); const locationId = searchParams.get("locationId"); const locationName = searchParams.get("locationName") || ""; const className = searchParams.get("className") || "Class"; const classId = searchParams.get("classId") || productId; const phoneNumber = searchParams.get("phoneNumber") || ""; // Get verified phone number const [price, setPrice] = useState(null); const [priceType, setPriceType] = useState(null); const [merchantId, setMerchantId] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); // Form state const [formData, setFormData] = useState({ parentFirstName: "", parentLastName: "", parentEmail: "", parentPhone: phoneNumber, // Pre-fill with verified phone number childFirstName: "", childLastName: "", childBirthdate: "", childGender: "", medicalInfo: "", emergencyContact: "", pincode: "", address: "", unitNumber: "", notes: "", }); // Update parentPhone and emergencyContact when phoneNumber from query params changes useEffect(() => { if (phoneNumber) { setFormData((prev) => ({ ...prev, parentPhone: phoneNumber, emergencyContact: phoneNumber // Pre-fill emergency contact with verified phone })); } else { // Try to get verified phone from session storage if not in query params if (typeof window !== "undefined") { try { const verifiedPhone = sessionStorage.getItem("verifiedPhone"); if (verifiedPhone) { setFormData((prev) => ({ ...prev, parentPhone: verifiedPhone, emergencyContact: verifiedPhone // Pre-fill emergency contact with verified phone })); } } catch (err) { console.warn( "Could not read verified phone from session storage:", err ); } } } }, [phoneNumber]); // Get merchant ID useEffect(() => { const fetchMerchantId = async () => { try { setIsLoading(true); // For public registration page, determine merchant ID from URL, not localStorage // This ensures we use the correct merchant for the registration const normalizedName = merchantName.toLowerCase(); const merchantIdMap: Record = { mygym: 2, kidscamp: 3, "kids camp": 3, }; // First, try the hardcoded mapping if (merchantIdMap[normalizedName]) { setMerchantId(merchantIdMap[normalizedName]); setIsLoading(false); return; } // If not in mapping, try to fetch merchant by merchantID from API (public endpoint) try { const response = await fetch( `${API_BASE_URL}/merchants?merchantID=${encodeURIComponent( merchantName )}` ); if (response.ok) { const data = await response.json(); const merchants = Array.isArray(data.data) ? data.data : [data.data || data]; const merchant = merchants.find( (m: any) => m.merchantID?.toLowerCase() === normalizedName || m.name?.toLowerCase() === normalizedName ); if (merchant?.id) { setMerchantId(merchant.id); setIsLoading(false); return; } } } catch (apiErr) { console.error("Error fetching merchant from API:", apiErr); } // Fallback: try localStorage only if we couldn't determine from URL // This is a last resort and should rarely be used for public pages const storedMerchantId = getMerchantId(); if (storedMerchantId) { setMerchantId(storedMerchantId); } } catch (err) { console.error("Error fetching merchant ID:", err); } finally { setIsLoading(false); } }; fetchMerchantId(); }, [merchantName]); // Get pricing information from session storage useEffect(() => { if (typeof window !== "undefined") { try { const bookingDetailsStr = sessionStorage.getItem("bookingDetails"); if (bookingDetailsStr) { const bookingDetails = JSON.parse(bookingDetailsStr); if ( bookingDetails.price !== null && bookingDetails.price !== undefined ) { setPrice(bookingDetails.price); setPriceType(bookingDetails.priceType || null); } else if (productId) { // If price not in session storage, try to fetch from API as fallback const fetchPricing = async () => { try { const response = await fetch( `${API_BASE_URL}/products/${productId}/pricing?onlyPublic=true` ); if (response.ok) { const data = await response.json(); const pricings = Array.isArray(data.data) ? data.data : Array.isArray(data) ? data : [data.data || data]; const pricing = pricings.find((p: any) => p.isPublic && !p.isArchived) || pricings.find((p: any) => p.isRecommended) || pricings[0]; if (pricing) { setPrice(pricing.price); setPriceType(pricing.priceType); // Update session storage with fetched price const updatedDetails = { ...bookingDetails, price: pricing.price, priceType: pricing.priceType, }; sessionStorage.setItem( "bookingDetails", JSON.stringify(updatedDetails) ); } } } catch (err) { console.warn("Could not fetch pricing information:", err); } }; fetchPricing(); } } } catch (err) { console.warn( "Could not read booking details from session storage:", err ); } } }, [productId]); const handleInputChange = ( e: React.ChangeEvent ) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); }; const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(null); // Validation if (!formData.parentFirstName.trim() || !formData.parentLastName.trim()) { setError("Parent first name and last name are required"); return; } if (!formData.childFirstName.trim() || !formData.childLastName.trim()) { setError("Child first name and last name are required"); return; } if (!formData.childBirthdate) { setError("Child birthdate is required"); return; } if (!formData.emergencyContact.trim()) { setError("Emergency contact is required"); return; } if (!merchantId || !locationId || !productId) { setError("Missing required information. Please go back and try again."); return; } setIsSubmitting(true); try { // Combine first and last names for backend const parentFullName = `${formData.parentFirstName.trim()} ${formData.parentLastName.trim()}`.trim(); const childFullName = `${formData.childFirstName.trim()} ${formData.childLastName.trim()}`.trim(); // Prepare registration data const registrationData = { parentFullName: parentFullName, parentEmail: formData.parentEmail.trim() || undefined, parentPhone: formData.parentPhone.trim() || undefined, childFullName: childFullName, childBirthdate: new Date(formData.childBirthdate).toISOString(), childGender: formData.childGender || undefined, medicalInfo: formData.medicalInfo.trim() || undefined, emergencyContact: formData.emergencyContact.trim(), pincode: formData.pincode.trim() || undefined, address: formData.address.trim() || undefined, unitNumber: formData.unitNumber.trim() || undefined, productId: Number(productId), termsVersion: "1.0", // You may want to fetch this from API termsTimestamp: new Date().toISOString(), versionNumber: 1, isActive: true, notes: formData.notes.trim() || undefined, }; const response = await createRegistration( merchantId, Number(locationId), Number(productId), registrationData ); if (!response.data) { throw new Error("Registration created but no data returned"); } // Get child full name from form data (already combined) const childFullNameFromForm = childFullName; // Redirect to checkout with registration data // Pass all registration details through query params since GET endpoint requires auth const checkoutParams = new URLSearchParams({ className: className, classId: classId || "", registrationId: response.data?.id.toString() || "", registrationID: response.data?.registrationID || "", locationId: locationId || "", productId: productId || "", childFullName: childFullNameFromForm || response.data?.childFullName || "", productName: className, // Use className as product name locationName: locationName || "", }); // Add price information if available if (price !== null) { checkoutParams.append("price", price.toString()); if (priceType) { checkoutParams.append("priceType", priceType); } } router.push(`/${merchantName}/checkout?${checkoutParams.toString()}`); } catch (err: any) { console.error("Error creating registration:", err); // Show more detailed error message let errorMessage = err.message || "Failed to create registration. Please try again."; if (err.code) { errorMessage = `${errorMessage} (Error Code: ${err.code})`; } if (err.response?.message) { errorMessage = err.response.message; } setError(errorMessage); setIsSubmitting(false); } }; if (!merchantId || !locationId || !productId) { return (

{merchantName.charAt(0).toUpperCase()}

{merchantName}

{isLoading ? "Loading..." : "Missing required information. Please go back and try again."}

); } return (

{/* Header */}

{merchantName.charAt(0).toUpperCase()}

{merchantName}

Registration Form

Please fill in the details to register for {className}

{error && (

{error}

)}

{/* Parent Information */}

Parent/Guardian Information

First Name *

Last Name *

Phone No

Emergency Contact No{" "} * {phoneNumber && formData.emergencyContact === phoneNumber && ( (Verified) )} {phoneNumber && formData.emergencyContact === phoneNumber && (

Emergency contact verified via OTP

)}

{/* Child Information */}

Child Information

First Name *

Last Name *

Date of Birth * setFormData((prev) => ({ ...prev, childBirthdate: value, })) } placeholder="Select date of birth" disableFuture={true} />

Gender

Medical Information

</div>
              </div>

{/* Address Information */}
              <div className="space-y-4">
                <h3 className="text-lg font-semibold">Address Information</h3>

<div className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="address">Address</Label>
                    <Input
                      id="address"
                      name="address"
                      value={formData.address}
                      onChange={handleInputChange}
                      placeholder="Enter address"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="unitNumber">Unit Number</Label>
                    <Input
                      id="unitNumber"
                      name="unitNumber"
                      value={formData.unitNumber}
                      onChange={handleInputChange}
                      placeholder="Enter unit number"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="pincode">Postal Code</Label>
                    <Input
                      id="pincode"
                      name="pincode"
                      value={formData.pincode}
                      onChange={handleInputChange}
                      placeholder="Enter postal code"
                    />
                  </div>
                </div>
              </div>

{/* Additional Notes */}
              <div className="space-y-2">
                <Label htmlFor="notes">Additional Notes</Label>
                <Textarea
                  id="notes"
                  name="notes"
                  value={formData.notes}
                  onChange={handleInputChange}
                  placeholder="Any additional information or special requests"
                  rows={3}
                />
              </div>

{/* Submit Button */}
              <div className="flex justify-end gap-4 pt-4">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => router.back()}
                  disabled={isSubmitting}
                >
                  Cancel
                </Button>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Submitting...
                    </>
                  ) : (
                    "Continue to Checkout"
                  )}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/[merchantName]/verify/page.tsx" isMerged="true"
"use client";

import { useState, useEffect } from "react";
import { useSearchParams, useRouter, useParams } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ArrowLeft, Loader2 } from "lucide-react";
import Link from "next/link";

export default function VerifyPage() {
  const params = useParams();
  const searchParams = useSearchParams();
  const router = useRouter();
  const merchantName = (params?.merchantName as string) || "mygym";

// Get booking details from query params
  const className = searchParams.get("className") || "";
  const classId = searchParams.get("classId") || "";
  const productId = searchParams.get("productId") || "";
  const locationId = searchParams.get("locationId") || "";
  const locationName = searchParams.get("locationName") || "";

const [phoneNumber, setPhoneNumber] = useState("");
  const [otp, setOtp] = useState("");
  const [isOtpSent, setIsOtpSent] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isVerifying, setIsVerifying] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [countdown, setCountdown] = useState(0);

// Countdown timer for resend OTP
  useEffect(() => {
    if (countdown > 0) {
      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
      return () => clearTimeout(timer);
    }
  }, [countdown]);

// Validate phone number format
  const validatePhoneNumber = (phone: string): boolean => {
    // Check if phone has country code (starts with +)
    const hasCountryCode = phone.trim().startsWith("+");

// Clean phone number (remove spaces, dashes, parentheses, but preserve + if present)
    let cleaned = phone.replace(/[\s\-()]/g, "");
    if (!hasCountryCode) {
      cleaned = cleaned.replace(/\+/g, "");
    }

// If it has country code, validate E.164 format: + followed by 1-15 digits
    // If no country code, validate as 8-15 digits
    if (hasCountryCode) {
      return /^\+\d{1,15}$/.test(cleaned);
    } else {
      return /^\d{8,15}$/.test(cleaned);
    }
  };

// Send OTP
  const handleSendOTP = async () => {
    setError(null);

if (!phoneNumber.trim()) {
      setError("Please enter your phone number");
      return;
    }

if (!validatePhoneNumber(phoneNumber)) {
      setError(
        "Please enter a valid phone number (with country code, e.g., +91XXXXXXXXXX)"
      );
      return;
    }

setIsLoading(true);

try {
      // Call API to send OTP via Twilio
      const response = await fetch("/api/otp/send", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phoneNumber: phoneNumber.trim() }),
      });

const data = await response.json();

if (!response.ok) {
        throw new Error(data.error || "Failed to send OTP");
      }

// Store phone number in session storage for verification
      sessionStorage.setItem(
        "otpPhoneNumber",
        JSON.stringify({
          phoneNumber: phoneNumber.trim(),
          timestamp: Date.now(),
        })
      );

setIsOtpSent(true);
      setCountdown(60); // 60 seconds countdown
      setError(null);
    } catch (err: any) {
      console.error("Error sending OTP:", err);
      setError(err.message || "Failed to send OTP. Please try again.");
    } finally {
      setIsLoading(false);
    }
  };

// Verify OTP
  const handleVerifyOTP = async () => {
    setError(null);

if (!otp.trim() || otp.length !== 6) {
      setError("Please enter a valid 6-digit OTP");
      return;
    }

setIsVerifying(true);

try {
      // Get stored phone number from session storage
      const storedData = sessionStorage.getItem("otpPhoneNumber");
      if (!storedData) {
        throw new Error("OTP session expired. Please request a new OTP.");
      }

const { phoneNumber: storedPhone } = JSON.parse(storedData);

// Verify OTP with backend API (Twilio)
      const response = await fetch("/api/otp/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          phoneNumber: storedPhone,
          code: otp.trim(),
        }),
      });

const data = await response.json();

if (!response.ok) {
        throw new Error(data.error || "Invalid OTP. Please try again.");
      }

// Store verified phone number in session storage
      sessionStorage.setItem("verifiedPhone", storedPhone);

// Clear OTP data
      sessionStorage.removeItem("otpPhoneNumber");

// Redirect to registration page with all booking details
      const registerParams = new URLSearchParams({
        className: className,
        classId: classId,
        productId: productId,
        locationId: locationId,
        locationName: locationName,
        phoneNumber: storedPhone, // Pass verified phone number
      });

router.push(`/${merchantName}/register?${registerParams.toString()}`);
    } catch (err: any) {
      console.error("Error verifying OTP:", err);
      setError(err.message || "Failed to verify OTP. Please try again.");
      setIsVerifying(false);
    }
  };

// Resend OTP
  const handleResendOTP = () => {
    if (countdown > 0) return;
    setIsOtpSent(false);
    setOtp("");
    setError(null);
    handleSendOTP();
  };

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur-sm">
        <div className="container mx-auto px-6 py-4 flex items-center justify-between">
          <Link href={`/${merchantName}`} className="flex items-center gap-2">
            <div className="w-8 h-8 bg-[#298733] rounded-lg flex items-center justify-center text-white font-bold text-sm">
              {merchantName.charAt(0).toUpperCase()}
            </div>
            <span className="text-xl font-semibold text-foreground">
              {merchantName}
            </span>
          </Link>
        </div>
      </header>

<div className="container mx-auto px-6 py-12 max-w-2xl">
        <Button variant="ghost" onClick={() => router.back()} className="mb-6">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back
        </Button>

<Card>
          <CardHeader>
            <CardTitle className="text-2xl">Phone Verification</CardTitle>
            <p className="text-sm text-muted-foreground mt-2">
              {className
                ? `Please verify your phone number to register for ${className}`
                : "Please verify your phone number to continue"}
            </p>
          </CardHeader>
          <CardContent className="space-y-6">
            {!isOtpSent ? (
              // Phone Number Input
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="phoneNumber">
                    Phone Number <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="phoneNumber"
                    type="tel"
                    value={phoneNumber}
                    onChange={(e) => {
                      setPhoneNumber(e.target.value);
                      setError(null);
                    }}
                    placeholder="Enter your phone number (e.g., +65 9123 4567)"
                    disabled={isLoading}
                    className="text-lg"
                  />
                  <p className="text-xs text-muted-foreground">
                    We'll send you a 6-digit verification code via SMS
                  </p>
                </div>

{error && (
                  <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
                    {error}
                  </div>
                )}

<Button
                  onClick={handleSendOTP}
                  disabled={isLoading || !phoneNumber.trim()}
                  className="w-full bg-primary text-primary-foreground"
                >
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Sending OTP...
                    </>
                  ) : (
                    "Send OTP"
                  )}
                </Button>
              </div>
            ) : (
              // OTP Input
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="otp">
                    Enter Verification Code{" "}
                    <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="otp"
                    type="text"
                    value={otp}
                    onChange={(e) => {
                      const value = e.target.value
                        .replace(/\D/g, "")
                        .slice(0, 6);
                      setOtp(value);
                      setError(null);
                    }}
                    placeholder="Enter 6-digit code"
                    disabled={isVerifying}
                    className="text-2xl text-center tracking-widest font-mono"
                    maxLength={6}
                    autoFocus
                  />
                  <p className="text-xs text-muted-foreground text-center">
                    We sent a verification code to {phoneNumber}
                  </p>
                </div>

{error && (
                  <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
                    {error}
                  </div>
                )}

<div className="space-y-3">
                  <Button
                    onClick={handleVerifyOTP}
                    disabled={isVerifying || otp.length !== 6}
                    className="w-full bg-primary text-primary-foreground"
                  >
                    {isVerifying ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Verifying...
                      </>
                    ) : (
                      "Verify OTP"
                    )}
                  </Button>

<div className="text-center">
                    <button
                      type="button"
                      onClick={handleResendOTP}
                      disabled={countdown > 0}
                      className="text-sm text-primary hover:underline disabled:text-muted-foreground disabled:no-underline"
                    >
                      {countdown > 0
                        ? `Resend OTP in ${countdown}s`
                        : "Resend OTP"}
                    </button>
                  </div>

<div className="text-center">
                    <button
                      type="button"
                      onClick={() => {
                        setIsOtpSent(false);
                        setOtp("");
                        setError(null);
                        setCountdown(0);
                      }}
                      className="text-sm text-muted-foreground hover:text-foreground"
                    >
                      Change Phone Number
                    </button>
                  </div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/agent-preview/[id]/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/agent-preview/[id]/page.tsx" isMerged="true"
"use client";

import type React from "react";

import { useState, useRef, useEffect, Suspense } from "react";
import { useSearchParams, useParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  Send,
  Check,
  CheckCheck,
  Smile,
  Mic,
  Phone,
  Video,
  MoreVertical,
  Sparkles,
  Wifi,
  WifiOff,
  ChevronDown,
  ChevronRight,
  Bot,
} from "lucide-react";
import Link from "next/link";
import {
  connectSocketWithCodeName,
  getSocket,
  disconnectSocket,
} from "@/lib/services/socket";
import type { Socket } from "socket.io-client";
import ReactMarkdown from "react-markdown";

interface Message {
  id: string;
  role: "user" | "assistant";
  content: string;
  time: string;
  status?: "sent" | "delivered" | "read";
  is_internal?: boolean;
  author?: string;
  event_type?: string;
}

// Internal Message Component (for intent detection)
function InternalMessage({ message }: { message: Message }) {
  const [expanded, setExpanded] = useState(false);

// Try to parse JSON content for better formatting
  let parsedContent: any = null;
  let displayText = message.content;

try {
    parsedContent = JSON.parse(message.content);
    // Create a preview from the parsed JSON
    if (parsedContent.intent) {
      displayText = `{"intent": "${parsedContent.intent}", "confidence": ${
        parsedContent.confidence || 0
      }, "reasoni...`;
    }
  } catch {
    // Not JSON, use original content
    displayText =
      message.content.split("\n")[0].slice(0, 50) +
      (message.content.length > 50 ? "..." : "");
  }

return (
    <div className="flex justify-start mb-2">
      <div className="max-w-[85%] rounded-lg px-3 py-2 shadow-sm bg-yellow-50/90 border border-yellow-200">
        <button
          onClick={() => setExpanded(!expanded)}
          className="w-full flex items-center gap-2 text-left hover:opacity-80 transition-opacity"
        >
          {expanded ? (
            <ChevronDown className="w-4 h-4 text-yellow-700 flex-shrink-0" />
          ) : (
            <ChevronRight className="w-4 h-4 text-yellow-700 flex-shrink-0" />
          )}
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-md border border-yellow-300/50">
            <Bot className="w-3.5 h-3.5" />
            {message.author?.toUpperCase().replace("_", " ") || "INTERNAL"}
          </span>
          {!expanded && (
            <span className="text-xs text-stone-700 font-mono truncate flex-1">
              {displayText}
            </span>
          )}
        </button>
        {expanded && (
          <div className="mt-3 pl-7">
            <div className="bg-yellow-50/70 border border-yellow-200/50 rounded-md p-3">
              {parsedContent ? (
                <div className="space-y-1.5 text-xs font-mono text-yellow-900">
                  <div>
                    <span className="text-yellow-700">{"{"}</span>
                  </div>
                  {parsedContent.intent && (
                    <div className="pl-4">
                      <span className="text-yellow-600">"intent"</span>
                      <span className="text-yellow-800">: </span>
                      <span className="text-yellow-900 font-semibold">
                        "{parsedContent.intent}"
                      </span>
                      <span className="text-yellow-800">,</span>
                    </div>
                  )}
                  {parsedContent.confidence !== undefined && (
                    <div className="pl-4">
                      <span className="text-yellow-600">"confidence"</span>
                      <span className="text-yellow-800">: </span>
                      <span className="text-yellow-900 font-semibold">
                        {parsedContent.confidence}
                      </span>
                      <span className="text-yellow-800">,</span>
                    </div>
                  )}
                  {parsedContent.reasoning && (
                    <div className="pl-4">
                      <span className="text-yellow-600">"reasoning"</span>
                      <span className="text-yellow-800">: </span>
                      <span className="text-yellow-900">
                        "{parsedContent.reasoning}"
                      </span>
                    </div>
                  )}
                  <div>
                    <span className="text-yellow-700">{"}"}</span>
                  </div>
                </div>
              ) : (
                <pre className="text-xs text-yellow-800 whitespace-pre-wrap break-words font-mono">
                  {message.content}
                </pre>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// Simulate scraped business data
const getBusinessData = (url: string) => {
  // Extract domain name from URL for display
  const getDisplayName = (urlString: string) => {
    if (!urlString) return "Your Website";
    try {
      const urlObj = new URL(urlString);
      return urlObj.hostname.replace(/^www\./, "");
    } catch {
      return urlString;
    }
  };

return {
    name: getDisplayName(url),
    services: [
      "STEAM Classes",
      "Art & Craft",
      "Sports",
      "Holiday Camps",
      "Birthday Parties",
    ],
    hours: "Mon-Fri 9am-7pm, Sat-Sun 9am-5pm",
    contact: "contact@littleexplorers.sg",
    faqs: [
      "We offer classes for ages 4-16",
      "Trial classes are free",
      "We have 4 locations across Singapore",
    ],
  };
};

function AgentPreviewContent() {
  const params = useParams();
  const searchParams = useSearchParams();
  const id = params.id as string;
  const url = searchParams.get("url") || "";
  const businessData = getBusinessData(url);

const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [isTyping, setIsTyping] = useState(false);
  const [connected, setConnected] = useState(false);
  const [showSignupModal, setShowSignupModal] = useState(false);
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [name, setName] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [socket, setSocket] = useState<Socket | null>(null);

const messagesEndRef = useRef<HTMLDivElement>(null);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

const scrollToBottom = () => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollTop =
        scrollContainerRef.current.scrollHeight;
    }
  };

useEffect(() => {
    const timeoutId = setTimeout(() => {
      scrollToBottom();
    }, 0);
    return () => clearTimeout(timeoutId);
  }, [messages, isTyping]);

// Connect to Socket.IO on mount
  useEffect(() => {
    // Get code_name from session storage
    const codeName =
      typeof window !== "undefined"
        ? sessionStorage.getItem("agent_code_name")
        : null;

if (!codeName) {
      console.error("No code_name found in session storage");
      setError("Agent code not found. Please try creating your agent again.");
      return;
    }

console.log("Connecting to socket with code_name:", codeName);
    const newSocket = connectSocketWithCodeName(codeName);
    setSocket(newSocket);

// Track if we've received the "connected" event from server
    let receivedConnectedEvent = false;
    let connectionTimeout: NodeJS.Timeout | null = null;

// Set a timeout to show error if server doesn't send "connected" event
    connectionTimeout = setTimeout(() => {
      if (!receivedConnectedEvent) {
        setError(
          "Connection timeout. Please check your internet connection and try again."
        );
        setConnected(false);
      }
    }, 15000); // 15 second timeout - wait for server "connected" event

// Handle connection events - match ai-agent implementation exactly
    newSocket.on("connect", () => {
      console.log("✅ Socket connected to server");
      // Don't set connected=true here - wait for server acknowledgment via "connected" event
    });

newSocket.on("disconnect", (reason) => {
      console.log("❌ Socket disconnected from server:", reason);
      setConnected(false);
      if (connectionTimeout) {
        clearTimeout(connectionTimeout);
        connectionTimeout = null;
      }
    });

newSocket.on("connect_error", (error: any) => {
      // Log for debugging but don't show error to user
      // Socket.io will automatically retry with other transports
      console.error("❌ Socket connection error (will retry):", {
        message: error.message,
        type: error.type,
        description: error.description,
        transport: newSocket.io?.engine?.transport?.name,
      });
      // Don't set error state here - let socket.io retry
    });

newSocket.on("connected", (data: any) => {
      console.log("✅ Server acknowledged connection:", data);
      receivedConnectedEvent = true; // Mark that we received the event
      setConnected(true);
      setError(null); // Clear any previous errors
      // Clear timeout on successful connection acknowledgment
      if (connectionTimeout) {
        clearTimeout(connectionTimeout);
        connectionTimeout = null;
      }

// Optionally add a welcome message after connection
      if (messages.length === 0) {
        const welcomeMessage: Message = {
          id: "welcome",
          role: "assistant",
          content: `Hi! I'm the AI agent for ${businessData.name} 🌿 I can answer questions about your business. How can I help you today?`,
          time: new Date().toLocaleTimeString("en-US", {
            hour: "numeric",
            minute: "2-digit",
            hour12: true,
          }),
        };
        setMessages([welcomeMessage]);
      }

// Focus on input after connection
      setTimeout(() => {
        inputRef.current?.focus();
      }, 100);
    });

newSocket.on("response_start", () => {
      console.log("Response started");
      setIsTyping(true);
    });

newSocket.on("agent_event", (event: any) => {
      console.log("Received event:", event);
      console.log("Event details:", {
        is_internal: event.is_internal,
        author: event.author,
        has_text: !!event.text,
        text_length: event.text?.length || 0,
        event_type: event.event_type,
      });

// Detect internal messages by checking is_internal flag OR author field
      // Intent detection messages typically have author: "intent_detector"
      const isInternalMessage =
        event.is_internal ||
        event.author === "intent_detector" ||
        event.author?.toLowerCase().includes("intent");

// Show all events - both internal (intent detection) and regular messages
      // For internal messages, show them even if text is empty (might be JSON in other fields)
      // For regular messages, only show if text exists
      if (isInternalMessage || event.text) {
        // For internal messages, try to get text from various possible fields
        let content = event.text || "";
        if (isInternalMessage && !content) {
          // Try to stringify the event data if text is not available
          try {
            // Remove circular references and stringify
            const { text, ...rest } = event;
            content = JSON.stringify(rest, null, 2);
          } catch {
            content = "Internal event";
          }
        }

// Only add message if we have content or it's an internal event
        if (content || isInternalMessage) {
          const message: Message = {
            id: Date.now().toString() + Math.random(),
            role: "assistant",
            content: content || JSON.stringify(event, null, 2),
            time: new Date().toLocaleTimeString("en-US", {
              hour: "numeric",
              minute: "2-digit",
              hour12: true,
            }),
            is_internal: isInternalMessage,
            author:
              event.author ||
              (isInternalMessage ? "intent_detector" : "assistant"),
            event_type: event.event_type,
          };
          console.log("Adding message to chat:", message);
          setMessages((prev) => [...prev, message]);
        }
      } else {
        console.log("Skipping event - no text and not internal:", event);
      }
    });

newSocket.on("response_complete", () => {
      console.log("Response complete");
      setIsTyping(false);
      // Keep focus on input after response completes
      setTimeout(() => {
        inputRef.current?.focus();
      }, 0);
    });

newSocket.on("error", (error: any) => {
      // This is a server-sent error event (not connect_error)
      console.log("Socket error from server:", error);
      setIsTyping(false);

// Extract error message from different possible formats
      let errorMessage = "An error occurred";
      if (typeof error === "string") {
        errorMessage = error;
      } else if (error?.message) {
        errorMessage = error.message;
      } else if (error && typeof error === "object") {
        // Try to get message from object, or stringify if needed
        if (error.message) {
          errorMessage = error.message;
        } else {
          // If error object has other properties, try to extract useful info
          const errorStr = JSON.stringify(error);
          if (errorStr !== "{}") {
            errorMessage = errorStr;
          }
        }
      }

// Show error in UI state
      setError(errorMessage);
      setConnected(false);

// Also add error message to chat
      const errorChatMessage: Message = {
        id: Date.now().toString(),
        role: "assistant",
        content: `Error: ${errorMessage}`,
        time: new Date().toLocaleTimeString("en-US", {
          hour: "numeric",
          minute: "2-digit",
          hour12: true,
        }),
        is_internal: false,
      };
      setMessages((prev) => [...prev, errorChatMessage]);

// Keep focus on input after error
      setTimeout(() => {
        inputRef.current?.focus();
      }, 0);
    });

newSocket.on("scraper_status", (data: any) => {
      console.log("Scraper status:", data);
      // Optionally handle scraper status updates
    });

// Cleanup on unmount
    return () => {
      if (connectionTimeout) {
        clearTimeout(connectionTimeout);
      }
      newSocket.disconnect();
    };
  }, []);

const getCurrentTime = () => {
    return new Date().toLocaleTimeString("en-US", {
      hour: "numeric",
      minute: "2-digit",
      hour12: true,
    });
  };

const handleSend = async () => {
    if (!input.trim() || isTyping || !connected) return;

const currentSocket = getSocket();
    if (!currentSocket || !connected) {
      console.error("Socket not connected");
      return;
    }

const userMessage = input.trim();
    const newMessage: Message = {
      id: Date.now().toString(),
      role: "user",
      content: userMessage,
      time: getCurrentTime(),
      status: "read",
    };

setMessages((prev) => [...prev, newMessage]);
    setInput("");

// Send message to server via socket
    currentSocket.emit("chat_message", { message: userMessage });
    setIsTyping(true);

// Focus on input after sending
    setTimeout(() => {
      inputRef.current?.focus();
    }, 0);
  };

const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError(null);

try {
      // Call the claim API
      const response = await fetch("/api/mail/claim", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: name.trim(),
          email: email.trim(),
          phone: phone.trim(),
          website: url || "",
        }),
      });

if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(
          errorData.error || "Failed to submit request. Please try again."
        );
      }

const data = await response.json().catch(() => ({}));
      console.log("Claim request submitted successfully:", data);

// Reset form fields
      setName("");
      setEmail("");
      setPhone("");
      setIsSubmitting(false);
      setError(null);

// Close modal and show success
      setShowSignupModal(false);
      alert("Thank you! We'll get back to you soon.");
    } catch (err: any) {
      console.error("Error submitting claim:", err);
      setError(err.message || "Failed to submit request. Please try again.");
      setIsSubmitting(false);
    }
  };

return (
    <div className="min-h-screen bg-gradient-to-br from-primary/5 via-white to-blue-50">
      {/* Header */}
      <header className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-6 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-sm">J</span>
            </div>
            <span className="font-bold text-foreground">Jungle</span>
          </Link>
          <div className="flex items-center gap-3">
            <span className="text-sm text-muted-foreground hidden sm:inline">
              Previewing agent for {businessData.name}
            </span>
          </div>
        </div>
      </header>

<div className="container mx-auto px-6 py-12 max-w-5xl">
        {/* Success Banner */}
        <div className="bg-gradient-to-r from-primary/10 to-blue-50 border border-primary/20 rounded-2xl p-6 mb-8">
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-primary rounded-xl flex items-center justify-center shrink-0">
              <Sparkles className="w-6 h-6 text-white" />
            </div>
            <div className="flex-1">
              <h2 className="text-xl font-bold text-foreground mb-2">
                Your Agent is Ready!
              </h2>
              <p className="text-muted-foreground mb-4">
                We've analyzed your website and created a custom AI agent
                trained on your business information. Try chatting with it
                below!
              </p>
              {/* <div className="flex flex-wrap gap-2 text-sm">
                <div className="px-3 py-1 bg-white rounded-full border border-primary/20">
                  <span className="text-muted-foreground">Services:</span>{" "}
                  <span className="font-medium text-foreground">
                    {businessData.services.length} detected
                  </span>
                </div>
                <div className="px-3 py-1 bg-white rounded-full border border-primary/20">
                  <span className="text-muted-foreground">FAQs:</span>{" "}
                  <span className="font-medium text-foreground">
                    {businessData.faqs.length} extracted
                  </span>
                </div>
                <div className="px-3 py-1 bg-white rounded-full border border-primary/20">
                  <span className="text-muted-foreground">Response Time:</span>{" "}
                  <span className="font-medium text-foreground">2 seconds</span>
                </div>
              </div> */}
            </div>
          </div>
        </div>

<div className="grid md:grid-cols-[1fr,320px] gap-8">
          {/* Chat Preview */}
          <div>
            <h3 className="text-lg font-semibold text-foreground mb-4">
              Test Your Agent
            </h3>
            <div className="bg-white rounded-2xl shadow-xl border-2 border-stone-200 overflow-hidden">
              {/* Chat Header */}
              <div className="flex items-center gap-3 px-4 py-3 bg-[#075e54]">
                <div className="w-10 h-10 rounded-full bg-emerald-400 flex items-center justify-center">
                  <span className="text-lg font-bold text-white">
                    {businessData.name.charAt(0)}
                  </span>
                </div>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-white truncate">
                    {businessData.name}
                  </h3>
                  <div className="flex items-center gap-2">
                    {connected ? (
                      <Wifi className="w-3 h-3 text-emerald-200" />
                    ) : (
                      <WifiOff className="w-3 h-3 text-gray-400" />
                    )}
                    <p className="text-xs text-emerald-200">
                      {isTyping
                        ? "typing..."
                        : connected
                        ? "online"
                        : "connecting..."}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-4 text-white/80">
                  <Video className="w-5 h-5" />
                  <Phone className="w-5 h-5" />
                  <MoreVertical className="w-5 h-5" />
                </div>
              </div>

{/* Chat Messages */}
              <div
                ref={scrollContainerRef}
                className="h-[500px] overflow-y-auto p-4 space-y-2"
                style={{
                  backgroundColor: "#ece5dd",
                  backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23d4cdc4' fillOpacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
                }}
              >
                {error && !connected && (
                  <div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-2">
                    <p className="text-sm text-red-800">{error}</p>
                    <p className="text-xs text-red-600 mt-1">
                      Please check your browser console for more details.
                    </p>
                  </div>
                )}
                {messages.map((message) => {
                  // Handle internal messages (intent detection) with collapsible UI
                  if (message.is_internal) {
                    return (
                      <InternalMessage key={message.id} message={message} />
                    );
                  }

// Regular messages
                  return (
                    <div
                      key={message.id}
                      className={`flex ${
                        message.role === "user"
                          ? "justify-end"
                          : "justify-start"
                      }`}
                    >
                      <div
                        className={`relative max-w-[85%] rounded-lg shadow-md
                          ${
                            message.role === "user"
                              ? "bg-[#dcf8c6] rounded-tr-none px-3 py-2.5"
                              : "bg-white rounded-tl-none px-4 py-3.5 border border-stone-100"
                          }`}
                      >
                        <div
                          className={`absolute top-0 w-3 h-3
                            ${
                              message.role === "user"
                                ? "-right-2 bg-[#dcf8c6]"
                                : "-left-2 bg-white"
                            }`}
                          style={{
                            clipPath:
                              message.role === "user"
                                ? "polygon(0 0, 100% 0, 0 100%)"
                                : "polygon(100% 0, 0 0, 100% 100%)",
                          }}
                        />
                        {message.role === "user" ? (
                          <p className="text-sm text-stone-800 leading-relaxed whitespace-pre-wrap">
                            {message.content}
                          </p>
                        ) : (
                          <div className="text-sm text-stone-800 leading-relaxed markdown-content prose prose-sm max-w-none">
                            <ReactMarkdown
                              components={{
                                p: ({ children }) => (
                                  <p className="mb-3 last:mb-0 text-stone-800 leading-6">
                                    {children}
                                  </p>
                                ),
                                strong: ({ children }) => (
                                  <strong className="font-bold text-stone-900">
                                    {children}
                                  </strong>
                                ),
                                em: ({ children }) => (
                                  <em className="italic text-stone-700">
                                    {children}
                                  </em>
                                ),
                                ul: ({ children }) => (
                                  <ul className="list-disc pl-6 mb-3 space-y-2.5 mt-2">
                                    {children}
                                  </ul>
                                ),
                                ol: ({ children }) => (
                                  <ol className="list-decimal pl-6 mb-3 space-y-2.5 mt-2">
                                    {children}
                                  </ol>
                                ),
                                li: ({ children }) => (
                                  <li className="text-stone-800 leading-6 pl-1">
                                    {children}
                                  </li>
                                ),
                                h1: ({ children }) => (
                                  <h1 className="text-lg font-bold mb-3 mt-4 first:mt-0 text-stone-900">
                                    {children}
                                  </h1>
                                ),
                                h2: ({ children }) => (
                                  <h2 className="text-base font-semibold mb-2.5 mt-4 first:mt-0 text-stone-900">
                                    {children}
                                  </h2>
                                ),
                                h3: ({ children }) => (
                                  <h3 className="text-sm font-semibold mb-2 mt-3 first:mt-0 text-stone-900">
                                    {children}
                                  </h3>
                                ),
                                code: ({ children }) => (
                                  <code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-xs font-mono border border-stone-200">
                                    {children}
                                  </code>
                                ),
                                blockquote: ({ children }) => (
                                  <blockquote className="border-l-4 border-stone-300 pl-4 italic my-3 text-stone-700">
                                    {children}
                                  </blockquote>
                                ),
                                hr: () => (
                                  <hr className="my-4 border-stone-200" />
                                ),
                              }}
                            >
                              {message.content}
                            </ReactMarkdown>
                          </div>
                        )}
                        <div
                          className={`flex items-center gap-1 mt-2.5 ${
                            message.role === "user"
                              ? "justify-end"
                              : "justify-start"
                          }`}
                        >
                          <span className="text-[10px] text-stone-500 font-medium">
                            {message.time}
                          </span>
                          {message.role === "user" && message.status && (
                            <CheckCheck className="w-3.5 h-3.5 text-blue-500" />
                          )}
                        </div>
                      </div>
                    </div>
                  );
                })}

{isTyping && (
                  <div className="flex justify-start">
                    <div className="bg-white rounded-lg rounded-tl-none px-4 py-3 shadow-sm">
                      <div className="flex gap-1">
                        <span
                          className="w-2 h-2 rounded-full bg-stone-400 animate-bounce"
                          style={{ animationDelay: "0ms" }}
                        />
                        <span
                          className="w-2 h-2 rounded-full bg-stone-400 animate-bounce"
                          style={{ animationDelay: "150ms" }}
                        />
                        <span
                          className="w-2 h-2 rounded-full bg-stone-400 animate-bounce"
                          style={{ animationDelay: "300ms" }}
                        />
                      </div>
                    </div>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </div>

{/* Chat Input */}
              <div className="p-2 bg-[#f0f0f0]">
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    handleSend();
                  }}
                  className="flex items-center gap-2"
                >
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="text-stone-500 shrink-0 hover:bg-stone-200"
                  >
                    <Smile className="w-6 h-6" />
                  </Button>
                  <Input
                    ref={inputRef}
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" && !e.shiftKey) {
                        e.preventDefault();
                        handleSend();
                      }
                    }}
                    placeholder="Type a message"
                    disabled={!connected || isTyping}
                    className="flex-1 bg-white border-0 rounded-full focus-visible:ring-0 shadow-sm"
                  />
                  {input.trim() ? (
                    <Button
                      type="submit"
                      size="icon"
                      className="bg-[#075e54] hover:bg-[#064940] text-white rounded-full shrink-0"
                      disabled={!connected || isTyping}
                    >
                      <Send className="w-5 h-5" />
                    </Button>
                  ) : (
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="text-stone-500 shrink-0 hover:bg-stone-200"
                      disabled={!connected || isTyping}
                    >
                      <Mic className="w-6 h-6" />
                    </Button>
                  )}
                </form>
              </div>
            </div>
          </div>

{/* Sidebar CTA */}
          <div>
            <div className="bg-white rounded-2xl shadow-xl border border-stone-200 p-6 sticky top-24">
              <div className="text-center mb-6">
                <div className="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
                  <Sparkles className="w-8 h-8 text-primary" />
                </div>
                <h3 className="text-lg font-bold text-foreground mb-2">
                  Ready to Claim Your Agent?
                </h3>
                <p className="text-sm text-muted-foreground">
                  Sign up to save your conversation history and deploy your
                  agent to WhatsApp & your website
                </p>
              </div>

<Button
                onClick={() => setShowSignupModal(true)}
                className="w-full h-11 bg-primary hover:bg-primary/90"
              >
                Claim Your Agent
              </Button>

<div className="mt-6 pt-6 border-t border-stone-200 space-y-3">
                <p className="text-xs font-semibold text-foreground mb-3">
                  What's included:
                </p>
                <div className="flex items-start gap-2">
                  <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                  <p className="text-sm text-muted-foreground">
                    Save full conversation history
                  </p>
                </div>
                <div className="flex items-start gap-2">
                  <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                  <p className="text-sm text-muted-foreground">
                    Deploy to your website
                  </p>
                </div>
                <div className="flex items-start gap-2">
                  <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                  <p className="text-sm text-muted-foreground">
                    WhatsApp integration (requires setup)
                  </p>
                </div>
                <div className="flex items-start gap-2">
                  <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                  <p className="text-sm text-muted-foreground">
                    Analytics & insights dashboard
                  </p>
                </div>
              </div>

<div className="mt-6 p-4 bg-blue-50 rounded-xl border border-blue-100">
                <p className="text-xs text-blue-900 font-medium mb-1">
                  WhatsApp Agent Available
                </p>
                <p className="text-xs text-blue-700">
                  Connect your WhatsApp Business account after signup for
                  additional configuration and payment
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Signup Modal */}
      <Dialog open={showSignupModal} onOpenChange={setShowSignupModal}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Claim Your Agent</DialogTitle>
            <DialogDescription>
              Provide your contact details and we'll get back to you soon
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleSignup} className="space-y-4">
            {error && (
              <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
                {error}
              </div>
            )}
            <div className="space-y-2">
              <Label htmlFor="name">Full Name</Label>
              <Input
                id="name"
                placeholder="John Doe"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="john@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="phone">Phone Number</Label>
              <Input
                id="phone"
                type="tel"
                placeholder="+65 1234 5678"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                required
              />
            </div>
            <Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2" />
                  Submitting...
                </>
              ) : (
                "Submit Request"
              )}
            </Button>
            <p className="text-xs text-muted-foreground text-center">
              By signing up, you agree to our Terms of Service and Privacy
              Policy
            </p>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default function AgentPreviewPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AgentPreviewContent />
    </Suspense>
  );
}
[V0_FILE]javascript:file="app/api/mail/claim/route.js" isMerged="true"
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req) {
  const body = await req.json();
  const { name, email, phone, website } = body;

try {
    const data = await resend.emails.send({
      from: "Jungle <noreply@notifications.jungle.baby>",
      to: [
        "vaibhav@jungle.baby",
        "devs@jungle.baby",
        "arsalan@jungle.baby",
        "uraj@jungle.baby",
      ],
      subject: "New Agent Request",
      html: `
        <h3>Hello, ${name} wants to claim an agent</h3>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Phone:</strong> ${phone}</p>
        <p><strong>Website:</strong> ${website}</p>
      `,
    });

return Response.json({ success: true, data });
  } catch (error) {
    return Response.json(
      { success: false, error: error.message },
      { status: 500 }
    );
  }
}
[V0_FILE]javascript:file="app/api/mail/contact/route.js" isMerged="true"
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req) {
  const body = await req.json();
  const { name, email, phone, website, message } = body;

try {
    const data = await resend.emails.send({
      from: "Jungle <noreply@notifications.jungle.baby>",
      to: [
        "vaibhav@jungle.baby",
        "devs@jungle.baby",
        "arsalan@jungle.baby",
        "uraj@jungle.baby",
      ],
      subject: "New Contact Submission",
      html: `
        <h3>Hello, ${name} has a message for you</h3>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Phone:</strong> ${phone}</p>
        <p><strong>Website:</strong> ${website}</p>
        <p><strong>Message:</strong> ${message}</p>
      `,
    });

return Response.json({ success: true, data });
  } catch (error) {
    return Response.json(
      { success: false, error: error.message },
      { status: 500 }
    );
  }
}
[V0_FILE]typescript:file="app/api/otp/send/route.ts" isMerged="true"
import { NextRequest, NextResponse } from "next/server";
import twilio from "twilio";

// Initialize Twilio client
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const verifyServiceSid = process.env.TWILIO_VERIFY_SERVICE_SID;

if (!accountSid || !authToken || !verifyServiceSid) {
  console.error("Missing Twilio credentials in environment variables");
}

const client = accountSid && authToken ? twilio(accountSid, authToken) : null;

export async function POST(request: NextRequest) {
  try {
    // Validate Twilio is configured
    if (!client || !verifyServiceSid) {
      return NextResponse.json(
        { error: "OTP service is not configured" },
        { status: 500 }
      );
    }

const body = await request.json();
    const { phoneNumber } = body;

// Validate phone number
    if (!phoneNumber || typeof phoneNumber !== "string") {
      return NextResponse.json(
        { error: "Phone number is required" },
        { status: 400 }
      );
    }

// Check if phone number already has country code (starts with +)
    const hasCountryCode = phoneNumber.trim().startsWith("+");
    
    // Clean phone number (remove spaces, dashes, parentheses, but preserve + if present)
    let cleanedPhone = phoneNumber.replace(/[\s\-()]/g, "");
    
    // If it had a +, keep it; otherwise clean it completely
    if (!hasCountryCode) {
      cleanedPhone = cleanedPhone.replace(/\+/g, "");
    }

// Validate phone number format
    // If it has country code, validate the entire format (E.164 format: + followed by 1-15 digits)
    // If no country code, validate as 8-15 digits
    if (hasCountryCode) {
      // E.164 format: + followed by 1-15 digits
      if (!/^\+\d{1,15}$/.test(cleanedPhone)) {
        return NextResponse.json(
          { error: "Invalid phone number format" },
          { status: 400 }
        );
      }
    } else {
      // No country code: should be 8-15 digits
      if (!/^\d{8,15}$/.test(cleanedPhone)) {
        return NextResponse.json(
          { error: "Invalid phone number format" },
          { status: 400 }
        );
      }
    }

// Format phone number with country code if not present
    // Assuming Singapore (+65) if no country code
    let formattedPhone = cleanedPhone;
    if (!hasCountryCode) {
      // If it starts with 65, add +, otherwise assume it's a local number and add +65
      if (cleanedPhone.startsWith("65")) {
        formattedPhone = `+${cleanedPhone}`;
      } else {
        formattedPhone = `+65${cleanedPhone}`;
      }
    }

// Send OTP using Twilio Verify
    const verification = await client.verify.v2
      .services(verifyServiceSid)
      .verifications.create({
        to: formattedPhone,
        channel: "sms",
      });

return NextResponse.json(
      {
        success: true,
        message: "OTP sent successfully",
        sid: verification.sid,
      },
      { status: 200 }
    );
  } catch (error: any) {
    console.error("Error sending OTP:", error);

// Handle Twilio-specific errors
    if (error.code === 60200) {
      return NextResponse.json(
        { error: "Invalid phone number format" },
        { status: 400 }
      );
    }

if (error.code === 60203) {
      return NextResponse.json(
        { error: "Maximum number of attempts reached. Please try again later." },
        { status: 429 }
      );
    }

// Handle unverified phone number error (Twilio trial account limitation)
    // Error code 21211 or error message containing "unverified"
    if (
      error.code === 21211 ||
      (error.message && 
       error.message.toLowerCase().includes("unverified"))
    ) {
      return NextResponse.json(
        { 
          error: "This phone number is not verified in your Twilio account. Trial accounts can only send messages to verified numbers. Please verify the number at https://www.twilio.com/console/phone-numbers/verified or upgrade your Twilio account."
        },
        { status: 403 }
      );
    }

return NextResponse.json(
      { error: error.message || "Failed to send OTP. Please try again." },
      { status: 500 }
    );
  }
}
[V0_FILE]typescript:file="app/api/otp/verify/route.ts" isMerged="true"
import { NextRequest, NextResponse } from "next/server";
import twilio from "twilio";

// Initialize Twilio client
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const verifyServiceSid = process.env.TWILIO_VERIFY_SERVICE_SID;

if (!accountSid || !authToken || !verifyServiceSid) {
  console.error("Missing Twilio credentials in environment variables");
}

const client = accountSid && authToken ? twilio(accountSid, authToken) : null;

const body = await request.json();
    const { phoneNumber, code } = body;

// Validate inputs
    if (!phoneNumber || typeof phoneNumber !== "string") {
      return NextResponse.json(
        { error: "Phone number is required" },
        { status: 400 }
      );
    }

if (!code || typeof code !== "string" || code.length !== 6) {
      return NextResponse.json(
        { error: "Valid 6-digit OTP code is required" },
        { status: 400 }
      );
    }

// Format phone number with country code if not present (same logic as send route)
    let formattedPhone = cleanedPhone;
    if (!hasCountryCode) {
      if (cleanedPhone.startsWith("65")) {
        formattedPhone = `+${cleanedPhone}`;
      } else {
        formattedPhone = `+65${cleanedPhone}`;
      }
    }

// Verify OTP using Twilio Verify
    const verificationCheck = await client.verify.v2
      .services(verifyServiceSid)
      .verificationChecks.create({
        to: formattedPhone,
        code: code,
      });

if (verificationCheck.status === "approved") {
      return NextResponse.json(
        {
          success: true,
          message: "OTP verified successfully",
          phoneNumber: formattedPhone,
        },
        { status: 200 }
      );
    } else {
      return NextResponse.json(
        { error: "Invalid or expired OTP code" },
        { status: 400 }
      );
    }
  } catch (error: any) {
    console.error("Error verifying OTP:", error);

// Handle Twilio-specific errors
    if (error.code === 20404) {
      return NextResponse.json(
        { error: "OTP verification not found or expired. Please request a new OTP." },
        { status: 404 }
      );
    }

if (error.code === 60202) {
      return NextResponse.json(
        { error: "Too many attempts. Please request a new OTP." },
        { status: 429 }
      );
    }

return NextResponse.json(
      { error: error.message || "Failed to verify OTP. Please try again." },
      { status: 500 }
    );
  }
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true"
"use client";

import type React from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { getFirebaseAuth } from "@/lib/firebase";
import {
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  updateProfile,
} from "firebase/auth";
import { signIn, signUp } from "@/lib/api/auth";

export default function LoginPage() {
  const [isSignUp, setIsSignUp] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

const toggleMode = () => {
    setIsSignUp(!isSignUp);
    setError(null);
    // Clear form fields when switching modes
    setEmail("");
    setPassword("");
    setFirstName("");
    setLastName("");
  };

const handleSignIn = async (e: React.FormEvent) => {
    e.preventDefault();

const trimmedEmail = email.toLowerCase().trim();
    const trimmedPassword = password.trim();

if (!trimmedEmail || !trimmedPassword) {
      setError("Please enter both email and password.");
      return;
    }

setIsSubmitting(true);
    setError(null);

try {
      const auth = getFirebaseAuth();
      const userCredential = await signInWithEmailAndPassword(
        auth,
        trimmedEmail,
        trimmedPassword
      );

// Get ID token and refresh token
      const token = await userCredential.user.getIdToken();
      const refreshToken = userCredential.user.refreshToken;

// Store Firebase refresh token temporarily
      if (refreshToken && typeof window !== "undefined") {
        localStorage.setItem("firebase_refresh_token", refreshToken);
      }

// Call backend API
      const response = await signIn({
        token: token,
        refreshToken: refreshToken || null,
      });

// Store refreshTokenHash from backend response for admin API calls
      if (response.refreshTokenHash && typeof window !== "undefined") {
        localStorage.setItem("refresh_token_hash", response.refreshTokenHash);
      }

// Also store backend refresh token if provided
      if (response.refreshToken && typeof window !== "undefined") {
        localStorage.setItem("backend_refresh_token", response.refreshToken);
      }

// Fetch and store merchant information
      try {
        const { fetchAndStoreMerchantInfo } = await import(
          "@/lib/utils/merchant"
        );
        const refreshTokenHash =
          typeof window !== "undefined"
            ? localStorage.getItem("refresh_token_hash")
            : null;
        if (refreshTokenHash) {
          const merchantInfo = await fetchAndStoreMerchantInfo(
            token,
            refreshTokenHash
          );
          if (!merchantInfo) {
            console.warn(
              "Could not fetch merchant information. Some features may not work correctly."
            );
          } else {
            console.log("Merchant info stored:", merchantInfo);
          }
        } else {
          console.warn(
            "No refresh token hash found. Cannot fetch merchant information."
          );
        }
      } catch (merchantError) {
        console.error("Error fetching merchant info:", merchantError);
        // Don't block login if merchant info fetch fails, but log the error
      }

router.push("/dashboard/products");
    } catch (signInError: any) {
      setError(
        signInError?.message ||
          "Unable to sign you in. Please check your email and password and try again."
      );
      setIsSubmitting(false);
    }
  };

const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault();

const trimmedEmail = email.toLowerCase().trim();
    const trimmedPassword = password.trim();
    const trimmedFirstName = firstName.trim();
    const trimmedLastName = lastName.trim();

if (!trimmedEmail || !trimmedPassword) {
      setError("Please enter both email and password.");
      return;
    }

if (!trimmedFirstName || !trimmedLastName) {
      setError("Please enter both first name and last name.");
      return;
    }

setIsSubmitting(true);
    setError(null);

try {
      const auth = getFirebaseAuth();
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        trimmedEmail,
        trimmedPassword
      );

// Update user profile with first name and last name
      await updateProfile(userCredential.user, {
        displayName: `${trimmedFirstName} ${trimmedLastName}`,
      });

// Get ID token and refresh token
      const token = await userCredential.user.getIdToken();
      const refreshToken = userCredential.user.refreshToken;

// Store Firebase refresh token temporarily
      if (refreshToken && typeof window !== "undefined") {
        localStorage.setItem("firebase_refresh_token", refreshToken);
      }

// Call backend API
      const response = await signUp({
        firstName: trimmedFirstName,
        lastName: trimmedLastName,
        token: token,
        refreshToken: refreshToken || null,
      });

router.push("/dashboard/products");
    } catch (signUpError: any) {
      if (signUpError?.code === "auth/email-already-in-use") {
        setError(
          "An account with this email already exists. Please sign in instead."
        );
      } else {
        setError(
          signUpError?.message ||
            "Unable to create your account. Please try again."
        );
      }
      setIsSubmitting(false);
    }
  };

return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm">
        <div className="flex flex-col gap-6">
          <div className="flex flex-col gap-2 text-center">
            <h1 className="text-3xl font-bold tracking-tight">
              Jungle Academy
            </h1>
            <p className="text-sm text-muted-foreground">
              Kids Activity Management Platform
            </p>
          </div>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Welcome</CardTitle>
              <CardDescription>
                Sign in with email or your Google account to access the
                dashboard
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form
                onSubmit={isSignUp ? handleSignUp : handleSignIn}
                className="flex flex-col gap-4"
              >
                <div className={`grid gap-2 ${!isSignUp ? "hidden" : ""}`}>
                  <Label htmlFor="firstname">First Name</Label>
                  <Input
                    id="firstname"
                    type="text"
                    placeholder="John"
                    required={isSignUp}
                    value={firstName}
                    onChange={(e) => setFirstName(e.target.value)}
                  />
                </div>
                <div className={`grid gap-2 ${!isSignUp ? "hidden" : ""}`}>
                  <Label htmlFor="lastname">Last Name</Label>
                  <Input
                    id="lastname"
                    type="text"
                    placeholder="Doe"
                    required={isSignUp}
                    value={lastName}
                    onChange={(e) => setLastName(e.target.value)}
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="you@example.com"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="password">Password</Label>
                  <Input
                    id="password"
                    type="password"
                    placeholder="••••••••"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    minLength={6}
                  />
                </div>
                <Button
                  type="submit"
                  className="w-full cursor-pointer"
                  disabled={isSubmitting}
                >
                  {isSubmitting
                    ? isSignUp
                      ? "Creating account..."
                      : "Signing in..."
                    : "Continue"}
                </Button>
              </form>

<div className="relative my-2 text-center text-xs text-muted-foreground mt-4">
                <span className="bg-card px-2 relative z-10">
                  {isSignUp
                    ? "Already have an account?"
                    : "Don't have an account?"}
                </span>
                <div className="absolute inset-y-1 left-0 right-0 border-t border-border -z-0" />
              </div>

<button
                type="button"
                onClick={toggleMode}
                className="w-full text-sm text-muted-foreground hover:text-foreground underline underline-offset-4 cursor-pointer"
              >
                {isSignUp ? "Sign in" : "Sign up"}
              </button>

{error && (
                <p className="mt-4 text-sm text-red-500 text-center">{error}</p>
              )}

{/* <div className="mt-4 text-center text-sm text-muted-foreground">
                <Link
                  href="/"
                  className="underline underline-offset-4 cursor-pointer"
                >
                  Back to Home
                </Link>
              </div> */}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/build-agent/loading/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/build-agent/loading/page.tsx" isMerged="true"
"use client";

import { useEffect, useState, useRef, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Check, Loader2 } from "lucide-react";

const steps = [
  { id: 1, label: "Analyzing your website", threshold: 20 },
  { id: 2, label: "Extracting business information", threshold: 40 },
  { id: 3, label: "Training AI agent", threshold: 60 },
  { id: 4, label: "Setting up conversation flows", threshold: 80 },
  { id: 5, label: "Testing responses", threshold: 100 },
];

interface StatusResponse {
  code_name: string;
  status: string;
  website_url: string;
  progress_percentage: number;
  error_message: string | null;
  started_at: string;
  completed_at: string | null;
  is_claimed: boolean;
}

function LoadingContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const url = searchParams.get("url");
  const agentId = searchParams.get("id");
  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
  const [currentStep, setCurrentStep] = useState<number | null>(null);
  const [progressPercentage, setProgressPercentage] = useState(0);
  const isPollingRef = useRef(true);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const apiCallCountRef = useRef(0);
  const isInstantCompletionRef = useRef(false);
  const animationStartTimeRef = useRef<number | null>(null);
  const animationIntervalRef = useRef<NodeJS.Timeout | null>(null);

useEffect(() => {
    if (!url || !agentId) {
      router.push("/build-agent");
      return;
    }

// Reset polling flag to true at the start
    isPollingRef.current = true;

// Get code_name from session storage
    const codeName =
      typeof window !== "undefined"
        ? sessionStorage.getItem("agent_code_name")
        : null;

if (!codeName) {
      console.error("No code_name found in session storage");
      router.push("/build-agent");
      return;
    }

console.log("Starting status polling for code_name:", codeName);

// Function to animate progress for instant completion
    const startInstantCompletionAnimation = () => {
      if (isInstantCompletionRef.current) {
        return; // Already animating
      }

isInstantCompletionRef.current = true;
      animationStartTimeRef.current = Date.now();
      const totalDuration = 120000; // 2 minutes in milliseconds
      const stepDuration = totalDuration / steps.length; // ~24 seconds per step

console.log("Starting instant completion animation (2 minutes)");

let currentStepIndex = 0;
      let currentProgress = 0;

const animate = () => {
        const elapsed = Date.now() - (animationStartTimeRef.current || 0);
        const progress = Math.min((elapsed / totalDuration) * 100, 100);

// Update progress percentage
        setProgressPercentage(progress);

// Determine which steps should be completed based on elapsed time
        const newCompletedSteps: number[] = [];
        let newCurrentStep: number | null = null;

steps.forEach((step, index) => {
          const stepStartTime = index * stepDuration;
          const stepEndTime = (index + 1) * stepDuration;

if (elapsed >= stepEndTime) {
            // Step is completed
            newCompletedSteps.push(step.id);
          } else if (elapsed >= stepStartTime && newCurrentStep === null) {
            // This is the current step
            newCurrentStep = index;
          }
        });

// If all steps are completed, set current step to null
        if (newCompletedSteps.length === steps.length) {
          newCurrentStep = null;
        } else if (newCurrentStep === null) {
          newCurrentStep = steps.length - 1;
        }

setCompletedSteps(newCompletedSteps);
        setCurrentStep(newCurrentStep);

// If animation is complete, stop and navigate
        if (progress >= 100) {
          console.log("Instant completion animation finished");
          if (animationIntervalRef.current) {
            clearInterval(animationIntervalRef.current);
            animationIntervalRef.current = null;
          }
          isPollingRef.current = false;
          // Navigate to preview page after a short delay
          setTimeout(() => {
            router.push(
              `/agent-preview/${agentId}?url=${encodeURIComponent(url)}`
            );
          }, 500);
        }
      };

// Animate every 100ms for smooth progress
      animationIntervalRef.current = setInterval(animate, 100);
      animate(); // Initial call
    };

// Function to fetch status
    const fetchStatus = async () => {
      if (!isPollingRef.current) {
        console.log("Polling stopped, skipping fetch");
        return;
      }

try {
        apiCallCountRef.current += 1;
        const callNumber = apiCallCountRef.current;
        console.log(`Fetching status... (Call #${callNumber})`);

const response = await fetch(
          `https://agent-demo.jungle.baby/api/trial/${codeName}/status`
        );

if (!response.ok) {
          throw new Error(`Failed to fetch status: ${response.status}`);
        }

const data: StatusResponse = await response.json();
        const progress = data.progress_percentage || 0;

console.log(
          `Status fetched (Call #${callNumber}), progress:`,
          progress
        );

// Check if this is instant completion (100% on 1st or 2nd call)
        if (progress >= 100 && (callNumber === 1 || callNumber === 2)) {
          console.log(
            "Instant completion detected! Starting 2-minute animation..."
          );
          // Stop polling
          isPollingRef.current = false;
          if (intervalRef.current) {
            clearInterval(intervalRef.current);
            intervalRef.current = null;
          }
          // Start animation
          startInstantCompletionAnimation();
          return;
        }

// Normal flow: update progress immediately
        setProgressPercentage(progress);

// Determine which steps are completed based on progress
        const newCompletedSteps: number[] = [];
        let newCurrentStep: number | null = null;

steps.forEach((step, index) => {
          if (progress >= step.threshold) {
            newCompletedSteps.push(step.id);
          } else if (newCurrentStep === null) {
            newCurrentStep = index;
          }
        });

setCompletedSteps(newCompletedSteps);
        setCurrentStep(newCurrentStep);

// If progress is 100%, stop polling and navigate
        if (progress >= 100) {
          console.log("Progress reached 100%, stopping polling");
          isPollingRef.current = false;
          // Navigate to preview page after a short delay
          setTimeout(() => {
            router.push(
              `/agent-preview/${agentId}?url=${encodeURIComponent(url)}`
            );
          }, 1000);
        }
      } catch (error) {
        console.error("Error fetching status:", error);
        // Continue polling even on error
      }
    };

// Initial fetch
    fetchStatus();

// Set up interval to poll every 5 seconds
    console.log("Setting up interval for status polling");
    // Clear any existing interval first
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }

intervalRef.current = setInterval(() => {
      console.log("Interval triggered, calling fetchStatus");
      if (isPollingRef.current) {
        fetchStatus();
      } else {
        console.log("Polling stopped, skipping fetch");
      }
    }, 5000);

// Cleanup interval on unmount
    return () => {
      console.log("Cleaning up interval");
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
      if (animationIntervalRef.current) {
        clearInterval(animationIntervalRef.current);
        animationIntervalRef.current = null;
      }
      // Don't set isPollingRef.current = false here as it might affect
      // the interval callback that's already scheduled
    };
  }, [url, agentId, router]);

return (
    <div className="min-h-screen bg-gradient-to-br from-primary/5 via-white to-blue-50 flex items-center justify-center px-6">
      <div className="max-w-lg w-full">
        {/* Header */}
        <div className="text-center mb-12">
          <div className="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
            <Loader2 className="w-8 h-8 text-white animate-spin" />
          </div>
          <h1 className="text-3xl font-bold text-foreground mb-3">
            Building Your Agent
          </h1>
          <p className="text-muted-foreground">
            This will take a while... Please don't refresh the page.
          </p>
        </div>

{/* Progress Steps */}
        <div className="bg-white rounded-2xl shadow-xl border border-stone-200 p-8">
          <div className="space-y-4">
            {steps.map((step, index) => {
              const isCompleted = completedSteps.includes(step.id);
              const isCurrent = currentStep === index;
              const isPending = !isCompleted && !isCurrent;

// Calculate progress bar width for current step
              let progressWidth = 0;
              if (isCurrent) {
                const prevThreshold =
                  index > 0 ? steps[index - 1].threshold : 0;
                const currentThreshold = step.threshold;
                const range = currentThreshold - prevThreshold;
                const progressInRange = progressPercentage - prevThreshold;
                progressWidth = Math.min(
                  Math.max((progressInRange / range) * 100, 0),
                  100
                );
              }

return (
                <div key={step.id} className="flex items-start gap-4">
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-all duration-300
                    ${
                      isCompleted
                        ? "bg-primary"
                        : isCurrent
                        ? "bg-primary/20 border-2 border-primary"
                        : "bg-stone-100 border-2 border-stone-200"
                    }`}
                  >
                    {isCompleted ? (
                      <Check className="w-4 h-4 text-white" />
                    ) : isCurrent ? (
                      <div className="w-3 h-3 bg-primary rounded-full animate-pulse" />
                    ) : (
                      <span className="text-sm font-semibold text-stone-400">
                        {step.id}
                      </span>
                    )}
                  </div>
                  <div className="flex-1 pt-1">
                    <p
                      className={`font-medium transition-colors duration-300
                      ${
                        isCompleted
                          ? "text-primary"
                          : isCurrent
                          ? "text-foreground"
                          : "text-muted-foreground"
                      }`}
                    >
                      {step.label}
                    </p>
                    {isCurrent && (
                      <div className="mt-2 h-1 bg-stone-100 rounded-full overflow-hidden">
                        <div
                          className="h-full bg-primary rounded-full transition-all duration-500"
                          style={{ width: `${progressWidth}%` }}
                        />
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

{/* Footer */}
        <div className="mt-6 text-center">
          <p className="text-sm text-muted-foreground">
            Analyzing <span className="font-medium text-foreground">{url}</span>
          </p>
        </div>
      </div>
    </div>
  );
}

export default function LoadingPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-gradient-to-br from-primary/5 via-white to-blue-50 flex items-center justify-center">
          <Loader2 className="w-8 h-8 text-primary animate-spin" />
        </div>
      }
    >
      <LoadingContent />
    </Suspense>
  );
}
[V0_FILE]typescriptreact:file="app/build-agent/page.tsx" isMerged="true"
"use client";

import type React from "react";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ArrowRight, Globe, Sparkles } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function BuildAgentPage() {
  const [url, setUrl] = useState("");
  const [isValidating, setIsValidating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

// Generate a unique browser tracking ID
  const generateBrowserTrackingId = (): string => {
    // Try to use crypto.randomUUID if available (modern browsers)
    if (typeof crypto !== "undefined" && crypto.randomUUID) {
      return crypto.randomUUID();
    }
    // Fallback: generate a random UUID-like string
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
      const r = (Math.random() * 16) | 0;
      const v = c === "x" ? r : (r & 0x3) | 0x8;
      return v.toString(16);
    });
  };

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!url.trim()) return;

setIsValidating(true);
    setError(null);

try {
      const browserTrackingId = generateBrowserTrackingId();

// Call the API
      const response = await fetch(
        "https://agent-demo.jungle.baby/api/trial/start",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            website_url: url.trim(),
            browser_tracking_id: browserTrackingId,
          }),
        }
      );

if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(
          errorData.message || "Failed to start trial. Please try again."
        );
      }

const data = await response.json().catch(() => ({}));

// Save code_name to session storage
      if (data.code_name) {
        if (typeof window !== "undefined") {
          sessionStorage.setItem("agent_code_name", data.code_name);
        }
      }

// Generate a simple agent ID from the URL
      const agentId = btoa(url)
        .replace(/[^a-zA-Z0-9]/g, "")
        .substring(0, 12);

// Navigate to loading page with the URL and tracking ID
      router.push(
        `/build-agent/loading?url=${encodeURIComponent(
          url
        )}&id=${agentId}&tracking=${encodeURIComponent(browserTrackingId)}`
      );
    } catch (err: any) {
      console.error("Error starting trial:", err);
      setError(err.message || "Failed to start trial. Please try again.");
      setIsValidating(false);
    }
  };

return (
    <div className="min-h-screen bg-gradient-to-br from-primary/5 via-white to-blue-50">
      {/* Header */}
      <header className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-6 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-sm">J</span>
            </div>
            <span className="font-bold text-foreground">Jungle</span>
          </Link>
          <Link
            href="/"
            className="text-sm text-muted-foreground hover:text-foreground"
          >
            Back to Home
          </Link>
        </div>
      </header>

{/* Main Content */}
      <div className="container mx-auto px-6 py-20 max-w-2xl">
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-primary/20 bg-primary/5 text-sm text-primary mb-6">
            <Sparkles className="w-4 h-4" />
            Build Your AI Agent in 3 Minutes
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
            Create Your Chat Agent
          </h1>
          <p className="text-lg text-muted-foreground max-w-xl mx-auto">
            Enter your website URL and we'll analyze your business to create a
            custom AI agent that answers questions and converts inquiries 24/7.
          </p>
        </div>

{/* Form Card */}
        <div className="bg-white rounded-2xl shadow-xl border border-stone-200 p-8 md:p-10">
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="website-url" className="text-base font-semibold">
                Your Website URL
              </Label>
              <div className="relative">
                <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                <Input
                  id="website-url"
                  type="url"
                  placeholder="https://yourwebsite.com"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  className="pl-10 h-12 text-base"
                  required
                />
              </div>
              <p className="text-sm text-muted-foreground">
                By clicking "Create Agent," I confirm I'm authorized to represent 
                this business and consent to Jungle analyzing my website to train the AI agent.
              </p>
            </div>

{error && (
              <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
                {error}
              </div>
            )}

<Button
              type="submit"
              size="lg"
              className="w-full h-12 text-base bg-primary hover:bg-primary/90"
              disabled={isValidating}
            >
              {isValidating ? (
                <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2" />
                  Creating...
                </>
              ) : (
                <>
                  Create Agent
                  <ArrowRight className="ml-2 w-5 h-5" />
                </>
              )}
            </Button>
          </form>

{/* Features */}
          <div className="mt-8 pt-8 border-t border-stone-200">
            <p className="text-sm font-semibold text-foreground mb-4">
              What happens next?
            </p>
            <div className="space-y-3">
              <div className="flex items-start gap-3">
                <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-primary">1</span>
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">
                    We analyze your website
                  </p>
                  <p className="text-xs text-muted-foreground">
                    Extract services, FAQs, business hours, and more
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-primary">2</span>
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">
                    AI trains on your data
                  </p>
                  <p className="text-xs text-muted-foreground">
                    Creates personalized responses for your business
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
                  <span className="text-xs font-bold text-primary">3</span>
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">
                    Test your agent instantly
                  </p>
                  <p className="text-xs text-muted-foreground">
                    Try it out before signing up
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* Trust Indicators */}
        {/* <div className="mt-8 text-center">
          <p className="text-sm text-muted-foreground">
             No credit card required • Free to test • 60-70% conversion rate
          </p>
        </div> */}
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/classes/layout.tsx" isMerged="true"
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Classes - MyGym | Learn. Play. Grow!',
  description: 'Discover exciting classes and enrichment programmes at MyGym designed to spark curiosity, creativity, and confidence in children of all ages. Explore our wide range of classes across multiple locations.',
  keywords: ['MyGym', 'classes', 'enrichment programmes', 'children activities', 'learning', 'play', 'grow'],
  openGraph: {
    title: 'Classes - MyGym | Learn. Play. Grow!',
    description: 'Discover exciting classes and enrichment programmes at MyGym designed to spark curiosity, creativity, and confidence in children of all ages.',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Classes - MyGym | Learn. Play. Grow!',
    description: 'Discover exciting classes and enrichment programmes at MyGym designed to spark curiosity, creativity, and confidence in children of all ages.',
  },
}

export default function ClassesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return children
}
[V0_FILE]typescriptreact:file="app/classes/page.tsx" isMerged="true"
"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { API_BASE_URL } from "@/lib/api/config";
import {
  Users,
  Clock,
  Calendar,
  CalendarCheck,
  GraduationCap,
  Sparkles,
} from "lucide-react";
import Image from "next/image";
import { Badge } from "@/components/ui/badge";

interface Location {
  id: number;
  name: string;
}

interface ClassDetail {
  id: number;
  classID: string;
  productId: number;
  product?: {
    id: number;
    name: string;
    description?: string;
    productType?: string;
    ageMin?: number;
    ageMax?: number;
  };
  duration?: number;
  maxCapacity?: number;
  [key: string]: unknown;
}

interface Schedule {
  id: number;
  scheduleID?: string;
  productId?: number;
  dayOfWeek?: number;
  startTime?: string;
  endTime?: string;
  scheduleType?: string;
  recurrenceRule?: string;
  maxCapacity?: number;
  specificDate?: string;
  specificStartTime?: string;
  specificEndTime?: string;
  rangeStartDate?: string;
  rangeEndDate?: string;
  [key: string]: unknown;
}

const dayNumberToName: { [key: number]: string } = {
  0: "Sunday",
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
  4: "Thursday",
  5: "Friday",
  6: "Saturday",
};

// Hardcoded locations for mygym merchant
const LOCATIONS: Location[] = [
  { id: 7, name: "Tampines" },
  { id: 8, name: "Jurong East" },
  { id: 9, name: "Great World" },
  { id: 10, name: "Punggol" },
];

export default function ClassesPage() {
  const [selectedLocationId, setSelectedLocationId] = useState<number | null>(
    LOCATIONS.length > 0 ? LOCATIONS[0].id : null
  );
  const [classes, setClasses] = useState<ClassDetail[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [selectedClass, setSelectedClass] = useState<ClassDetail | null>(null);
  const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
  const [selectedClassForDetails, setSelectedClassForDetails] =
    useState<ClassDetail | null>(null);
  const [isDetailsSheetOpen, setIsDetailsSheetOpen] = useState<boolean>(false);
  const [schedules, setSchedules] = useState<Schedule[]>([]);
  const [detailsSchedules, setDetailsSchedules] = useState<Schedule[]>([]);
  const [isLoadingSchedules, setIsLoadingSchedules] = useState<boolean>(false);
  const [isLoadingDetailsSchedules, setIsLoadingDetailsSchedules] =
    useState<boolean>(false);
  const [scheduleError, setScheduleError] = useState<string | null>(null);
  const [detailsScheduleError, setDetailsScheduleError] = useState<
    string | null
  >(null);

// Fetch classes when location is selected
  useEffect(() => {
    const fetchClasses = async () => {
      if (!selectedLocationId) {
        setClasses([]);
        return;
      }

try {
        setIsLoading(true);
        setError(null);

// Call the public API (no authentication required)
        const url = `${API_BASE_URL}/class-details?locationId=${selectedLocationId}&category=true&product=true`;

const response = await fetch(url, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });

if (!response.ok) {
          const errorData = await response.json().catch(() => ({}));
          throw new Error(
            errorData.message || "Failed to fetch classes. Please try again."
          );
        }

const data = await response.json();
        const classesData = Array.isArray(data) ? data : data.data || [];
        setClasses(classesData);
      } catch (err: any) {
        console.error("Error fetching classes:", err);
        setError(err.message || "Failed to load classes. Please try again.");
        setClasses([]);
      } finally {
        setIsLoading(false);
      }
    };

fetchClasses();
  }, [selectedLocationId]);

// Fetch schedules when sheet opens
  useEffect(() => {
    const fetchSchedules = async () => {
      if (!isSheetOpen || !selectedClass) {
        setSchedules([]);
        return;
      }

const productId = selectedClass.productId || selectedClass.product?.id;
      if (!productId) {
        setSchedules([]);
        return;
      }

try {
        setIsLoadingSchedules(true);
        setScheduleError(null);

// Call the public API (no authentication required)
        const url = `${API_BASE_URL}/product/${productId}/schedules`;

const response = await fetch(url, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });

if (!response.ok) {
          const errorData = await response.json().catch(() => ({}));
          throw new Error(
            errorData.message || "Failed to fetch schedules. Please try again."
          );
        }

const data = await response.json();
        const schedulesData = Array.isArray(data) ? data : data.data || [];
        setSchedules(schedulesData);
      } catch (err: any) {
        console.error("Error fetching schedules:", err);
        setScheduleError(
          err.message || "Failed to load schedules. Please try again."
        );
        setSchedules([]);
      } finally {
        setIsLoadingSchedules(false);
      }
    };

fetchSchedules();
  }, [isSheetOpen, selectedClass]);

// Fetch schedules for details sheet
  useEffect(() => {
    const fetchDetailsSchedules = async () => {
      if (!isDetailsSheetOpen || !selectedClassForDetails) {
        setDetailsSchedules([]);
        return;
      }

const productId =
        selectedClassForDetails.productId ||
        selectedClassForDetails.product?.id;
      if (!productId) {
        setDetailsSchedules([]);
        return;
      }

try {
        setIsLoadingDetailsSchedules(true);
        setDetailsScheduleError(null);

// Call the public API (no authentication required)
        const url = `${API_BASE_URL}/product/${productId}/schedules`;

const response = await fetch(url, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });

const data = await response.json();
        const schedulesData = Array.isArray(data) ? data : data.data || [];
        setDetailsSchedules(schedulesData);
      } catch (err: any) {
        console.error("Error fetching schedules:", err);
        setDetailsScheduleError(
          err.message || "Failed to load schedules. Please try again."
        );
        setDetailsSchedules([]);
      } finally {
        setIsLoadingDetailsSchedules(false);
      }
    };

fetchDetailsSchedules();
  }, [isDetailsSheetOpen, selectedClassForDetails]);

const handleViewSchedule = (classItem: ClassDetail) => {
    setSelectedClass(classItem);
    setIsSheetOpen(true);
  };

const handleViewDetails = (classItem: ClassDetail) => {
    setSelectedClassForDetails(classItem);
    setIsDetailsSheetOpen(true);
  };

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur-sm">
        <div className="container mx-auto px-6 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-sm">
              J
            </div>
            <span className="text-xl font-semibold text-foreground">
              Jungle
            </span>
          </Link>

<nav className="hidden md:flex items-center gap-8">
            <Link
              href="#products"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Products
            </Link>
            <Link
              href="#customers"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Customers
            </Link>
            <Link
              href="/pricing"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Pricing
            </Link>
            <Link
              href="/classes"
              className="text-sm font-medium text-foreground"
            >
              Classes
            </Link>
          </nav>

<div className="flex items-center gap-3">
            <Button
              variant="ghost"
              asChild
              className="text-muted-foreground hover:text-foreground"
            >
              <Link href="/auth/login">Log in</Link>
            </Button>
            <Button
              asChild
              className="bg-primary text-primary-foreground hover:bg-primary/90"
            >
              <Link
                href="https://cal.com/junglesg/30min"
                target="_blank"
                rel="noopener noreferrer"
              >
                Schedule Call
              </Link>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-6 py-12">
        {/* Hero Section */}
        <div className="mb-12 text-center">
          {/* Welcome Badge */}
          <div className="inline-flex items-center gap-2 rounded-full bg-primary/10 border border-primary/20 px-4 py-2 mb-6">
            <Sparkles className="h-4 w-4 text-primary" />
            <span className="text-sm font-semibold text-primary">
              Welcome to MyGym
            </span>
          </div>

{/* Main Heading */}
          <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6 text-foreground">
            Learn. Play. Grow!
          </h1>

{/* Description */}
          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
            Exciting classes and enrichment programmes designed to spark
            curiosity, creativity, and confidence in children of all ages.
          </p>
        </div>

{/* Location Selection */}
        <div className="mb-8">
          <h2 className="text-xl font-semibold mb-4">Select Location</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {LOCATIONS.map((location) => (
              <Card
                key={location.id}
                className={`cursor-pointer transition-all duration-200 ${
                  selectedLocationId === location.id
                    ? "ring-2 ring-primary shadow-lg bg-primary/5 border-primary"
                    : "hover:shadow-md hover:border-primary/50"
                }`}
                onClick={() => setSelectedLocationId(location.id)}
              >
                <CardContent className="p-6">
                  <div className="flex items-center justify-center min-h-[80px]">
                    <h3
                      className={`text-xl font-semibold text-center ${
                        selectedLocationId === location.id
                          ? "text-primary"
                          : "text-foreground"
                      }`}
                    >
                      {location.name}
                    </h3>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Classes List */}
        {selectedLocationId && (
          <div>
            <h2 className="text-xl font-semibold mb-4">
              Classes at{" "}
              {LOCATIONS.find((l) => l.id === selectedLocationId)?.name}
            </h2>

{isLoading ? (
              <div className="space-y-6">
                {[1, 2, 3].map((index) => (
                  <Card key={index} className="overflow-hidden">
                    <div className="flex flex-col lg:flex-row gap-6 p-6">
                      {/* Image Skeleton */}
                      <Skeleton className="w-full lg:w-64 h-48 rounded-xl flex-shrink-0" />

{/* Content Skeleton */}
                      <div className="flex-1 space-y-4">
                        {/* Badge and Title Skeleton */}
                        <div className="space-y-2">
                          <Skeleton className="h-6 w-20 rounded-full" />
                          <div className="space-y-2">
                            <Skeleton className="h-8 w-48" />
                            <Skeleton className="h-4 w-24" />
                          </div>
                        </div>

{/* Description Skeleton */}
                        <div className="space-y-2">
                          <Skeleton className="h-4 w-full" />
                          <Skeleton className="h-4 w-3/4" />
                        </div>

{/* Details Skeleton */}
                        <div className="flex flex-wrap items-center gap-4 pt-2 border-t">
                          <Skeleton className="h-4 w-32" />
                          <Skeleton className="h-4 w-24" />
                          <Skeleton className="h-4 w-36" />
                        </div>

{/* Buttons Skeleton */}
                        <div className="flex items-center gap-3 pt-2">
                          <Skeleton className="h-9 w-24" />
                          <Skeleton className="h-9 w-32" />
                        </div>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            ) : error ? (
              <Card>
                <CardContent className="p-6">
                  <p className="text-destructive">{error}</p>
                </CardContent>
              </Card>
            ) : classes.length > 0 ? (
              <div className="space-y-6">
                {classes.map((classItem) => {
                  const className =
                    classItem.product?.name || `Class ${classItem.id}`;
                  const description = classItem.product?.description || "";
                  const ageMin = classItem.product?.ageMin || 0;
                  const ageMax = classItem.product?.ageMax || 0;
                  const ageInYears = (age: number) => Math.floor(age / 12);
                  const ageInMonths = (age: number) => age % 12;
                  const formatAge = (min: number, max: number) => {
                    if (min === 0 && max === 0) return "";
                    const minYears = ageInYears(min);
                    const minMonths = ageInMonths(min);
                    const maxYears = ageInYears(max);
                    const maxMonths = ageInMonths(max);

const minStr =
                      minYears > 0
                        ? `${minYears}${
                            minMonths > 0 ? ` ${minMonths}mos` : ""
                          }yrs`
                        : `${minMonths}mos`;
                    const maxStr =
                      maxYears > 0
                        ? `${maxYears}${
                            maxMonths > 0 ? ` ${maxMonths}mos` : ""
                          }yrs`
                        : `${maxMonths}mos`;

return `${minStr} - ${maxStr}`;
                  };

return (
                    <Card key={classItem.id} className="overflow-hidden">
                      <div className="flex flex-col lg:flex-row gap-6 p-6">
                        {/* Image Section */}
                        <div className="relative w-full lg:w-64 h-48 rounded-xl overflow-hidden bg-muted flex-shrink-0">
                          {(classItem.product as any)?.imageUrl ? (
                            <Image
                              src={(classItem.product as any).imageUrl}
                              alt={className}
                              fill
                              className="object-cover"
                            />
                          ) : (
                            <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/20 to-primary/10">
                              <div className="text-4xl font-bold text-primary/30">
                                {className.charAt(0)}
                              </div>
                            </div>
                          )}
                        </div>

{/* Content Section */}
                        <div className="flex-1 space-y-4">
                          {/* Badge and Title */}
                          <div className="space-y-2">
                            <div className="flex items-center gap-2 flex-wrap">
                              <span className="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary uppercase">
                                CLASS
                              </span>
                              {selectedLocationId && (
                                <span className="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700">
                                  {LOCATIONS.find(
                                    (l) => l.id === selectedLocationId
                                  )?.name || `Location ${selectedLocationId}`}
                                </span>
                              )}
                            </div>
                            <div>
                              <h3 className="text-2xl font-bold text-foreground mb-1">
                                {className}
                              </h3>
                              <p className="text-sm text-muted-foreground">
                                by MyGym
                              </p>
                            </div>
                          </div>

{/* Description */}
                          {description && (
                            <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">
                              {description}
                            </p>
                          )}

{/* Details */}
                          <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground pt-2 border-t">
                            {formatAge(ageMin, ageMax) && (
                              <span className="flex items-center gap-1.5">
                                <Users className="h-4 w-4 text-primary" />
                                {formatAge(ageMin, ageMax)}
                              </span>
                            )}
                            {classItem.duration && (
                              <span className="flex items-center gap-1.5">
                                <Clock className="h-4 w-4 text-primary" />
                                {classItem.duration} min
                              </span>
                            )}
                            {classItem.maxCapacity && (
                              <span className="flex items-center gap-1.5">
                                <Users className="h-4 w-4 text-primary" />
                                Max {classItem.maxCapacity} students
                              </span>
                            )}
                          </div>

{/* Action Buttons */}
                          <div className="flex items-center gap-3 pt-2">
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleViewDetails(classItem)}
                            >
                              Details
                            </Button>
                            <Button
                              size="sm"
                              className="bg-primary text-primary-foreground"
                            >
                              Book Now
                            </Button>
                          </div>
                        </div>
                      </div>
                    </Card>
                  );
                })}
              </div>
            ) : (
              <Card>
                <CardContent className="p-6">
                  <p className="text-muted-foreground text-center">
                    No classes found for this location.
                  </p>
                </CardContent>
              </Card>
            )}
          </div>
        )}
      </div>

{/* Schedule Sheet */}
      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
        <SheetContent className="w-full sm:max-w-2xl overflow-y-auto p-0">
          {selectedClass && (
            <div className="h-full flex flex-col">
              <SheetHeader className="px-6 py-4 border-b">
                <SheetTitle className="text-2xl text-emerald-600">
                  {selectedClass.product?.name || "Class"} Schedule
                </SheetTitle>
                <SheetDescription className="text-base">
                  View all available schedules for this class
                </SheetDescription>
              </SheetHeader>
              <div className="flex-1 overflow-y-auto px-6 py-6 space-y-8">
                <div className="space-y-4">
                  <h4 className="text-lg font-semibold">Schedule</h4>
                  <div className="space-y-3">
                    {isLoadingSchedules ? (
                      <div className="text-muted-foreground">
                        Loading schedule...
                      </div>
                    ) : scheduleError ? (
                      <div className="text-muted-foreground text-destructive">
                        {scheduleError}
                      </div>
                    ) : schedules.length > 0 ? (
                      schedules
                        .filter((schedule) => {
                          // Only show RECURRING schedules with dayOfWeek
                          if (schedule.scheduleType === "RECURRING") {
                            return (
                              schedule.dayOfWeek !== null &&
                              schedule.dayOfWeek !== undefined
                            );
                          }
                          return false;
                        })
                        .map((schedule) => {
                          const dayName =
                            schedule.dayOfWeek !== null &&
                            schedule.dayOfWeek !== undefined
                              ? dayNumberToName[schedule.dayOfWeek] || ""
                              : "";

return (
                            <div
                              key={schedule.id}
                              className="flex items-center gap-4 p-4 rounded-lg bg-muted"
                            >
                              <Calendar className="h-6 w-6 text-muted-foreground" />
                              <div className="flex-1">
                                <div className="font-medium text-base">
                                  {dayName}
                                </div>
                                <div className="text-sm text-muted-foreground">
                                  {schedule.startTime} - {schedule.endTime}
                                </div>
                              </div>
                            </div>
                          );
                        })
                    ) : (
                      <div className="text-muted-foreground">
                        No schedule available
                      </div>
                    )}
                  </div>
                </div>
              </div>
              <div className="px-6 py-4 border-t bg-background">
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() => setIsSheetOpen(false)}
                >
                  Close
                </Button>
              </div>
            </div>
          )}
        </SheetContent>
      </Sheet>

{/* Details Sheet */}
      <Sheet open={isDetailsSheetOpen} onOpenChange={setIsDetailsSheetOpen}>
        <SheetContent className="w-full sm:max-w-2xl overflow-y-auto p-0">
          {selectedClassForDetails && (
            <div className="h-full flex flex-col">
              <SheetHeader className="px-6 py-4 border-b">
                <SheetTitle className="text-2xl text-emerald-600">
                  {selectedClassForDetails.product?.name || "Unnamed Class"}
                </SheetTitle>
                <SheetDescription className="text-base">
                  {selectedClassForDetails.product?.description ||
                    "No description available"}
                </SheetDescription>
              </SheetHeader>
              <div className="flex-1 overflow-y-auto px-6 py-6 space-y-8">
                {/* Class Image */}
                <div className="space-y-4">
                  {(selectedClassForDetails.product as any)?.imageUrl ||
                  (selectedClassForDetails.product as any)?.thumbnailUrl ? (
                    <img
                      src={
                        (selectedClassForDetails.product as any)?.imageUrl ||
                        (selectedClassForDetails.product as any)
                          ?.thumbnailUrl ||
                        undefined
                      }
                      alt={selectedClassForDetails.product?.name || "Class"}
                      className="w-full h-64 rounded-lg object-cover"
                    />
                  ) : (
                    <div className="w-full h-64 rounded-lg bg-muted flex items-center justify-center">
                      <GraduationCap className="h-24 w-24 text-muted-foreground" />
                    </div>
                  )}
                </div>

{/* Class Details */}
                <div className="space-y-4">
                  <h4 className="text-lg font-semibold">Class Details</h4>
                  <div className="space-y-3">
                    {selectedClassForDetails.product?.productType && (
                      <div className="flex justify-between py-3 border-b">
                        <span className="text-muted-foreground">
                          Product Type
                        </span>
                        <span className="font-medium">
                          {selectedClassForDetails.product.productType}
                        </span>
                      </div>
                    )}
                    {selectedClassForDetails.product?.ageMin !== undefined &&
                      selectedClassForDetails.product?.ageMax !== undefined && (
                        <div className="flex justify-between py-3 border-b">
                          <span className="text-muted-foreground">
                            Age Range
                          </span>
                          <span className="font-medium">
                            {(() => {
                              const ageMin =
                                selectedClassForDetails.product?.ageMin || 0;
                              const ageMax =
                                selectedClassForDetails.product?.ageMax || 0;
                              const ageInYears = (age: number) =>
                                Math.floor(age / 12);
                              const ageInMonths = (age: number) => age % 12;
                              const formatAge = (months: number) => {
                                const years = ageInYears(months);
                                const monthsRem = ageInMonths(months);
                                if (years > 0) {
                                  return monthsRem > 0
                                    ? `${years} year${
                                        years > 1 ? "s" : ""
                                      } ${monthsRem} month${
                                        monthsRem > 1 ? "s" : ""
                                      }`
                                    : `${years} year${years > 1 ? "s" : ""}`;
                                }
                                return `${monthsRem} month${
                                  monthsRem > 1 ? "s" : ""
                                }`;
                              };
                              return `${formatAge(ageMin)} - ${formatAge(
                                ageMax
                              )}`;
                            })()}
                          </span>
                        </div>
                      )}
                    {selectedClassForDetails.duration !== undefined && (
                      <div className="flex justify-between py-3 border-b">
                        <span className="text-muted-foreground">Duration</span>
                        <span className="font-medium">
                          {selectedClassForDetails.duration} minutes
                        </span>
                      </div>
                    )}
                    {selectedClassForDetails.maxCapacity !== undefined && (
                      <div className="flex justify-between py-3 border-b">
                        <span className="text-muted-foreground">
                          Max Capacity
                        </span>
                        <span className="font-medium">
                          {selectedClassForDetails.maxCapacity} students
                        </span>
                      </div>
                    )}
                    {selectedClassForDetails.classID && (
                      <div className="flex justify-between py-3 border-b">
                        <span className="text-muted-foreground">Class ID</span>
                        <span className="font-medium">
                          {selectedClassForDetails.classID}
                        </span>
                      </div>
                    )}
                  </div>
                </div>

{/* Schedule */}
                <div className="space-y-4">
                  <h4 className="text-lg font-semibold">Schedule</h4>
                  <div className="space-y-3">
                    {isLoadingDetailsSchedules ? (
                      <div className="text-muted-foreground">
                        Loading schedule...
                      </div>
                    ) : detailsScheduleError ? (
                      <div className="text-muted-foreground text-destructive">
                        {detailsScheduleError}
                      </div>
                    ) : detailsSchedules.length > 0 ? (
                      detailsSchedules
                        .filter((schedule) => {
                          // Only show RECURRING schedules with dayOfWeek
                          if (schedule.scheduleType === "RECURRING") {
                            return (
                              schedule.dayOfWeek !== null &&
                              schedule.dayOfWeek !== undefined
                            );
                          }
                          return false;
                        })
                        .map((schedule) => {
                          const dayName =
                            schedule.dayOfWeek !== null &&
                            schedule.dayOfWeek !== undefined
                              ? dayNumberToName[schedule.dayOfWeek] || ""
                              : "";

return (
                            <div
                              key={schedule.id}
                              className="flex items-center gap-4 p-4 rounded-lg bg-muted"
                            >
                              <Calendar className="h-6 w-6 text-muted-foreground" />
                              <div className="flex-1">
                                <div className="font-medium text-base">
                                  {dayName}
                                </div>
                                <div className="text-sm text-muted-foreground">
                                  {schedule.startTime} - {schedule.endTime}
                                </div>
                              </div>
                            </div>
                          );
                        })
                    ) : (
                      <div className="text-muted-foreground">
                        No schedule available
                      </div>
                    )}
                  </div>
                </div>
              </div>
              <div className="px-6 py-4 border-t bg-background">
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() => setIsDetailsSheetOpen(false)}
                >
                  Close
                </Button>
              </div>
            </div>
          )}
        </SheetContent>
      </Sheet>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/contact/layout.tsx" isMerged="true"
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Contact Us | Jungle",
  description:
    "Get in touch with Jungle. Have questions about our AI-powered booking systems? We're here to help you grow your business.",
  openGraph: {
    title: "Contact Us | Jungle",
    description:
      "Contact Jungle to learn more about our AI-powered booking systems and how we can help grow your business.",
    url: "https://jungle.baby/contact",
    siteName: "Jungle",
    locale: "en_SG",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Contact Us | Jungle",
    description:
      "Get in touch with Jungle to learn more about our AI-powered booking systems.",
  },
};

export default function ContactLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <>{children}</>;
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { HomeHeader } from "@/components/home/home-header";
import { HomeFooter } from "@/components/home/home-footer";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";

export default function ContactPage() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    website: "",
    message: "",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<{
    type: "success" | "error" | null;
    message: string;
  }>({ type: null, message: "" });

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus({ type: null, message: "" });

// Basic validation
    if (
      !formData.name.trim() ||
      !formData.email.trim() ||
      !formData.phone.trim()
    ) {
      setSubmitStatus({
        type: "error",
        message: "Please fill in all required fields (Name, Email, Phone).",
      });
      setIsSubmitting(false);
      return;
    }

// Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.email)) {
      setSubmitStatus({
        type: "error",
        message: "Please enter a valid email address.",
      });
      setIsSubmitting(false);
      return;
    }

try {
      const response = await fetch("/api/mail/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

const data = await response.json();

if (response.ok && data.success) {
        setSubmitStatus({
          type: "success",
          message: "Thank you for your message! We'll get back to you soon.",
        });
        // Reset form
        setFormData({
          name: "",
          email: "",
          phone: "",
          website: "",
          message: "",
        });
        // Redirect after 1 second
        setTimeout(() => {
          router.push("/");
        }, 1000);
      } else {
        setSubmitStatus({
          type: "error",
          message: data.error || "Something went wrong. Please try again.",
        });
      }
    } catch (error) {
      setSubmitStatus({
        type: "error",
        message: "Failed to send message. Please try again later.",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

return (
    <div className="flex flex-col min-h-screen bg-background">
      <HomeHeader />

<div className="max-w-[1256px] mx-auto px-4 pt-[84px] pb-8 md:py-[100px] flex-grow w-full">
        <div className="border-b border-gray-200 pb-6 mb-10">
          <h1 className="text-3xl font-bold text-black">Contact Us</h1>
          <p className="text-muted-foreground mt-2">
            Have questions? We'd love to hear from you. Send us a message and
            we'll respond as soon as possible.
          </p>
        </div>

<div className="max-w-2xl mx-auto">
          <Card>
            <CardHeader>
              <CardTitle>Send us a message</CardTitle>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="name">
                    Name <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="name"
                    name="name"
                    type="text"
                    required
                    value={formData.name}
                    onChange={handleInputChange}
                    placeholder="Enter your name"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">
                    Email <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    required
                    value={formData.email}
                    onChange={handleInputChange}
                    placeholder="Enter your email"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="phone">
                    Phone <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="phone"
                    name="phone"
                    type="tel"
                    required
                    value={formData.phone}
                    onChange={handleInputChange}
                    placeholder="Enter your phone number"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="website">Website (optional)</Label>
                  <Input
                    id="website"
                    name="website"
                    type="url"
                    value={formData.website}
                    onChange={handleInputChange}
                    placeholder="https://example.com"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="message">Message (optional)</Label>
                  <Textarea
                    id="message"
                    name="message"
                    value={formData.message}
                    onChange={handleInputChange}
                    placeholder="Enter your message"
                    rows={6}
                  />
                </div>

{submitStatus.type && (
                  <div
                    className={`p-4 rounded-lg ${
                      submitStatus.type === "success"
                        ? "bg-green-50 text-green-800 border border-green-200"
                        : "bg-red-50 text-red-800 border border-red-200"
                    }`}
                  >
                    {submitStatus.message}
                  </div>
                )}

<Button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full cursor-pointer"
                  size="lg"
                >
                  {isSubmitting ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Sending...
                    </>
                  ) : (
                    "Send Message"
                  )}
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>

<HomeFooter />
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-agents/chat/onboard/loading/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-agents/chat/onboard/loading/page.tsx" isMerged="true"
"use client";

import { useEffect, useState, useRef, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Check, Loader2 } from "lucide-react";
import { getFirebaseAuth } from "@/lib/firebase";
import { onAuthStateChanged } from "firebase/auth";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";

function LoadingContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const url = searchParams.get("url");
  const agentId = searchParams.get("id");
  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
  const [currentStep, setCurrentStep] = useState<number | null>(null);
  const [progressPercentage, setProgressPercentage] = useState(0);
  const isPollingRef = useRef(true);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const [showPhoneModal, setShowPhoneModal] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState("");
  const [userEmail, setUserEmail] = useState("");
  const [phoneError, setPhoneError] = useState("");
  const apiCallCountRef = useRef(0);
  const isInstantCompletionRef = useRef(false);
  const animationStartTimeRef = useRef<number | null>(null);
  const animationIntervalRef = useRef<NodeJS.Timeout | null>(null);

// Load user email and phone number on mount
  useEffect(() => {
    const auth = getFirebaseAuth();
    const user = auth.currentUser;

if (user) {
      loadUserData(user);
    } else {
      const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
        if (currentUser) {
          loadUserData(currentUser);
          unsubscribe();
        }
      });
    }
  }, []);

useEffect(() => {
    if (!url || !agentId) {
      router.push("/dashboard/ai-agents/chat/onboard");
      return;
    }

// Reset polling flag to true at the start
    isPollingRef.current = true;

// Get code_name from session storage
    const codeName =
      typeof window !== "undefined"
        ? sessionStorage.getItem("agent_code_name")
        : null;

if (!codeName) {
      console.error("No code_name found in session storage");
      router.push("/dashboard/ai-agents/chat/onboard");
      return;
    }

console.log("Starting status polling for code_name:", codeName);

// Function to handle completion (show phone modal or navigate)
    const handleCompletion = () => {
      // Load user email and check if phone number exists
      const auth = getFirebaseAuth();
      const user = auth.currentUser;
      if (user && user.email) {
        setUserEmail(user.email);
        const storageKey = `${user.email}_no`;
        const storedPhone = localStorage.getItem(storageKey);
        if (storedPhone) {
          // Phone number exists, navigate directly
          setTimeout(() => {
            router.push(
              `/dashboard/ai-agents/chat/preview/${agentId}?url=${encodeURIComponent(
                url
              )}`
            );
          }, 1000);
        } else {
          // Show phone number modal
          setTimeout(() => {
            setShowPhoneModal(true);
          }, 1000);
        }
      } else {
        // Wait for auth state
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
          if (currentUser && currentUser.email) {
            setUserEmail(currentUser.email);
            const storageKey = `${currentUser.email}_no`;
            const storedPhone = localStorage.getItem(storageKey);
            if (storedPhone) {
              // Phone number exists, navigate directly
              setTimeout(() => {
                router.push(
                  `/dashboard/ai-agents/chat/preview/${agentId}?url=${encodeURIComponent(
                    url
                  )}`
                );
              }, 1000);
            } else {
              // Show phone number modal
              setTimeout(() => {
                setShowPhoneModal(true);
              }, 1000);
            }
            unsubscribe();
          }
        });
      }
    };

// Function to animate progress for instant completion
    const startInstantCompletionAnimation = () => {
      if (isInstantCompletionRef.current) {
        return; // Already animating
      }

console.log("Starting instant completion animation (2 minutes)");

const animate = () => {
        const elapsed = Date.now() - (animationStartTimeRef.current || 0);
        const progress = Math.min((elapsed / totalDuration) * 100, 100);

// Update progress percentage
        setProgressPercentage(progress);

// Determine which steps should be completed based on elapsed time
        const newCompletedSteps: number[] = [];
        let newCurrentStep: number | null = null;

steps.forEach((step, index) => {
          const stepStartTime = index * stepDuration;
          const stepEndTime = (index + 1) * stepDuration;

setCompletedSteps(newCompletedSteps);
        setCurrentStep(newCurrentStep);

// If animation is complete, stop and handle completion
        if (progress >= 100) {
          console.log("Instant completion animation finished");
          if (animationIntervalRef.current) {
            clearInterval(animationIntervalRef.current);
            animationIntervalRef.current = null;
          }
          isPollingRef.current = false;
          // Handle completion (show phone modal or navigate)
          handleCompletion();
        }
      };

// Animate every 100ms for smooth progress
      animationIntervalRef.current = setInterval(animate, 100);
      animate(); // Initial call
    };

// Function to fetch status
    const fetchStatus = async () => {
      if (!isPollingRef.current) {
        console.log("Polling stopped, skipping fetch");
        return;
      }

try {
        const auth = getFirebaseAuth();
        const user = auth.currentUser;

if (!user) {
          console.log("User not authenticated, waiting for auth...");
          return;
        }

await fetchStatusWithAuth(user);
      } catch (error) {
        console.error("Error fetching status:", error);
        // Continue polling even on error
      }
    };

const fetchStatusWithAuth = async (currentUser: any) => {
      try {
        apiCallCountRef.current += 1;
        const callNumber = apiCallCountRef.current;

if (!refreshToken) {
          console.error("No refresh token found");
          return;
        }

console.log(`Fetching status... (Call #${callNumber})`);
        const response = await fetch(
          `https://agent-dashboard-backend.jungle.baby/api/agents/scraping-status`,
          {
            method: "GET",
            headers: {
              Authorization: `Bearer ${accessToken}`,
              "X-Refresh-Token": refreshToken,
              "Content-Type": "application/json",
            },
          }
        );

if (!response.ok) {
          throw new Error(`Failed to fetch status: ${response.status}`);
        }

const data: StatusResponse = await response.json();
        const progress = data.progress_percentage || 0;

console.log(
          `Status fetched (Call #${callNumber}), progress:`,
          progress
        );

// Normal flow: update progress immediately
        setProgressPercentage(progress);

// Determine which steps are completed based on progress
        const newCompletedSteps: number[] = [];
        let newCurrentStep: number | null = null;

setCompletedSteps(newCompletedSteps);
        setCurrentStep(newCurrentStep);

// If progress is 100%, stop polling and handle completion
        if (progress >= 100) {
          console.log("Progress reached 100%, stopping polling");
          isPollingRef.current = false;
          // Handle completion (show phone modal or navigate)
          handleCompletion();
        }
      } catch (error) {
        console.error("Error fetching status:", error);
        // Continue polling even on error
      }
    };

// Initial fetch
    fetchStatus();

// Validate phone number
  const validatePhoneNumber = (phone: string): boolean => {
    if (!phone || phone.trim() === "") return false;
    // Remove spaces, dashes, and parentheses
    const cleaned = phone.replace(/[\s\-]/g, "");
    // Check if it starts with + and has digits, or just has digits
    // Minimum 8 digits, maximum 15 digits (international format)
    const phoneRegex = /^(\+?\d{8,15})$/;
    return phoneRegex.test(cleaned);
  };

const handlePhoneSubmit = () => {
    setPhoneError("");

if (!phoneNumber || phoneNumber.trim() === "") {
      setPhoneError("Please enter a phone number");
      return;
    }

if (!validatePhoneNumber(phoneNumber)) {
      setPhoneError(
        "Please enter a valid phone number (e.g., +1234567890 or 1234567890)"
      );
      return;
    }

// Save phone number to localStorage
    if (userEmail) {
      const storageKey = `${userEmail}_no`;
      localStorage.setItem(storageKey, phoneNumber.trim());
    }

// Close modal and navigate to preview
    setShowPhoneModal(false);
    router.push(
      `/dashboard/ai-agents/chat/preview/${agentId}?url=${encodeURIComponent(
        url || ""
      )}`
    );
  };

{/* Phone Number Modal */}
      <Dialog open={showPhoneModal} onOpenChange={setShowPhoneModal}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Enter Your Phone Number</DialogTitle>
            <DialogDescription>
              Please enter your phone number to connect to your chat agent. This
              will be saved for future use.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="phone-input">Phone Number</Label>
              <Input
                id="phone-input"
                type="tel"
                placeholder="+1234567890 or 1234567890"
                value={phoneNumber}
                onChange={(e) => {
                  setPhoneNumber(e.target.value);
                  setPhoneError("");
                }}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    handlePhoneSubmit();
                  }
                }}
              />
              {phoneError && (
                <p className="text-sm text-destructive">{phoneError}</p>
              )}
              <p className="text-xs text-muted-foreground">
                Format: Include country code (e.g., +1 for US, +65 for
                Singapore)
              </p>
            </div>
            <div className="flex justify-end gap-2">
              <Button
                onClick={handlePhoneSubmit}
                disabled={!phoneNumber || !validatePhoneNumber(phoneNumber)}
              >
                Continue
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default function ChatAgentLoadingPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-gradient-to-br from-primary/5 via-white to-blue-50 flex items-center justify-center">
          <Loader2 className="w-8 h-8 text-primary animate-spin" />
        </div>
      }
    >
      <LoadingContent />
    </Suspense>
  );
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-agents/chat/onboard/page.tsx" isMerged="true"
"use client";

import type React from "react";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { getFirebaseAuth } from "@/lib/firebase";
import { onAuthStateChanged } from "firebase/auth";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  ArrowLeft,
  Globe,
  ArrowRight,
  Upload,
  FileText,
  X,
  CheckCircle2,
  Loader2,
} from "lucide-react";
import Link from "next/link";

export default function ChatAgentOnboardPage() {
  const router = useRouter();
  const [websiteUrl, setWebsiteUrl] = useState("");
  const [isValid, setIsValid] = useState(false);
  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
  const [fileUploadStatus, setFileUploadStatus] = useState<
    Record<
      number,
      {
        status: "pending" | "uploading" | "success" | "error";
        error?: string;
        object_name?: string;
      }
    >
  >({});
  const [isValidating, setIsValidating] = useState(false);
  const [error, setError] = useState<string | null>(null);

const validateUrl = (url: string) => {
    try {
      new URL(url);
      setIsValid(true);
    } catch {
      setIsValid(false);
    }
  };

const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    const newFiles = [...uploadedFiles, ...files];
    setUploadedFiles(newFiles);

// Initialize upload status for new files
    const newStatus: Record<
      number,
      { status: "pending" | "uploading" | "success" | "error"; error?: string }
    > = { ...fileUploadStatus };
    newFiles.forEach((_, index) => {
      if (!newStatus[index]) {
        newStatus[index] = { status: "pending" };
      }
    });
    setFileUploadStatus(newStatus);

// Clear the input so the same file can be selected again
    e.target.value = "";
  };

const uploadFile = async (file: File, index: number) => {
    try {
      setFileUploadStatus((prev) => ({
        ...prev,
        [index]: { status: "uploading" },
      }));

const auth = getFirebaseAuth();
      const user = auth.currentUser;

if (!user) {
        throw new Error("Please sign in to upload files.");
      }

const accessToken = await user.getIdToken(true);
      const refreshToken =
        typeof window !== "undefined"
          ? localStorage.getItem("refresh_token_hash")
          : null;

if (!refreshToken) {
        throw new Error("Authentication error: Please sign in again.");
      }

// Create FormData for multipart/form-data
      const formData = new FormData();
      formData.append("file", file);

const response = await fetch(
        "https://agent-dashboard-backend.jungle.baby/api/agents/upload-document",
        {
          method: "POST",
          headers: {
            Authorization: `Bearer ${accessToken}`,
            "X-Refresh-Token": refreshToken,
            // Don't set Content-Type header - browser will set it with boundary for FormData
          },
          body: formData,
        }
      );

if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(
          errorData.message ||
            errorData.error ||
            `Failed to upload ${file.name}. Please try again.`
        );
      }

const uploadData = await response.json().catch(() => ({}));
      const objectName = uploadData.object_name;

if (!objectName) {
        throw new Error("Upload succeeded but object_name not returned.");
      }

// Call process-document API after successful upload
      // await processDocument(accessToken, refreshToken, objectName);

setFileUploadStatus((prev) => ({
        ...prev,
        [index]: { status: "success", object_name: objectName },
      }));
    } catch (err: any) {
      console.error(`Error uploading file ${file.name}:`, err);
      setFileUploadStatus((prev) => ({
        ...prev,
        [index]: {
          status: "error",
          error: err.message || "Failed to upload file",
        },
      }));
    }
  };

const handleUploadAllFiles = async () => {
    const auth = getFirebaseAuth();
    const user = auth.currentUser;

if (!user) {
      const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
        if (currentUser) {
          await uploadAllFiles(currentUser);
          unsubscribe();
        } else {
          setError("Please sign in to upload files.");
          unsubscribe();
        }
      });
      return;
    }

await uploadAllFiles(user);
  };

const processDocument = async (
    accessToken: string,
    refreshToken: string,
    objectName: string
  ) => {
    try {
      const response = await fetch(
        "https://agent-dashboard-backend.jungle.baby/api/agents/process-document",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${accessToken}`,
            "X-Refresh-Token": refreshToken,
          },
          body: JSON.stringify({
            object_name: objectName,
            extract_faqs: true,
            extract_tone: true,
            purge_existing: false,
          }),
        }
      );

if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        console.error(
          `Failed to process document ${objectName}:`,
          errorData.message || errorData.error || response.status
        );
        // Don't throw - we'll still mark upload as success
      }
    } catch (err) {
      console.error(`Error processing document ${objectName}:`, err);
      // Don't throw - we'll still mark upload as success
    }
  };

const uploadAllFiles = async (currentUser: any) => {
    // Upload all pending files
    const uploadPromises = uploadedFiles.map((file, index) => {
      const status = fileUploadStatus[index];
      if (!status || status.status === "pending" || status.status === "error") {
        return uploadFile(file, index);
      }
      return Promise.resolve();
    });

await Promise.all(uploadPromises);
  };

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!isValid || !websiteUrl.trim()) return;

setIsValidating(true);
    setError(null);

try {
      const auth = getFirebaseAuth();
      const user = auth.currentUser;

if (!user) {
        // Wait for auth state to be ready
        const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
          if (currentUser) {
            await submitAgentRequest(currentUser);
            unsubscribe();
          } else {
            setError("Please sign in to create an agent.");
            setIsValidating(false);
            unsubscribe();
          }
        });
        return;
      }

await submitAgentRequest(user);
    } catch (err: any) {
      console.error("Error creating agent:", err);
      setError(err.message || "Failed to create agent. Please try again.");
      setIsValidating(false);
    }
  };

const submitAgentRequest = async (currentUser: any) => {
    try {
      const accessToken = await currentUser.getIdToken(true);
      const refreshToken =
        typeof window !== "undefined"
          ? localStorage.getItem("refresh_token_hash")
          : null;

if (!refreshToken) {
        setError("Authentication error: Please sign in again.");
        setIsValidating(false);
        return;
      }

const browserTrackingId = generateBrowserTrackingId();

// Call the API to create the agent
      const response = await fetch(
        "https://agent-dashboard-backend.jungle.baby/api/agents/create",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${accessToken}`,
            "X-Refresh-Token": refreshToken,
          },
          body: JSON.stringify({
            website_url: websiteUrl.trim(),
            browser_tracking_id: browserTrackingId,
          }),
        }
      );

if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(
          errorData.message ||
            errorData.error ||
            "Failed to create agent. Please try again."
        );
      }

const data = await response.json().catch(() => ({}));

// Save code_name to session storage
      if (data.code_name) {
        if (typeof window !== "undefined") {
          sessionStorage.setItem("agent_code_name", data.code_name);
        }
      }

// Process all uploaded documents before starting scraping
      const documentsToProcess = Object.values(fileUploadStatus)
        .filter((status) => status.status === "success" && status.object_name)
        .map((status) => status.object_name!);

if (documentsToProcess.length > 0) {
        try {
          const processPromises = documentsToProcess.map((objectName) =>
            processDocument(accessToken, refreshToken, objectName)
          );
          await Promise.all(processPromises);
        } catch (processErr) {
          console.error("Error processing documents:", processErr);
          // Don't block flow if document processing fails
        }
      }

// After successful creation and document processing, start scraping for this agent's website
      try {
        const startResponse = await fetch(
          "https://agent-dashboard-backend.jungle.baby/api/agents/start-scraping",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${accessToken}`,
              "X-Refresh-Token": refreshToken,
            },
            body: JSON.stringify({
              website_url: websiteUrl.trim(),
            }),
          }
        );

if (!startResponse.ok) {
          const startError = await startResponse.json().catch(() => ({}));
          console.error(
            "Failed to start scraping:",
            startError.message || startError.error || startResponse.status
          );
        }
      } catch (scrapeErr) {
        console.error("Error calling start-scraping:", scrapeErr);
        // Don't block user flow if scraping start fails; they can retry later
      }

// Generate a simple agent ID from the URL
      const agentId = btoa(websiteUrl)
        .replace(/[^a-zA-Z0-9]/g, "")
        .substring(0, 12);

// Navigate to loading page with the URL and tracking ID
      router.push(
        `/dashboard/ai-agents/chat/onboard/loading?url=${encodeURIComponent(
          websiteUrl
        )}&id=${agentId}&tracking=${encodeURIComponent(browserTrackingId)}`
      );
    } catch (err: any) {
      console.error("Error creating agent:", err);
      setError(err.message || "Failed to create agent. Please try again.");
      setIsValidating(false);
    }
  };

return (
    <div className="max-w-2xl mx-auto space-y-6">
      <Button variant="ghost" asChild className="mb-4">
        <Link href="/dashboard/ai-agents/chat">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back
        </Link>
      </Button>

<div className="text-center space-y-2">
        <h1 className="text-3xl font-bold">Create Your Chat Agent</h1>
        <p className="text-muted-foreground">
          Let's start by analyzing your website and training materials
        </p>
      </div>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Globe className="h-5 w-5" />
            Website URL
          </CardTitle>
          <CardDescription>
            Enter your business website URL. We'll analyze your content to train
            your AI agent.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="website">Your Website</Label>
              <Input
                id="website"
                type="url"
                placeholder="https://yourwebsite.com"
                value={websiteUrl}
                onChange={(e) => {
                  setWebsiteUrl(e.target.value);
                  validateUrl(e.target.value);
                }}
                required
              />
              {websiteUrl && !isValid && (
                <p className="text-sm text-destructive">
                  Please enter a valid URL
                </p>
              )}
            </div>

<div className="rounded-lg bg-muted p-4 space-y-2">
              <p className="text-sm font-medium">What we'll extract:</p>
              <ul className="text-sm text-muted-foreground space-y-1">
                <li>• Business information and services</li>
                <li>• Pricing and class details</li>
                <li>• Frequently asked questions</li>
                <li>• Contact information and locations</li>
              </ul>
            </div>

<div className="space-y-3 border-t pt-6">
              <div className="flex items-center gap-2">
                <Upload className="h-5 w-5 text-primary" />
                <div>
                  <Label>Additional Training Documents (Optional)</Label>
                  <p className="text-sm text-muted-foreground">
                    Upload PDFs, Word docs, or text files to enhance your
                    agent's knowledge
                  </p>
                </div>
              </div>

<div className="flex items-center gap-3">
                <Input
                  id="file-upload"
                  type="file"
                  multiple
                  accept=".pdf,.doc,.docx,.txt"
                  onChange={handleFileUpload}
                  className="hidden"
                />
                <Button
                  type="button"
                  variant="outline"
                  onClick={() =>
                    document.getElementById("file-upload")?.click()
                  }
                >
                  <Upload className="mr-2 h-4 w-4" />
                  Choose Files
                </Button>
                <p className="text-sm text-muted-foreground">
                  PDF, DOC, TXT (max 10MB each)
                </p>
              </div>

{uploadedFiles.length > 0 && (
                <div className="space-y-2">
                  {uploadedFiles.map((file, index) => {
                    const status = fileUploadStatus[index];
                    const fileStatus = status?.status || "pending";
                    return (
                      <div
                        key={index}
                        className="flex items-center justify-between p-3 bg-muted rounded-lg"
                      >
                        <div className="flex items-center gap-3 flex-1 min-w-0">
                          {fileStatus === "success" ? (
                            <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                          ) : fileStatus === "uploading" ? (
                            <Loader2 className="h-4 w-4 text-primary animate-spin flex-shrink-0" />
                          ) : fileStatus === "error" ? (
                            <X className="h-4 w-4 text-destructive flex-shrink-0" />
                          ) : (
                            <FileText className="h-4 w-4 text-primary flex-shrink-0" />
                          )}
                          <div className="text-sm flex-1 min-w-0">
                            <p className="font-medium truncate">{file.name}</p>
                            <p className="text-muted-foreground">
                              {(file.size / 1024).toFixed(1)} KB
                              {fileStatus === "success" && (
                                <span className="ml-2 text-green-600">
                                  • Uploaded
                                </span>
                              )}
                              {fileStatus === "error" && status?.error && (
                                <span className="ml-2 text-destructive text-xs">
                                  • {status.error}
                                </span>
                              )}
                            </p>
                          </div>
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => removeFile(index)}
                          className="flex-shrink-0"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    );
                  })}
                  {uploadedFiles.some(
                    (_, index) =>
                      !fileUploadStatus[index] ||
                      fileUploadStatus[index].status === "pending" ||
                      fileUploadStatus[index].status === "error"
                  ) && (
                    <Button
                      type="button"
                      variant="default"
                      onClick={handleUploadAllFiles}
                      className="w-full mt-2"
                      disabled={Object.values(fileUploadStatus).some(
                        (s) => s.status === "uploading"
                      )}
                    >
                      {Object.values(fileUploadStatus).some(
                        (s) => s.status === "uploading"
                      ) ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Uploading...
                        </>
                      ) : (
                        <>
                          <Upload className="mr-2 h-4 w-4" />
                          Upload All Files
                        </>
                      )}
                    </Button>
                  )}
                </div>
              )}

<p className="text-xs text-muted-foreground">
                Tip: Upload program brochures, FAQ documents, or pricing sheets
                for more accurate responses
              </p>
            </div>

{error && (
              <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
                {error}
              </div>
            )}

<Button
              type="submit"
              className="w-full"
              size="lg"
              disabled={!isValid || isValidating}
            >
              {isValidating ? (
                <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2" />
                  Creating...
                </>
              ) : (
                <>
                  Start Training Agent
                  <ArrowRight className="ml-2 h-4 w-4" />
                </>
              )}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-agents/chat/page.tsx" isMerged="true"
"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Bot,
  Clock,
  CheckCircle2,
  ArrowRight,
  MessageSquare,
  Settings2,
  ChevronLeft,
  UserPlus,
  Download,
  FileText,
  Search,
  Calendar,
  ExternalLink,
  Bell,
  ChevronDown,
  ChevronRight,
} from "lucide-react";
import Link from "next/link";
import { useState, useEffect, useRef } from "react";
import { cn } from "@/lib/utils";
import { getFirebaseAuth } from "@/lib/firebase";
import { onAuthStateChanged } from "firebase/auth";
import {
  connectSocketWithCodeName,
  connectSocketWithAuth,
  disconnectSocket,
} from "@/lib/services/socket";
import { Socket } from "socket.io-client";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

interface Conversation {
  id: string;
  name: string;
  phone: string;
  email?: string;
  status: "active" | "resolved";
  lastMessage: string;
  topic: string;
  timestamp: string;
  updatedAt?: Date | string; // Store raw date for sorting
  messageCount: number;
  duration?: string;
  messages?: Array<{
    sender: "customer" | "ai";
    text: string;
    time: string;
    is_internal?: boolean;
    author?: string;
    message_type?: string;
    _id?: string;
    _timestamp?: string | Date;
  }>;
}

interface ConversationMonitoringProps {
  codeName?: string;
  selectConversationByPhone?: string | null;
  onConversationSelected?: () => void;
  onConversationNotFound?: () => void;
}

// Internal Message Component (for intent detection)
function InternalMessage({
  message,
}: {
  message: {
    text: string;
    time: string;
    author?: string;
  };
}) {
  const [expanded, setExpanded] = useState(false);

// Try to parse JSON content for better formatting
  let parsedContent: any = null;
  let displayText = message.text;

try {
    parsedContent = JSON.parse(message.text);
    // Create a preview from the parsed JSON
    if (parsedContent.intent) {
      displayText = `{"intent": "${parsedContent.intent}", "confidence": ${
        parsedContent.confidence || 0
      }, "reasoni...`;
    }
  } catch {
    // Not JSON, use original content
    displayText =
      message.text.split("\n")[0].slice(0, 50) +
      (message.text.length > 50 ? "..." : "");
  }

return (
    <div className="flex justify-start mb-2 min-w-0 w-full">
      <div className="max-w-[85%] sm:max-w-[85%] rounded-lg px-2.5 py-1.5 sm:px-3 sm:py-2 shadow-sm bg-yellow-50/90 border border-yellow-200 min-w-0">
        <button
          onClick={() => setExpanded(!expanded)}
          className="w-full flex items-center gap-1.5 sm:gap-2 text-left hover:opacity-80 transition-opacity touch-manipulation"
        >
          {expanded ? (
            <ChevronDown className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-yellow-700 flex-shrink-0" />
          ) : (
            <ChevronRight className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-yellow-700 flex-shrink-0" />
          )}
          <span className="inline-flex items-center gap-1 sm:gap-1.5 px-2 py-0.5 sm:px-2.5 sm:py-1 bg-yellow-100 text-yellow-800 text-[10px] sm:text-xs font-semibold rounded-md border border-yellow-300/50">
            <Bot className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
            <span className="hidden min-[375px]:inline">
              {message.author?.toUpperCase().replace("_", " ") || "INTERNAL"}
            </span>
            <span className="min-[375px]:hidden">INT</span>
          </span>
          {!expanded && (
            <span className="text-[10px] sm:text-xs text-stone-700 font-mono truncate flex-1 min-w-0">
              {displayText}
            </span>
          )}
        </button>
        {expanded && (
          <div className="mt-2 sm:mt-3 pl-5 sm:pl-7">
            <div className="bg-yellow-50/70 border border-yellow-200/50 rounded-md p-2 sm:p-3">
              {parsedContent ? (
                <div className="space-y-1 sm:space-y-1.5 text-[10px] sm:text-xs font-mono text-yellow-900">
                  <div>
                    <span className="text-yellow-700">{"{"}</span>
                  </div>
                  {parsedContent.intent && (
                    <div className="pl-4">
                      <span className="text-yellow-600">"intent"</span>
                      <span className="text-yellow-800">: </span>
                      <span className="text-yellow-900 font-semibold">
                        "{parsedContent.intent}"
                      </span>
                      <span className="text-yellow-800">,</span>
                    </div>
                  )}
                  {parsedContent.confidence !== undefined && (
                    <div className="pl-4">
                      <span className="text-yellow-600">"confidence"</span>
                      <span className="text-yellow-800">: </span>
                      <span className="text-yellow-900 font-semibold">
                        {parsedContent.confidence}
                      </span>
                      <span className="text-yellow-800">,</span>
                    </div>
                  )}
                  {parsedContent.reasoning && (
                    <div className="pl-4">
                      <span className="text-yellow-600">"reasoning"</span>
                      <span className="text-yellow-800">: </span>
                      <span className="text-yellow-900">
                        "{parsedContent.reasoning}"
                      </span>
                    </div>
                  )}
                  <div>
                    <span className="text-yellow-700">{"}"}</span>
                  </div>
                </div>
              ) : (
                <pre className="text-[10px] sm:text-xs text-yellow-800 whitespace-pre-wrap break-words font-mono">
                  {message.text}
                </pre>
              )}
            </div>
          </div>
        )}
        <p className="text-[9px] sm:text-[10px] text-yellow-600 mt-1 sm:mt-1.5 ml-5 sm:ml-7">
          {message.time}
        </p>
      </div>
    </div>
  );
}

const ConversationMonitoring = ({
  codeName,
  selectConversationByPhone,
  onConversationSelected,
  onConversationNotFound,
}: ConversationMonitoringProps) => {
  const [selectedConversation, setSelectedConversation] = useState<
    string | null
  >(null);
  const [filter, setFilter] = useState<"all" | "active" | "resolved">("all");
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [socket, setSocket] = useState<Socket | null>(null);
  const [isConnected, setIsConnected] = useState(false);
  const [unreadConversations, setUnreadConversations] = useState<Set<string>>(
    new Set()
  );

// Use ref to track selected conversation for socket handlers
  const selectedConversationRef = useRef<string | null>(null);

// Keep ref in sync with state
  useEffect(() => {
    selectedConversationRef.current = selectedConversation;
  }, [selectedConversation]);

// Clear unread status when a conversation is selected
  useEffect(() => {
    if (selectedConversation) {
      setUnreadConversations((prev) => {
        const newSet = new Set(prev);
        newSet.delete(selectedConversation);
        return newSet;
      });
    }
  }, [selectedConversation]);

// Log code_name for debugging
  useEffect(() => {
    if (codeName) {
      console.log("📝 ConversationMonitoring using code_name:", codeName);
    } else {
      console.warn("⚠️ ConversationMonitoring: No code_name provided");
    }
  }, [codeName]);

// Handle selecting conversation by phone number (wait for conversations to load)
  useEffect(() => {
    // Only proceed if we have a phone number to search for and conversations are loaded
    if (selectConversationByPhone && !isLoading && conversations.length > 0) {
      // Normalize phone number for comparison (remove spaces, handle + prefix)
      const normalizePhone = (phone: string) => {
        return phone.replace(/\s+/g, "").replace(/^\+/, "");
      };

const normalizedSearchPhone = normalizePhone(selectConversationByPhone);

const foundConversation = conversations.find((conv) => {
        const normalizedConvPhone = normalizePhone(conv.phone);
        return normalizedConvPhone === normalizedSearchPhone;
      });

if (foundConversation) {
        console.log(
          "✅ Found conversation for phone:",
          selectConversationByPhone,
          "Conversation ID:",
          foundConversation.id
        );
        setSelectedConversation(foundConversation.id);
        if (onConversationSelected) {
          onConversationSelected();
        }
      } else {
        console.log(
          "❌ Conversation not found for phone:",
          selectConversationByPhone
        );
        if (onConversationNotFound) {
          onConversationNotFound();
        }
      }
    } else if (
      selectConversationByPhone &&
      !isLoading &&
      conversations.length === 0
    ) {
      // Conversations loaded but none found - show not found dialog
      console.log(
        "❌ No conversations available, showing not found dialog for phone:",
        selectConversationByPhone
      );
      if (onConversationNotFound) {
        onConversationNotFound();
      }
    }
  }, [
    selectConversationByPhone,
    conversations,
    isLoading,
    onConversationSelected,
    onConversationNotFound,
  ]);

// Helper function to map conversation data to UI format
  const mapConversationData = (conv: any): Conversation => {
    // Get all messages (including internal for display in detail view)
    const allMessages = conv.messages || [];

// Filter out internal messages only for lastMessage preview
    const displayMessages = allMessages.filter(
      (msg: any) => !msg.is_internal && msg.message_type !== "intent_detector"
    );

// Get the last non-internal message for lastMessage
    const lastDisplayMessage = displayMessages[displayMessages.length - 1];
    const lastMessageText =
      lastDisplayMessage?.message_body ||
      conv.last_message ||
      conv.lastMessage ||
      "";

// Map all messages to UI format (including internal messages)
    const mappedMessages = allMessages.map((msg: any) => ({
      sender: msg.direction === "incoming" ? "customer" : "ai",
      text: msg.message_body || msg.text || "",
      time:
        formatTimestamp(msg.created_at || msg.timestamp) ||
        new Date().toLocaleTimeString("en-US", {
          hour: "numeric",
          minute: "2-digit",
          hour12: true,
        }),
      is_internal: msg.is_internal || msg.message_type === "intent_detector",
      author: msg.author || msg.message_type,
      message_type: msg.message_type,
    }));

// Get the timestamp from the last message (most recent), or fall back to conversation updated_at
    let rawDate = conv.updated_at || conv.created_at || conv.timestamp;

// If we have messages, use the last message's timestamp (most recent)
    if (allMessages.length > 0) {
      // Sort messages by created_at to get the most recent one
      const sortedMessages = [...allMessages].sort((a: any, b: any) => {
        const timeA = new Date(a.created_at || a.timestamp || 0).getTime();
        const timeB = new Date(b.created_at || b.timestamp || 0).getTime();
        return timeB - timeA; // Descending order (newest first)
      });
      const lastMessage = sortedMessages[0];
      if (lastMessage?.created_at || lastMessage?.timestamp) {
        rawDate = lastMessage.created_at || lastMessage.timestamp;
      }
    }

const dateForSorting = rawDate ? new Date(rawDate) : new Date(0);

return {
      id: String(conv.id || conv.conversation_id || conv.session_id || ""),
      name:
        conv.customer_name || conv.name || conv.customer_number || "Unknown",
      phone: conv.customer_number || conv.phone || "",
      email: conv.email || conv.customer_email,
      status: (conv.status === "resolved" ? "resolved" : "active") as
        | "active"
        | "resolved",
      lastMessage: lastMessageText,
      topic: conv.topic || conv.subject || "General inquiry",
      timestamp: formatTimestamp(rawDate),
      updatedAt: dateForSorting, // Store for sorting
      messageCount: displayMessages.length,
      duration: conv.duration,
      messages: mappedMessages,
    };
  };

// Connect to Socket.IO for real-time conversation updates
  useEffect(() => {
    let socketCleanup: (() => void) | null = null;
    let activeSocket: Socket | null = null;

const connectSocket = async () => {
      setIsLoading(true);
      setError(null);

try {
        const auth = getFirebaseAuth();
        const user = auth.currentUser;

if (!user) {
          const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
            if (currentUser) {
              await connectWithAuth(currentUser);
              unsubscribe();
            } else {
              setIsLoading(false);
              setError("Please sign in to view conversations");
              unsubscribe();
            }
          });
          return;
        }

await connectWithAuth(user);
      } catch (err: any) {
        console.error("Error connecting socket:", err);
        setError(err.message || "Failed to connect");
        setIsLoading(false);
      }
    };

const connectWithAuth = async (currentUser: any) => {
      try {
        const accessToken = await currentUser.getIdToken(true);
        const refreshToken =
          typeof window !== "undefined"
            ? localStorage.getItem("refresh_token_hash")
            : null;

if (!refreshToken) {
          setError("Authentication error: Please sign in again.");
          setIsLoading(false);
          return;
        }

console.log("🔌 Connecting to dashboard socket with authentication");
        const newSocket = connectSocketWithAuth(accessToken, refreshToken);
        setSocket(newSocket);
        activeSocket = newSocket;
        socketCleanup = setupSocketListeners(newSocket);
      } catch (err: any) {
        console.error("Error in connectWithAuth:", err);
        setError(err.message || "Failed to authenticate");
        setIsLoading(false);
      }
    };

const setupSocketListeners = (newSocket: Socket) => {
      // Debug: Listen to all events to see what server sends
      const originalEmit = newSocket.emit.bind(newSocket);
      newSocket.emit = function (event: string, ...args: any[]) {
        console.log("📤 [DEBUG] Emitting event:", event, args);
        return originalEmit(event, ...args);
      };

// Handle connection events
      newSocket.on("connect", () => {
        console.log("✅ Socket connected to server");
        setIsConnected(true);
        setError(null);
      });

newSocket.on("disconnect", (reason) => {
        console.log("❌ Socket disconnected:", reason);
        setIsConnected(false);
      });

newSocket.on("connect_error", (error: any) => {
        console.error("❌ Socket connection error:", error);
        setError("Failed to connect to conversation server");
        setIsLoading(false);
      });

// Listen for initial conversation list
      newSocket.on("conversations", (data: any) => {
        console.log("📋 Received conversations list:", data);
        const conversationsData = Array.isArray(data)
          ? data
          : data.conversations || data.data || [];
        const mappedConversations = conversationsData.map(mapConversationData);
        setConversations(mappedConversations);
        setIsLoading(false);
        setError(null);
      });

// Also listen for alternative event names that might be used
      newSocket.on("conversation_list", (data: any) => {
        console.log("📋 Received conversation_list event:", data);
        const conversationsData = Array.isArray(data)
          ? data
          : data.conversations || data.data || [];
        const mappedConversations = conversationsData.map(mapConversationData);
        setConversations(mappedConversations);
        setIsLoading(false);
        setError(null);
      });

// Listen for new conversation
      newSocket.on("new_conversation", (data: any) => {
        console.log("🆕 New conversation:", data);
        const newConv = mapConversationData(data);
        setConversations((prev) => [newConv, ...prev]);
      });

// Listen for conversation updates (status, last message, etc.)
      newSocket.on("conversation_update", (data: any) => {
        console.log("🔄 Conversation updated:", data);
        setConversations((prev) =>
          prev.map((conv) =>
            conv.id ===
            String(data.id || data.conversation_id || data.session_id)
              ? {
                  ...conv,
                  status: (data.status === "resolved"
                    ? "resolved"
                    : "active") as "active" | "resolved",
                  lastMessage:
                    data.last_message || data.lastMessage || conv.lastMessage,
                  messageCount:
                    data.message_count ||
                    data.messageCount ||
                    conv.messageCount,
                  timestamp: formatTimestamp(data.updated_at || data.timestamp),
                  updatedAt: data.updated_at
                    ? new Date(data.updated_at)
                    : data.timestamp
                    ? new Date(data.timestamp)
                    : conv.updatedAt || new Date(),
                }
              : conv
          )
        );
      });

// Listen for new messages in conversations
      newSocket.on("new_message", (data: any) => {
        console.log("💬 New message:", data);
        const conversationId = String(
          data.conversation_id || data.session_id || ""
        );

// Create the new message object (including internal messages)
        const isInternal =
          data.is_internal || data.message_type === "intent_detector";
        const messageTime = data.created_at || data.timestamp || new Date();
        const newMessage = {
          sender: (data.direction === "incoming" ? "customer" : "ai") as
            | "customer"
            | "ai",
          text: data.message_body || data.text || "",
          time:
            formatTimestamp(messageTime) ||
            new Date().toLocaleTimeString("en-US", {
              hour: "numeric",
              minute: "2-digit",
              hour12: true,
            }),
          is_internal: isInternal,
          author: data.author || data.message_type,
          message_type: data.message_type,
          // Add timestamp for deduplication and sorting
          _timestamp: messageTime,
          _id: data.id ? String(data.id) : undefined,
        };

// Update conversations in a single state update
        setConversations((prev) => {
          // Get current selectedConversation from ref (always current)
          const currentSelected = selectedConversationRef.current;
          const isSelected = currentSelected === conversationId;

return prev.map((conv) => {
            if (conv.id === conversationId) {
              // Check if message already exists (deduplication)
              const existingMessages = conv.messages || [];
              const messageKey =
                newMessage._id ||
                `${newMessage.text}_${newMessage.time}_${newMessage.is_internal}`;
              const messageExists = existingMessages.some(
                (msg: any) =>
                  (msg._id || `${msg.text}_${msg.time}_${msg.is_internal}`) ===
                  messageKey
              );

// Always add message to the messages array if it doesn't exist
              // This ensures messages are available even if the conversation is not currently selected
              // When the user switches to this conversation, they'll see all messages including new ones
              let updatedMessages = conv.messages || [];
              if (!messageExists) {
                updatedMessages = [...updatedMessages, newMessage];
              }

// Mark as unread if not currently selected (only for non-internal messages)
              if (!isSelected && !isInternal) {
                setUnreadConversations((prevUnread) => {
                  const newSet = new Set(prevUnread);
                  newSet.add(conversationId);
                  return newSet;
                });
              }

// Use the message's created_at timestamp if available, otherwise use current time
              const messageTimestamp =
                data.created_at || data.timestamp || new Date();
              const updateTime = new Date(messageTimestamp);

return {
                ...conv,
                // Only update lastMessage and messageCount for non-internal messages
                lastMessage: isInternal
                  ? conv.lastMessage
                  : data.message_body || data.text || conv.lastMessage,
                messageCount: isInternal
                  ? conv.messageCount
                  : conv.messageCount + 1,
                // Use the actual message timestamp, not current time
                timestamp: formatTimestamp(updateTime),
                updatedAt: updateTime, // Update for sorting
                // Update messages array (with deduplication)
                messages: updatedMessages,
              };
            }
            return conv;
          });
        });
      });

newSocket.on("error", (errorData: any) => {
        console.error("❌ Socket error:", errorData);
        setError(errorData.message || "An error occurred");
        setIsLoading(false);
      });

// Request initial conversation list after connection
      newSocket.on("connected", (data: any) => {
        console.log("✅ Server acknowledged connection:", data);
        console.log(
          "📋 [DEBUG] Connected event data:",
          JSON.stringify(data, null, 2)
        );

// Check if conversations are included in the connected event data
        // Use !== undefined to handle empty arrays correctly
        if (data && (data.conversations !== undefined || Array.isArray(data))) {
          console.log("📋 Processing conversations from connected event");
          const conversationsData = Array.isArray(data)
            ? data
            : data.conversations !== undefined
            ? data.conversations
            : data.data || [];

console.log(`📊 Found ${conversationsData.length} conversations`);

// Map conversations even if empty array
          const mappedConversations =
            conversationsData.map(mapConversationData);
          setConversations(mappedConversations);
          setIsLoading(false);
          setError(null);

if (conversationsData.length === 0) {
            console.log("ℹ️ No conversations available - showing empty state");
          }
          return;
        }

// If not in connected event, try requesting conversations
        console.log("📤 Emitting get_conversations after connected event");
        newSocket.emit("get_conversations");

// Also try alternative event names
        // setTimeout(() => {
        //   console.log("📤 Trying alternative: list_conversations");
        //   newSocket.emit("list_conversations");
        // }, 500);

// setTimeout(() => {
        //   console.log("📤 Trying alternative: fetch_conversations");
        //   newSocket.emit("fetch_conversations");
        // }, 1000);
      });

// Listen for messages for a specific conversation
      newSocket.on("conversation_messages", (data: any) => {
        console.log("📨 Received conversation messages:", data);
        const conversationId = String(
          data.conversation_id || data.session_id || ""
        );
        const messagesData = Array.isArray(data.messages)
          ? data.messages
          : data.data || [];

// Include ALL messages (including internal ones for display)
        // Filter out internal messages only for messageCount
        const displayMessages = messagesData.filter(
          (msg: any) =>
            !msg.is_internal && msg.message_type !== "intent_detector"
        );

// Map the fetched messages
        const mappedMessages = messagesData.map((msg: any) => ({
          sender: msg.direction === "incoming" ? "customer" : "ai",
          text: msg.message_body || msg.text || "",
          time:
            formatTimestamp(msg.created_at || msg.timestamp) ||
            new Date().toLocaleTimeString("en-US", {
              hour: "numeric",
              minute: "2-digit",
              hour12: true,
            }),
          is_internal:
            msg.is_internal || msg.message_type === "intent_detector",
          author: msg.author || msg.message_type,
          message_type: msg.message_type,
          // Add a timestamp for comparison
          _timestamp:
            msg.created_at || msg.timestamp || new Date().toISOString(),
        }));

setConversations((prev) =>
          prev.map((conv) => {
            if (conv.id === conversationId) {
              // When fetching messages, always use the fetched messages as the source of truth
              // This ensures we get all messages including ones that arrived while another conversation was selected
              // Sort messages by timestamp to ensure correct order
              const sortedMessages = mappedMessages.sort((a: any, b: any) => {
                const timeA = a._timestamp || a.time || "";
                const timeB = b._timestamp || b.time || "";
                const dateA = new Date(timeA).getTime();
                const dateB = new Date(timeB).getTime();
                return dateA - dateB;
              });

// Get the most recent message timestamp for the conversation timestamp
              const lastMessage = sortedMessages[sortedMessages.length - 1];
              const lastMessageTime = lastMessage?._timestamp
                ? new Date(lastMessage._timestamp)
                : null;

return {
                ...conv,
                // Replace messages with fetched messages (source of truth)
                messages: sortedMessages,
                // Use filtered count for messageCount (excluding internal)
                messageCount: displayMessages.length,
                // Update timestamp to reflect the last message time
                timestamp: lastMessageTime
                  ? formatTimestamp(lastMessageTime)
                  : conv.timestamp,
                updatedAt: lastMessageTime || conv.updatedAt || new Date(),
              };
            }
            return conv;
          })
        );
      });

// Return cleanup function
      return () => {
        console.log("🧹 Cleaning up socket listeners");
        newSocket.off("connect");
        newSocket.off("disconnect");
        newSocket.off("connect_error");
        newSocket.off("conversations");
        newSocket.off("conversation_list");
        newSocket.off("new_conversation");
        newSocket.off("conversation_update");
        newSocket.off("new_message");
        newSocket.off("error");
        newSocket.off("connected");
        newSocket.off("conversation_messages");
      };
    };

connectSocket();

return () => {
      console.log("🧹 Cleaning up socket connection effect");
      if (socketCleanup) {
        socketCleanup();
      }
      if (activeSocket) {
        activeSocket.disconnect();
        disconnectSocket();
      }
    };
  }, [codeName]);

// Fetch messages when a conversation is selected
  useEffect(() => {
    if (selectedConversation && socket && isConnected) {
      console.log(
        "📥 Requesting messages for conversation:",
        selectedConversation
      );
      // Always fetch fresh messages when a conversation is selected
      // This ensures we get all messages including ones that arrived while another conversation was selected
      socket.emit("get_conversation_messages", {
        conversation_id: selectedConversation,
      });
    }
  }, [selectedConversation, socket, isConnected]);

// Helper function to format timestamp
  const formatTimestamp = (
    timestamp: string | Date | null | undefined
  ): string => {
    if (!timestamp) return "Unknown";

try {
      const date = new Date(timestamp);
      const now = new Date();
      const diffMs = now.getTime() - date.getTime();
      const diffMins = Math.floor(diffMs / 60000);
      const diffHours = Math.floor(diffMs / 3600000);
      const diffDays = Math.floor(diffMs / 86400000);

if (diffMins < 1) return "Just now";
      if (diffMins < 60) return `${diffMins} min ago`;
      if (diffHours < 24)
        return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
      if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;

return date.toLocaleDateString();
    } catch {
      return "Unknown";
    }
  };

const filteredConversations = conversations
    .filter((conv) => {
      if (filter === "all") return true;
      return conv.status === filter;
    })
    .sort((a, b) => {
      // Sort by updatedAt in descending order (most recent first)
      const dateA = a.updatedAt
        ? new Date(a.updatedAt).getTime()
        : new Date(0).getTime();
      const dateB = b.updatedAt
        ? new Date(b.updatedAt).getTime()
        : new Date(0).getTime();
      return dateB - dateA; // Descending order (newest first)
    });

const selectedConv = conversations.find((c) => c.id === selectedConversation);

const updateConversationStatus = (
    conversationId: string,
    newStatus: "active" | "resolved"
  ) => {
    console.log(
      `[v0] Updating conversation ${conversationId} status to ${newStatus}`
    );
    // In a real implementation, this would update the backend
  };

return (
    <div className="space-y-6">
      <div className="lg:hidden">
        {!selectedConversation ? (
          <div className="space-y-4">
            {/* Filters - mobile optimized */}
            <div className="flex gap-2 overflow-x-auto pb-2">
              <Button
                variant={filter === "all" ? "default" : "outline"}
                size="sm"
                onClick={() => setFilter("all")}
                className="whitespace-nowrap flex-shrink-0"
              >
                All
              </Button>
              <Button
                variant={filter === "active" ? "default" : "outline"}
                size="sm"
                onClick={() => setFilter("active")}
                className="whitespace-nowrap flex-shrink-0"
              >
                Active
              </Button>
              <Button
                variant={filter === "resolved" ? "default" : "outline"}
                size="sm"
                onClick={() => setFilter("resolved")}
                className="whitespace-nowrap flex-shrink-0"
              >
                Resolved
              </Button>
            </div>

{/* Conversation List - mobile view */}
            <div className="space-y-3">
              {isLoading && (
                <Card>
                  <CardContent className="py-12 text-center">
                    <p className="text-muted-foreground">
                      Loading conversations...
                    </p>
                  </CardContent>
                </Card>
              )}

{error && !isLoading && (
                <Card>
                  <CardContent className="py-12 text-center">
                    <p className="text-destructive">{error}</p>
                    <Button
                      variant="outline"
                      className="mt-4"
                      onClick={() => {
                        setError(null);
                        setIsLoading(true);
                        // Socket will reconnect automatically via useEffect when codeName changes
                        // Force reconnection by disconnecting and reconnecting
                        if (socket) {
                          socket.disconnect();
                          disconnectSocket();
                        }
                        // Trigger reconnection by updating a dependency
                        if (codeName) {
                          const newSocket = connectSocketWithCodeName(codeName);
                          setSocket(newSocket);
                        }
                      }}
                    >
                      Retry
                    </Button>
                  </CardContent>
                </Card>
              )}

{!isLoading && !error && filteredConversations.length === 0 && (
                <Card>
                  <CardContent className="py-12 text-center">
                    <MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                    <p className="text-muted-foreground">
                      No conversations found
                    </p>
                  </CardContent>
                </Card>
              )}

{!isLoading &&
                !error &&
                filteredConversations.map((conv) => (
                  <Card
                    key={conv.id}
                    className="cursor-pointer hover:bg-accent transition-colors active:scale-[0.98]"
                    onClick={() => setSelectedConversation(conv.id)}
                  >
                    <CardContent className="p-4">
                      <div className="flex items-start justify-between mb-2">
                        <div className="flex-1 min-w-0">
                          <h3 className="font-semibold text-base">
                            {conv.name}
                          </h3>
                        </div>
                        <span
                          className={cn(
                            "px-2 py-1 rounded-full text-xs font-medium flex-shrink-0 ml-2",
                            conv.status === "active" &&
                              "bg-green-100 text-green-700",
                            conv.status === "resolved" &&
                              "bg-gray-100 text-gray-700"
                          )}
                        >
                          {conv.status}
                        </span>
                      </div>
                      <p className="text-sm font-medium mb-1 line-clamp-1">
                        {conv.topic}
                      </p>
                      <p className="text-sm text-muted-foreground line-clamp-2 mb-2">
                        {conv.lastMessage}
                      </p>
                      <div className="flex items-center gap-2 text-xs text-muted-foreground flex-wrap">
                        <span>{conv.messageCount} msgs</span>
                        <span>•</span>
                        <span>{conv.timestamp}</span>
                      </div>
                    </CardContent>
                  </Card>
                ))}
            </div>
          </div>
        ) : (
          <div className="space-y-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setSelectedConversation(null)}
              className="mb-2"
            >
              <ChevronLeft className="h-4 w-4 mr-1" />
              Back
            </Button>

{selectedConv && (
              <Card className="overflow-hidden">
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex-1 min-w-0">
                      <CardTitle className="text-lg">
                        {selectedConv.name}
                      </CardTitle>
                    </div>
                    <Select
                      defaultValue={selectedConv.status}
                      onValueChange={(value) =>
                        updateConversationStatus(
                          selectedConv.id,
                          value as "active" | "resolved"
                        )
                      }
                    >
                      <SelectTrigger className="w-[110px] h-8 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="active">Active</SelectItem>
                        <SelectItem value="resolved">Resolved</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="text-sm font-medium pt-2">
                    {selectedConv.topic}
                  </div>
                </CardHeader>
                <CardContent className="p-3 sm:p-4 overflow-x-hidden">
                  <div className="space-y-2 max-h-[calc(100vh-300px)] overflow-y-auto overflow-x-hidden">
                    {selectedConv.messages &&
                    selectedConv.messages.length > 0 ? (
                      selectedConv.messages.map((msg, idx) => {
                        // Create a unique key for each message
                        const messageKey =
                          msg._id ||
                          `${msg.text}_${msg.time}_${msg.is_internal}_${idx}`;

// Handle internal messages (intent detection) with collapsible UI
                        if (msg.is_internal) {
                          return (
                            <InternalMessage
                              key={messageKey}
                              message={{
                                text: msg.text,
                                time: msg.time,
                                author: msg.author || msg.message_type,
                              }}
                            />
                          );
                        }

// Regular messages - mobile optimized
                        return (
                          <div
                            key={messageKey}
                            className={cn(
                              "flex min-w-0 w-full",
                              msg.sender === "customer"
                                ? "justify-end"
                                : "justify-start"
                            )}
                          >
                            <div
                              className={cn(
                                "relative max-w-[85%] sm:max-w-[80%] rounded-lg shadow-sm min-w-0",
                                msg.sender === "customer"
                                  ? "bg-[#dcf8c6] rounded-tr-none px-2.5 py-2 sm:px-3 sm:py-2.5"
                                  : "bg-white rounded-tl-none px-3 py-2 sm:px-4 sm:py-3.5 border border-stone-100"
                              )}
                            >
                              <div
                                className={cn(
                                  "absolute top-0 w-2 h-2 sm:w-3 sm:h-3",
                                  msg.sender === "customer"
                                    ? "-right-1.5 sm:-right-2 bg-[#dcf8c6]"
                                    : "-left-1.5 sm:-left-2 bg-white"
                                )}
                                style={{
                                  clipPath:
                                    msg.sender === "customer"
                                      ? "polygon(0 0, 100% 0, 0 100%)"
                                      : "polygon(100% 0, 0 0, 100% 100%)",
                                }}
                              />
                              <p className="text-xs sm:text-sm text-stone-800 leading-relaxed whitespace-pre-wrap break-words overflow-wrap-anywhere">
                                {msg.text}
                              </p>
                              <div
                                className={cn(
                                  "flex items-center gap-1 mt-1.5 sm:mt-2.5",
                                  msg.sender === "customer"
                                    ? "justify-end"
                                    : "justify-start"
                                )}
                              >
                                <span className="text-[9px] sm:text-[10px] text-stone-500 font-medium">
                                  {msg.time}
                                </span>
                              </div>
                            </div>
                          </div>
                        );
                      })
                    ) : (
                      <div className="text-center py-8 text-muted-foreground">
                        <MessageSquare className="h-8 w-8 mx-auto mb-2" />
                        <p className="text-sm">
                          No messages yet. Messages will appear here when
                          available.
                        </p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        )}
      </div>

<div className="hidden lg:block">
        <div className="flex gap-6">
          {/* Left: Conversation List */}
          <div className="w-[380px]">
            <div className="space-y-4">
              <div className="flex items-center justify-between gap-2">
                <div className="flex gap-2 flex-1">
                  <Button
                    variant={filter === "all" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setFilter("all")}
                  >
                    All
                  </Button>
                  <Button
                    variant={filter === "active" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setFilter("active")}
                  >
                    Active
                  </Button>
                  <Button
                    variant={filter === "resolved" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setFilter("resolved")}
                  >
                    Resolved
                  </Button>
                </div>
              </div>

{isLoading && (
                <Card>
                  <CardContent className="py-12 text-center">
                    <p className="text-muted-foreground">
                      Loading conversations...
                    </p>
                  </CardContent>
                </Card>
              )}

<div className="space-y-2 max-h-[calc(100vh-250px)] overflow-y-auto pr-2">
                {!isLoading &&
                  !error &&
                  filteredConversations.map((conv) => (
                    <Card
                      key={conv.id}
                      className={cn(
                        "cursor-pointer transition-colors relative",
                        selectedConversation === conv.id
                          ? "border-primary bg-accent"
                          : "hover:bg-accent"
                      )}
                      onClick={() => setSelectedConversation(conv.id)}
                    >
                      {/* Notification icon at top right corner */}
                      {unreadConversations.has(conv.id) && (
                        <div className="absolute top-1 right-2 z-10">
                          <div className="relative bg-background rounded-full p-1  border-primary">
                            <Bell className="h-4 w-4 text-primary fill-primary" />
                            <span className="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 bg-primary rounded-full animate-pulse border-2 border-background" />
                          </div>
                        </div>
                      )}
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between mb-2">
                          <div className="flex-1 min-w-0">
                            <h3 className="font-semibold">{conv.name}</h3>
                          </div>
                          <span
                            className={cn(
                              "px-2 py-1 rounded-full text-xs font-medium flex-shrink-0 ml-2",
                              conv.status === "active" &&
                                "bg-green-100 text-green-700",
                              conv.status === "resolved" &&
                                "bg-gray-100 text-gray-700"
                            )}
                          >
                            {conv.status}
                          </span>
                        </div>
                        <p className="text-sm font-medium mb-1">{conv.topic}</p>
                        <p className="text-sm text-muted-foreground line-clamp-2 mb-2">
                          {conv.lastMessage}
                        </p>
                        <div className="flex items-center gap-3 text-xs text-muted-foreground">
                          <span>{conv.messageCount} messages</span>
                          <span>•</span>
                          <span>
                            {(() => {
                              // Get the most recent message timestamp if messages exist
                              if (conv.messages && conv.messages.length > 0) {
                                const sortedMessages = [...conv.messages].sort(
                                  (a, b) => {
                                    const timeA = a._timestamp
                                      ? new Date(a._timestamp).getTime()
                                      : 0;
                                    const timeB = b._timestamp
                                      ? new Date(b._timestamp).getTime()
                                      : 0;
                                    return timeB - timeA; // Descending (newest first)
                                  }
                                );
                                const lastMessage = sortedMessages[0];
                                if (lastMessage._timestamp) {
                                  return formatTimestamp(
                                    lastMessage._timestamp
                                  );
                                }
                              }
                              // Fall back to updatedAt or timestamp
                              return conv.updatedAt
                                ? formatTimestamp(conv.updatedAt)
                                : conv.timestamp;
                            })()}
                          </span>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
              </div>
            </div>
          </div>

{/* Right: Conversation Detail */}
          <div className="flex-1 min-w-0">
            {selectedConv ? (
              <Card className="h-[calc(100vh-200px)] overflow-hidden">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div>
                      <CardTitle>{selectedConv.name}</CardTitle>
                    </div>
                    <Select
                      defaultValue={selectedConv.status}
                      onValueChange={(value) =>
                        updateConversationStatus(
                          selectedConv.id,
                          value as "active" | "resolved"
                        )
                      }
                    >
                      <SelectTrigger className="w-[120px]">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="active">Active</SelectItem>
                        <SelectItem value="resolved">Resolved</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="text-sm font-medium pt-2">
                    {selectedConv.topic}
                  </div>
                </CardHeader>
                <CardContent className="h-[calc(100%-120px)] overflow-y-auto overflow-x-hidden">
                  <div className="space-y-2 p-4 overflow-x-hidden">
                    {selectedConv.messages &&
                    selectedConv.messages.length > 0 ? (
                      selectedConv.messages.map((msg, idx) => {
                        // Create a unique key for each message
                        const messageKey =
                          msg._id ||
                          `${msg.text}_${msg.time}_${msg.is_internal}_${idx}`;

// Regular messages
                        return (
                          <div
                            key={messageKey}
                            className={cn(
                              "flex min-w-0",
                              msg.sender === "customer"
                                ? "justify-end"
                                : "justify-start"
                            )}
                          >
                            <div
                              className={cn(
                                "relative max-w-[85%] rounded-lg shadow-md min-w-0",
                                msg.sender === "customer"
                                  ? "bg-[#dcf8c6] rounded-tr-none px-3 py-2.5"
                                  : "bg-white rounded-tl-none px-4 py-3.5 border border-stone-100"
                              )}
                            >
                              <div
                                className={cn(
                                  "absolute top-0 w-3 h-3",
                                  msg.sender === "customer"
                                    ? "-right-2 bg-[#dcf8c6]"
                                    : "-left-2 bg-white"
                                )}
                                style={{
                                  clipPath:
                                    msg.sender === "customer"
                                      ? "polygon(0 0, 100% 0, 0 100%)"
                                      : "polygon(100% 0, 0 0, 100% 100%)",
                                }}
                              />
                              <p className="text-sm text-stone-800 leading-relaxed whitespace-pre-wrap break-words overflow-wrap-anywhere">
                                {msg.text}
                              </p>
                              <div
                                className={cn(
                                  "flex items-center gap-1 mt-2.5",
                                  msg.sender === "customer"
                                    ? "justify-end"
                                    : "justify-start"
                                )}
                              >
                                <span className="text-[10px] text-stone-500 font-medium">
                                  {msg.time}
                                </span>
                              </div>
                            </div>
                          </div>
                        );
                      })
                    ) : (
                      <div className="text-center py-8 text-muted-foreground">
                        <MessageSquare className="h-8 w-8 mx-auto mb-2" />
                        <p>
                          No messages yet. Messages will appear here when
                          available.
                        </p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            ) : (
              <Card className="h-full flex items-center justify-center">
                <CardContent className="text-center">
                  <MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <p className="text-muted-foreground">
                    Select a conversation to view details
                  </p>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

interface LeadGenerationsViewProps {
  onViewConversation: (phone: string) => void;
}

function LeadGenerationsView({ onViewConversation }: LeadGenerationsViewProps) {
  const [statusFilter, setStatusFilter] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [leads, setLeads] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

// Fetch leads from both APIs
  useEffect(() => {
    const fetchLeads = async () => {
      try {
        setIsLoading(true);
        setError(null);
        const auth = getFirebaseAuth();
        const user = auth.currentUser;

if (!user) {
          const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
            if (currentUser) {
              await fetchLeadsData(currentUser);
              unsubscribe();
            } else {
              setIsLoading(false);
              unsubscribe();
            }
          });
          return;
        }

await fetchLeadsData(user);
      } catch (err: any) {
        console.error("Error fetching leads:", err);
        setError(err.message || "Failed to load leads");
        setIsLoading(false);
      }
    };

const fetchLeadsData = async (currentUser: any) => {
      try {
        const accessToken = await currentUser.getIdToken(true);
        const refreshToken =
          typeof window !== "undefined"
            ? localStorage.getItem("refresh_token_hash")
            : null;

if (!refreshToken) {
          setError("Authentication error: Please sign in again.");
          setIsLoading(false);
          return;
        }

const headers = {
          Authorization: `Bearer ${accessToken}`,
          "X-Refresh-Token": refreshToken,
          "Content-Type": "application/json",
        };

// Call both APIs in parallel
        const [adhocResponse, bookingsResponse] = await Promise.all([
          fetch(
            "https://agent-dashboard-backend.jungle.baby/api/bookings/adhoc?page=1&per_page=20",
            {
              method: "GET",
              headers,
            }
          ),
          fetch(
            "https://agent-dashboard-backend.jungle.baby/api/bookings?page=1&per_page=20",
            {
              method: "GET",
              headers,
            }
          ),
        ]);

const allLeads: any[] = [];

// Process adhoc bookings
        if (adhocResponse.ok) {
          const adhocData = await adhocResponse.json().catch(() => ({}));
          // Handle both { bookings: [...] } and { data: [...] } formats
          const adhocBookings =
            adhocData.bookings ||
            adhocData.data ||
            (Array.isArray(adhocData) ? adhocData : []);
          if (Array.isArray(adhocBookings) && adhocBookings.length > 0) {
            allLeads.push(...adhocBookings);
          }
        }

// Process regular bookings
        if (bookingsResponse.ok) {
          const bookingsData = await bookingsResponse.json().catch(() => ({}));
          // Handle both { bookings: [...] } and { data: [...] } formats
          const bookings =
            bookingsData.bookings ||
            bookingsData.data ||
            (Array.isArray(bookingsData) ? bookingsData : []);
          if (Array.isArray(bookings) && bookings.length > 0) {
            allLeads.push(...bookings);
          }
        }

setLeads(allLeads);
      } catch (err: any) {
        console.error("Error fetching leads data:", err);
        setError(err.message || "Failed to load leads");
      } finally {
        setIsLoading(false);
      }
    };

fetchLeads();
  }, []);

// Mock leads data (fallback)
  const mockLeads = [
    {
      id: "1",
      name: "Sarah Chen",
      phone: "+65 9123 4567",
      email: "sarah.chen@email.com",
      status: "converted",
      interest: "birthday-parties",
      date: "2024-01-15",
      conversationId: "conv-1",
      notes: "Booked Adventure Party Package for 15 guests",
    },
    {
      id: "2",
      name: "Michael Rodriguez",
      phone: "+65 8234 5678",
      email: "m.rodriguez@email.com",
      status: "contacted",
      interest: "classes",
      date: "2024-01-15",
      conversationId: "conv-2",
      notes: "Interested in robotics program",
    },
    {
      id: "3",
      name: "Emily Thompson",
      phone: "+65 9876 5432",
      email: "emily.t@email.com",
      status: "new",
      interest: "camps",
      date: "2024-01-15",
      conversationId: "conv-3",
      notes: "",
    },
    {
      id: "4",
      name: "David Tan",
      phone: "+65 9234 8765",
      email: "david.tan@email.com",
      status: "qualified",
      interest: "classes",
      date: "2024-01-14",
      conversationId: "conv-4",
      notes: "Looking for science classes for 7-year-old",
    },
    {
      id: "5",
      name: "Lisa Wong",
      phone: "+65 8765 4321",
      email: "lisa.wong@email.com",
      status: "new",
      interest: "birthday-parties",
      date: "2024-01-14",
      conversationId: "conv-5",
      notes: "",
    },
  ];

// Transform API data to match the expected format
  const transformedLeads =
    leads.length > 0
      ? leads.map((booking: any) => {
          // Format phone number
          const formatPhone = (phone: string) => {
            if (!phone) return "";
            // If already formatted with +, return as is
            if (phone.startsWith("+")) return phone;
            // If Singapore number without country code, add +65
            if (phone.length === 8 && /^\d+$/.test(phone)) {
              return `+65 ${phone}`;
            }
            return phone;
          };

// Format date as "7 Jan 2026"
          const formatDate = (dateStr: string) => {
            if (!dateStr) return "";
            try {
              const date = new Date(dateStr);
              const day = date.getDate();
              const month = date.toLocaleDateString("en-US", {
                month: "short",
              });
              const year = date.getFullYear();
              return `${day} ${month} ${year}`;
            } catch {
              return dateStr;
            }
          };

// Format time as "11:00 AM"
          const formatTime = (timeStr: string) => {
            if (!timeStr) return "";
            try {
              // Handle formats like "11:00:00" or "11:00"
              const [hours, minutes] = timeStr.split(":").map(Number);
              const date = new Date();
              date.setHours(hours, minutes || 0, 0);
              return date.toLocaleTimeString("en-US", {
                hour: "numeric",
                minute: "2-digit",
                hour12: true,
              });
            } catch {
              return timeStr;
            }
          };

return {
            id: booking.id?.toString() || Math.random().toString(),
            name:
              booking.parentFullName ||
              booking.parent_name ||
              booking.child_name ||
              booking.name ||
              "Unknown",
            phone: formatPhone(
              booking.parentPhone ||
                booking.parent_contact ||
                booking.phone ||
                ""
            ),
            email:
              booking.parentEmail ||
              booking.parent_email ||
              booking.email ||
              "",
            status: booking.status || "pending", // Use actual status from API
            date: formatDate(
              booking.requested_date ||
                booking.requestedDate ||
                booking.booking_date ||
                booking.bookingDate ||
                booking.created_at ||
                booking.createdAt ||
                booking.date
            ),
            time: formatTime(
              // For adhoc bookings, use requested_time
              // For regular bookings, use booking_time
              booking.requested_time ||
                booking.requestedTime ||
                booking.booking_time ||
                booking.bookingTime ||
                ""
            ),
            bookingReference:
              booking.booking_reference || booking.bookingReference || "",
            conversationId:
              booking.conversationId ||
              booking.conversation_id ||
              booking.id?.toString() ||
              "",
            // Store original booking data for reference
            originalBooking: booking,
          };
        })
      : [];

const filteredLeads = transformedLeads.filter((lead) => {
    const matchesStatus =
      statusFilter === "all" || lead.status === statusFilter;
    const matchesSearch =
      searchQuery === "" ||
      lead.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      lead.phone.includes(searchQuery) ||
      lead.email.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesStatus && matchesSearch;
  });

const handleExportCSV = () => {
    console.log("Exporting leads to CSV...");
    // Simulate CSV export
    alert("Leads exported to CSV successfully!");
  };

const handleExportCRM = () => {
    console.log("Exporting leads to CRM...");
    // Simulate CRM export
    alert("Leads exported to CRM successfully!");
  };

return (
    <div className="space-y-4">
      {/* Header with actions */}
      <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
        <div>
          <h2 className="text-xl font-semibold">Lead Generations</h2>
          <p className="text-sm text-muted-foreground">
            Track and manage leads captured by your AI agent
          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={handleExportCSV}>
            <Download className="h-4 w-4 mr-2" />
            Export CSV
          </Button>
          <Button variant="outline" size="sm" onClick={handleExportCRM}>
            <FileText className="h-4 w-4 mr-2" />
            Export to CRM
          </Button>
        </div>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col lg:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search by name, phone, or email..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
            </div>
            <div className="flex gap-2">
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-[150px]">
                  <SelectValue placeholder="Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="confirmed">Confirmed</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="cancelled">Cancelled</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Loading State */}
      {isLoading && (
        <Card>
          <CardContent className="py-12 text-center">
            <p className="text-muted-foreground">Loading leads...</p>
          </CardContent>
        </Card>
      )}

{/* Error State */}
      {error && !isLoading && (
        <Card>
          <CardContent className="py-12 text-center">
            <p className="text-destructive">{error}</p>
          </CardContent>
        </Card>
      )}

{/* Leads Table - Desktop */}
      {!isLoading && !error && (
        <div className="hidden md:block">
          <Card className="pl-4">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Contact</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead>Time</TableHead>
                  <TableHead>Booking Reference</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredLeads.map((lead) => (
                  <TableRow key={lead.id}>
                    <TableCell>
                      <div>
                        <p className="font-medium">{lead.name}</p>
                        <p className="text-sm text-muted-foreground">
                          {lead.phone}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {lead.email}
                        </p>
                      </div>
                    </TableCell>
                    <TableCell>{getStatusBadge(lead.status)}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2 text-sm">
                        <Calendar className="h-4 w-4 text-muted-foreground" />
                        {lead.date}
                      </div>
                    </TableCell>
                    <TableCell>
                      <p className="text-sm">{lead.time || "-"}</p>
                    </TableCell>
                    <TableCell>
                      <p className="text-sm font-mono">
                        {lead.bookingReference || "-"}
                      </p>
                    </TableCell>
                    <TableCell className="text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm">
                            Actions
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem
                            onClick={() => {
                              onViewConversation(lead.phone);
                            }}
                          >
                            <ExternalLink className="h-4 w-4 mr-2" />
                            View Conversation
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={() => alert("Mark as contacted")}
                          >
                            Mark as Contacted
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={() => alert("Add notes functionality")}
                          >
                            Add Notes
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>
        </div>
      )}

{/* Leads Cards - Mobile */}
      {!isLoading && !error && (
        <div className="md:hidden space-y-4">
          {filteredLeads.map((lead) => (
            <Card key={lead.id}>
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div>
                    <CardTitle className="text-base">{lead.name}</CardTitle>
                    <CardDescription className="text-sm mt-1">
                      {lead.phone}
                      <br />
                      {lead.email}
                    </CardDescription>
                  </div>
                  {getStatusBadge(lead.status)}
                </div>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Status:</span>
                  {getStatusBadge(lead.status)}
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Date:</span>
                  <span>{lead.date}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Time:</span>
                  <span>{lead.time || "-"}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">
                    Booking Reference:
                  </span>
                  <span className="font-mono text-xs">
                    {lead.bookingReference || "-"}
                  </span>
                </div>
                <div className="flex gap-2 pt-2">
                  <Button
                    variant="outline"
                    size="sm"
                    className="flex-1 bg-transparent"
                    onClick={() => {
                      onViewConversation(lead.phone);
                    }}
                  >
                    <MessageSquare className="h-4 w-4 mr-2" />
                    View Chat
                  </Button>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button
                        variant="outline"
                        size="sm"
                        className="flex-1 bg-transparent"
                      >
                        More
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem
                        onClick={() => {
                          onViewConversation(lead.phone);
                        }}
                      >
                        <ExternalLink className="h-4 w-4 mr-2" />
                        View Conversation
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={() => alert("Mark as contacted")}
                      >
                        Mark as Contacted
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={() => alert("Add notes functionality")}
                      >
                        Add Notes
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

{!isLoading && !error && leads.length === 0 && (
        <Card>
          <CardContent className="py-12 text-center">
            <UserPlus className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
            <p className="text-muted-foreground">
              No leads found. Leads will appear here once captured by your AI
              agent.
            </p>
          </CardContent>
        </Card>
      )}

{!isLoading &&
        !error &&
        leads.length > 0 &&
        filteredLeads.length === 0 && (
          <Card>
            <CardContent className="py-12 text-center">
              <UserPlus className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
              <p className="text-muted-foreground">
                No leads found matching your filters
              </p>
            </CardContent>
          </Card>
        )}
    </div>
  );
}

export default function ChatAgentPage() {
  const [activeTab, setActiveTab] = useState<
    "setup" | "conversations" | "leads"
  >("setup");
  const [hasAgent, setHasAgent] = useState<boolean>(false);
  const [isLoadingAgent, setIsLoadingAgent] = useState<boolean>(true);

// Reset to setup tab if user tries to access other tabs without an agent
  useEffect(() => {
    if (!isLoadingAgent && !hasAgent && activeTab !== "setup") {
      setActiveTab("setup");
    }
  }, [hasAgent, isLoadingAgent, activeTab]);
  const [existingAgent, setExistingAgent] = useState<{
    code_name?: string;
    website_url?: string;
  } | null>(null);
  const [phoneNumber, setPhoneNumber] = useState<string>("");
  const [userEmail, setUserEmail] = useState<string>("");
  const [selectConversationByPhone, setSelectConversationByPhone] = useState<
    string | null
  >(null);
  const [showConversationNotFoundDialog, setShowConversationNotFoundDialog] =
    useState(false);

// Check if merchant has an agent
  useEffect(() => {
    const checkAgent = async () => {
      try {
        setIsLoadingAgent(true);
        const auth = getFirebaseAuth();
        const user = auth.currentUser;

const loadForUser = async (currentUser: any) => {
          if (!currentUser) {
            setIsLoadingAgent(false);
            return;
          }

try {
            const accessToken = await currentUser.getIdToken(true);
            const refreshToken =
              typeof window !== "undefined"
                ? localStorage.getItem("refresh_token_hash")
                : null;

if (!refreshToken) {
              console.error("No refresh token found");
              setHasAgent(false);
              setIsLoadingAgent(false);
              return;
            }

const response = await fetch(
              "https://agent-dashboard-backend.jungle.baby/api/agents/me",
              {
                method: "GET",
                headers: {
                  Authorization: `Bearer ${accessToken}`,
                  "X-Refresh-Token": refreshToken,
                  "Content-Type": "application/json",
                },
              }
            );

if (response.ok) {
              const data = await response.json();
              // If we get a successful response with agent data, merchant has an agent
              const hasExistingAgent =
                data &&
                (data.id || data.agentId || Object.keys(data).length > 0);

setHasAgent(!!hasExistingAgent);

if (hasExistingAgent) {
                const codeName = data.code_name || data.agent_code_name;
                const websiteUrl =
                  data.website_url || data.scraped_website_name;

setExistingAgent({
                  code_name: codeName,
                  website_url: websiteUrl,
                });

// Update sessionStorage with code_name if present
                if (codeName && typeof window !== "undefined") {
                  sessionStorage.setItem("agent_code_name", codeName);
                  console.log(
                    "✅ Updated sessionStorage with agent_code_name:",
                    codeName
                  );
                }
              }
            } else if (response.status === 404) {
              // 404 means no agent found
              setHasAgent(false);
            } else {
              // Other errors - assume no agent for now
              console.error(
                "Error checking agent:",
                response.status,
                response.statusText
              );
              setHasAgent(false);
            }
          } catch (err) {
            console.error("Error fetching agent:", err);
            setHasAgent(false);
          } finally {
            setIsLoadingAgent(false);
          }
        };

if (!user) {
          const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
            await loadForUser(currentUser);
            unsubscribe();
          });
        } else {
          await loadForUser(user);
        }
      } catch (err) {
        console.error("Error in checkAgent:", err);
        setIsLoadingAgent(false);
        setHasAgent(false);
      }
    };

checkAgent();
  }, []);

// Get user email and load phone number from localStorage
  useEffect(() => {
    const auth = getFirebaseAuth();
    const user = auth.currentUser;

if (currentUser.email) {
        setUserEmail(currentUser.email);
        // Load phone number from localStorage
        const storageKey = `${currentUser.email}_no`;
        const storedPhone = localStorage.getItem(storageKey);
        if (storedPhone) {
          setPhoneNumber(storedPhone);
        }
      }
    };

loadUserData(user);
  }, []);

// Save phone number to localStorage when it changes
  useEffect(() => {
    if (userEmail && phoneNumber) {
      const storageKey = `${userEmail}_no`;
      localStorage.setItem(storageKey, phoneNumber);
    }
  }, [phoneNumber, userEmail]);

const isValidPhoneNumber = phoneNumber
    ? validatePhoneNumber(phoneNumber)
    : false;

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Chat Agent</h1>
        <p className="text-muted-foreground">
          Your AI-powered sales and support assistant
        </p>
      </div>

<div className="border-b border-border overflow-x-auto">
        <div className="flex gap-4 lg:gap-6 min-w-max">
          <button
            onClick={() => setActiveTab("setup")}
            className={cn(
              "pb-3 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap",
              activeTab === "setup"
                ? "border-primary text-primary"
                : "border-transparent text-muted-foreground hover:text-foreground"
            )}
          >
            <div className="flex items-center gap-2 cursor-pointer">
              <Settings2 className="h-4 w-4 " />
              Assistant Setup
            </div>
          </button>
          {hasAgent && (
            <>
              <button
                onClick={() => setActiveTab("conversations")}
                className={cn(
                  "pb-3 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap",
                  activeTab === "conversations"
                    ? "border-primary text-primary"
                    : "border-transparent text-muted-foreground hover:text-foreground"
                )}
              >
                <div className="flex items-center gap-2 cursor-pointer">
                  <MessageSquare className="h-4 w-4 " />
                  Conversation History
                </div>
              </button>
              <button
                onClick={() => setActiveTab("leads")}
                className={cn(
                  "pb-3 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap",
                  activeTab === "leads"
                    ? "border-primary text-primary"
                    : "border-transparent text-muted-foreground hover:text-foreground"
                )}
              >
                <div className="flex items-center gap-2 cursor-pointer">
                  <UserPlus className="h-4 w-4" />
                  Lead Generations
                </div>
              </button>
            </>
          )}
        </div>
      </div>

{activeTab === "setup" ? (
        isLoadingAgent ? (
          <Card>
            <CardContent className="py-12 text-center">
              <p className="text-muted-foreground">Checking agent status...</p>
            </CardContent>
          </Card>
        ) : !hasAgent ? (
          <div className="grid gap-6 lg:grid-cols-2">
            <Card className="border-2 border-primary/20">
              <CardHeader>
                <div className="flex items-center justify-center h-16 w-16 rounded-full bg-primary/10 mb-4">
                  <Bot className="h-8 w-8 text-primary" />
                </div>
                <CardTitle>Create Your First Chat Agent</CardTitle>
                <CardDescription>
                  Set up an AI assistant that handles customer inquiries,
                  provides instant responses, and converts leads 24/7
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-3">
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="font-medium">Instant Response Time</p>
                      <p className="text-sm text-muted-foreground">
                        Answer inquiries in under 2 seconds, 24/7
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="font-medium">60-70% Conversion Rate</p>
                      <p className="text-sm text-muted-foreground">
                        Convert website visitors into qualified leads
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="font-medium">Smart Handoffs</p>
                      <p className="text-sm text-muted-foreground">
                        Seamlessly transfer complex queries to your team
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="font-medium">Trained on Your Business</p>
                      <p className="text-sm text-muted-foreground">
                        Learns from your website, FAQs, and business information
                      </p>
                    </div>
                  </div>
                </div>

<Button className="w-full" size="lg" asChild>
                  <Link href="/dashboard/ai-agents/chat/onboard">
                    Create Chat Agent
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </CardContent>
            </Card>

<div className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2">
                    <Clock className="h-5 w-5 text-primary" />
                    How It Works
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex gap-3">
                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-sm font-semibold text-primary">
                      1
                    </div>
                    <div>
                      <p className="font-medium">Enter Your Website URL</p>
                      <p className="text-sm text-muted-foreground">
                        We'll analyze your business information
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-3">
                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-sm font-semibold text-primary">
                      2
                    </div>
                    <div>
                      <p className="font-medium">AI Training</p>
                      <p className="text-sm text-muted-foreground">
                        Your agent learns about your services, pricing, and FAQs
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-3">
                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-sm font-semibold text-primary">
                      3
                    </div>
                    <div>
                      <p className="font-medium">Test & Deploy</p>
                      <p className="text-sm text-muted-foreground">
                        Preview your agent and go live in minutes
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2">
                    <MessageSquare className="h-5 w-5 text-primary" />
                    What You'll Get
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center gap-2">
                      <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                      WhatsApp-style chat interface
                    </li>
                    <li className="flex items-center gap-2">
                      <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                      Real-time conversation monitoring
                    </li>
                    <li className="flex items-center gap-2">
                      <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                      Performance analytics dashboard
                    </li>
                    <li className="flex items-center gap-2">
                      <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                      Custom training documentation
                    </li>
                  </ul>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2">
                    <Bot className="h-5 w-5 text-primary" />
                    Perfect For
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-muted-foreground">
                    <li>• Enrichment centers with high inquiry volume</li>
                    <li>• Businesses wanting 24/7 customer support</li>
                    <li>• Converting website visitors into leads</li>
                    <li>• Reducing response time and improving engagement</li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        ) : (
          <div className="grid gap-6 lg:grid-cols-2">
            <Card className="border-2 border-primary/20">
              <CardHeader>
                <CardTitle>Agent Already Created</CardTitle>
                <CardDescription>
                  We've detected an existing agent for your account.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-1">
                  <p className="text-sm text-muted-foreground">Website</p>
                  <p className="font-medium">
                    {existingAgent?.website_url || "Website not available"}
                  </p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm text-muted-foreground">Agent Code</p>
                  <p className="font-mono text-sm">
                    {existingAgent?.code_name || "N/A"}
                  </p>
                </div>
                <p className="text-sm text-muted-foreground">
                  You can preview and test your agent using the link on the
                  right.
                </p>
              </CardContent>
            </Card>

<Card className="border border-dashed">
              <CardHeader>
                <CardTitle>Preview Your Agent</CardTitle>
                <CardDescription>
                  Open the live preview of your existing agent.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-sm text-muted-foreground">
                  Click the button below to open the WhatsApp-style chat preview
                  with your trained agent.
                </p>
                <div className="space-y-2">
                  <Label htmlFor="phone-number" className="text-sm font-medium">
                    Mobile Number
                  </Label>
                  <Input
                    id="phone-number"
                    type="tel"
                    placeholder="Enter your mobile number (e.g., +65 9876 5432)"
                    value={phoneNumber}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                    className="w-full"
                  />
                  {phoneNumber && !isValidPhoneNumber && (
                    <p className="text-sm text-destructive">
                      Please enter a valid phone number
                    </p>
                  )}
                </div>
                <Button
                  asChild
                  disabled={!existingAgent?.code_name || !isValidPhoneNumber}
                  className="w-full sm:w-auto sm:px-6"
                >
                  <Link
                    href={
                      existingAgent?.code_name && isValidPhoneNumber
                        ? `/dashboard/ai-agents/chat/preview/${encodeURIComponent(
                            existingAgent.code_name
                          )}?url=${encodeURIComponent(
                            existingAgent.website_url || ""
                          )}`
                        : "#"
                    }
                  >
                    Open Agent Preview
                    <ExternalLink className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        )
      ) : activeTab === "conversations" ? (
        <ConversationMonitoring
          codeName={existingAgent?.code_name}
          selectConversationByPhone={selectConversationByPhone}
          onConversationSelected={() => {
            setSelectConversationByPhone(null);
          }}
          onConversationNotFound={() => {
            setShowConversationNotFoundDialog(true);
            setSelectConversationByPhone(null);
          }}
        />
      ) : (
        <LeadGenerationsView
          onViewConversation={(phone) => {
            setActiveTab("conversations");
            setSelectConversationByPhone(phone);
          }}
        />
      )}

{/* Conversation Not Found Dialog */}
      <Dialog
        open={showConversationNotFoundDialog}
        onOpenChange={setShowConversationNotFoundDialog}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Conversation Not Found</DialogTitle>
            <DialogDescription>
              We couldn't find a conversation for this lead. Currently, only
              WhatsApp chats are integrated with the chat system. Conversations
              initiated through web forms or other channels are not yet
              available in the conversation history.
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end mt-4">
            <Button onClick={() => setShowConversationNotFoundDialog(false)}>
              Close
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-agents/chat/preview/[id]/page.tsx" isMerged="true"
"use client";

import type React from "react";

import { useState, useRef, useEffect, Suspense } from "react";
import { useSearchParams, useParams, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  Send,
  Check,
  CheckCheck,
  Smile,
  Mic,
  Phone,
  Video,
  MoreVertical,
  Sparkles,
  Wifi,
  WifiOff,
  ChevronDown,
  ChevronRight,
  Bot,
  ArrowLeft,
} from "lucide-react";
import Link from "next/link";
import {
  connectSocketWithCodeName,
  getSocket,
  disconnectSocket,
} from "@/lib/services/socket";
import type { Socket } from "socket.io-client";
import ReactMarkdown from "react-markdown";
import { getFirebaseAuth } from "@/lib/firebase";
import { onAuthStateChanged } from "firebase/auth";

// Internal Message Component (for intent detection)
function InternalMessage({ message }: { message: Message }) {
  const [expanded, setExpanded] = useState(false);

// Try to parse JSON content for better formatting
  let parsedContent: any = null;
  let displayText = message.content;

function ChatAgentPreviewContent() {
  const params = useParams();
  const searchParams = useSearchParams();
  const router = useRouter();
  const id = params.id as string;
  const url = searchParams.get("url") || "";
  const businessData = getBusinessData(url);

const messagesEndRef = useRef<HTMLDivElement>(null);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

const scrollToBottom = () => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollTop =
        scrollContainerRef.current.scrollHeight;
    }
  };

useEffect(() => {
    const timeoutId = setTimeout(() => {
      scrollToBottom();
    }, 0);
    return () => clearTimeout(timeoutId);
  }, [messages, isTyping]);

// Load user email and phone number from localStorage
  useEffect(() => {
    const auth = getFirebaseAuth();
    const user = auth.currentUser;

if (!codeName) {
      console.error("No code_name found in session storage");
      setError("Agent code not found. Please try creating your agent again.");
      return;
    }

let cleanupFn: (() => void) | undefined;

// Get phone number from localStorage
    const connectSocket = async () => {
      const auth = getFirebaseAuth();
      const user = auth.currentUser;

const setupSocket = (phoneNumber?: string) => {
        console.log("Connecting to socket with code_name:", codeName);
        if (phoneNumber) {
          console.log("Using customer_number:", phoneNumber);
        }
        const newSocket = connectSocketWithCodeName(codeName, phoneNumber);
        setSocket(newSocket);

// Track if we've received the "connected" event from server
        let receivedConnectedEvent = false;
        let connectionTimeout: NodeJS.Timeout | null = null;

// Set a timeout to show error if server doesn't send "connected" event
        connectionTimeout = setTimeout(() => {
          if (!receivedConnectedEvent) {
            setError(
              "Connection timeout. Please check your internet connection and try again."
            );
            setConnected(false);
          }
        }, 15000); // 15 second timeout - wait for server "connected" event

// Handle connection events - match ai-agent implementation exactly
        newSocket.on("connect", () => {
          console.log("✅ Socket connected to server");
          // Don't set connected=true here - wait for server acknowledgment via "connected" event
        });

newSocket.on("disconnect", (reason) => {
          console.log("❌ Socket disconnected from server:", reason);
          setConnected(false);
          if (connectionTimeout) {
            clearTimeout(connectionTimeout);
            connectionTimeout = null;
          }
        });

newSocket.on("connect_error", (error: any) => {
          // Log for debugging but don't show error to user
          // Socket.io will automatically retry with other transports
          console.error("❌ Socket connection error (will retry):", {
            message: error.message,
            type: error.type,
            description: error.description,
            transport: newSocket.io?.engine?.transport?.name,
          });
          // Don't set error state here - let socket.io retry
        });

newSocket.on("connected", (data: any) => {
          console.log("✅ Server acknowledged connection:", data);
          receivedConnectedEvent = true; // Mark that we received the event
          setConnected(true);
          setError(null); // Clear any previous errors
          // Clear timeout on successful connection acknowledgment
          if (connectionTimeout) {
            clearTimeout(connectionTimeout);
            connectionTimeout = null;
          }

// Optionally add a welcome message after connection
          if (messages.length === 0) {
            const welcomeMessage: Message = {
              id: "welcome",
              role: "assistant",
              content: `Hi! I'm the AI agent for ${businessData.name} 🌿 I can answer questions about your business. How can I help you today?`,
              time: new Date().toLocaleTimeString("en-US", {
                hour: "numeric",
                minute: "2-digit",
                hour12: true,
              }),
            };
            setMessages([welcomeMessage]);
          }

// Focus on input after connection
          setTimeout(() => {
            inputRef.current?.focus();
          }, 100);
        });

newSocket.on("response_start", () => {
          console.log("Response started");
          setIsTyping(true);
        });

newSocket.on("agent_event", (event: any) => {
          console.log("Received event:", event);
          console.log("Event details:", {
            is_internal: event.is_internal,
            author: event.author,
            has_text: !!event.text,
            text_length: event.text?.length || 0,
            event_type: event.event_type,
          });

// Detect internal messages by checking is_internal flag OR author field
          // Intent detection messages typically have author: "intent_detector"
          const isInternalMessage =
            event.is_internal ||
            event.author === "intent_detector" ||
            event.author?.toLowerCase().includes("intent");

// Show all events - both internal (intent detection) and regular messages
          // For internal messages, show them even if text is empty (might be JSON in other fields)
          // For regular messages, only show if text exists
          if (isInternalMessage || event.text) {
            // For internal messages, try to get text from various possible fields
            let content = event.text || "";
            if (isInternalMessage && !content) {
              // Try to stringify the event data if text is not available
              try {
                // Remove circular references and stringify
                const { text, ...rest } = event;
                content = JSON.stringify(rest, null, 2);
              } catch {
                content = "Internal event";
              }
            }

// Only add message if we have content or it's an internal event
            if (content || isInternalMessage) {
              const message: Message = {
                id: Date.now().toString() + Math.random(),
                role: "assistant",
                content: content || JSON.stringify(event, null, 2),
                time: new Date().toLocaleTimeString("en-US", {
                  hour: "numeric",
                  minute: "2-digit",
                  hour12: true,
                }),
                is_internal: isInternalMessage,
                author:
                  event.author ||
                  (isInternalMessage ? "intent_detector" : "assistant"),
                event_type: event.event_type,
              };
              console.log("Adding message to chat:", message);
              setMessages((prev) => [...prev, message]);
            }
          } else {
            console.log("Skipping event - no text and not internal:", event);
          }
        });

newSocket.on("response_complete", () => {
          console.log("Response complete");
          setIsTyping(false);
          // Keep focus on input after response completes
          setTimeout(() => {
            inputRef.current?.focus();
          }, 0);
        });

newSocket.on("error", (error: any) => {
          // This is a server-sent error event (not connect_error)
          console.log("Socket error from server:", error);
          setIsTyping(false);

// Extract error message from different possible formats
          let errorMessage = "An error occurred";
          if (typeof error === "string") {
            errorMessage = error;
          } else if (error?.message) {
            errorMessage = error.message;
          } else if (error && typeof error === "object") {
            // Try to get message from object, or stringify if needed
            if (error.message) {
              errorMessage = error.message;
            } else {
              // If error object has other properties, try to extract useful info
              const errorStr = JSON.stringify(error);
              if (errorStr !== "{}") {
                errorMessage = errorStr;
              }
            }
          }

// Show error in UI state
          setError(errorMessage);
          setConnected(false);

// Also add error message to chat
          const errorChatMessage: Message = {
            id: Date.now().toString(),
            role: "assistant",
            content: `Error: ${errorMessage}`,
            time: new Date().toLocaleTimeString("en-US", {
              hour: "numeric",
              minute: "2-digit",
              hour12: true,
            }),
            is_internal: false,
          };
          setMessages((prev) => [...prev, errorChatMessage]);

// Keep focus on input after error
          setTimeout(() => {
            inputRef.current?.focus();
          }, 0);
        });

newSocket.on("scraper_status", (data: any) => {
          console.log("Scraper status:", data);
          // Optionally handle scraper status updates
        });

// Return cleanup function
        return () => {
          if (connectionTimeout) {
            clearTimeout(connectionTimeout);
          }
          newSocket.disconnect();
        };
      };

if (!user) {
        // Wait for auth state
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
          const phoneNumber = loadPhoneNumber(currentUser);
          cleanupFn = setupSocket(phoneNumber);
          unsubscribe();
        });
        return;
      }

const phoneNumber = loadPhoneNumber(user);
      cleanupFn = setupSocket(phoneNumber);
    };

connectSocket();

// Return cleanup function
    return () => {
      if (cleanupFn) {
        cleanupFn();
      }
      const currentSocket = getSocket();
      if (currentSocket) {
        currentSocket.disconnect();
      }
    };
  }, []);