React Evolution Timeline:

React 16.8  → Hooks (useState, useEffect, useContext)
React 17    → JSX transform (no import needed)
React 18    → Concurrent features (Suspense, useTransition, startTransition)
React 19    → Actions, Server Components (stable), Compiler, new hooks
              use(), useActionState(), useFormStatus(),
              useOptimistic(), Asset Loading APIs

// React 18 — the pattern every developer has written hundreds of times
function ContactForm() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsPending(true);
    setError(null);
    try {
      await submitEnquiry(new FormData(e.target));
      setSuccess(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsPending(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <button disabled={isPending}>
        {isPending ? 'Sending...' : 'Send Enquiry'}
      </button>
      {error && <p className="error">{error}</p>}
    </form>
  );
}

// React 19 — Actions model
import { useActionState } from 'react';

function ContactForm({ propertyId }) {
  const [state, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      // This function IS the action
      // Return value becomes the new state
      const name = formData.get('name');
      const email = formData.get('email');
      const message = formData.get('message');

      try {
        await enquiriesApi.create(propertyId, { name, email, message });
        return { success: true, error: null };
      } catch (err) {
        return { success: false, error: err.message };
      }
    },
    { success: false, error: null }, // initial state
  );

  return (
    <form action={submitAction}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" required />
      <textarea name="message" rows={4} required />
      <SubmitButton />
      {state.error && <p className="error">{state.error}</p>}
      {state.success && <p className="success">Enquiry sent!</p>}
    </form>
  );
}

import { useActionState } from 'react';

// Signature:
// const [state, action, isPending] = useActionState(actionFn, initialState, permalink?)

// actionFn receives: (previousState, formData | any)
// Returns: the new state (any serializable value)
// React tracks isPending automatically while the action is running
// Errors thrown from actionFn are caught by the nearest error boundary

// The three return values:
// state      — current state (starts as initialState, updates after each action)
// action     — function to pass to <form action={...}> or call directly
// isPending  — true while an action is in progress

// Example with validation and multiple error types
function PropertyEnquiryForm({ propertyId, agentName }) {
  const [state, formAction, isPending] = useActionState(
    async (prev, formData) => {
      const data = {
        name: formData.get('name')?.trim(),
        email: formData.get('email')?.trim(),
        phone: formData.get('phone')?.trim(),
        message: formData.get('message')?.trim(),
        type: formData.get('type'),
        propertyId,
      };

      // Client-side validation before hitting the server
      const errors = {};
      if (!data.name || data.name.length < 2)
        errors.name = 'Name must be at least 2 characters';
      if (!data.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email))
        errors.email = 'Valid email required';
      if (!data.message || data.message.length < 10)
        errors.message = 'Message must be at least 10 characters';
      if (Object.keys(errors).length)
        return { errors, success: false, submitted: false };

      try {
        await enquiriesApi.create(propertyId, data);
        return { errors: {}, success: true, submitted: true };
      } catch (err) {
        if (err.response?.status === 429) {
          return {
            errors: {
              form: 'Too many enquiries. Please wait before trying again.',
            },
            success: false,
            submitted: false,
          };
        }
        return {
          errors: { form: err.message },
          success: false,
          submitted: false,
        };
      }
    },
    { errors: {}, success: false, submitted: false },
  );

  if (state.submitted) {
    return (
      <div className="enquiry-success">
        <h3>Enquiry Sent!</h3>
        <p>{agentName} will be in touch soon.</p>
      </div>
    );
  }

  return (
    <form action={formAction} className="enquiry-form">
      <div className="form-field">
        <label htmlFor="name">Full Name</label>
        <input id="name" name="name" type="text" required />
        {state.errors.name && (
          <span className="field-error">{state.errors.name}</span>
        )}
      </div>

      <div className="form-field">
        <label htmlFor="email">Email Address</label>
        <input id="email" name="email" type="email" required />
        {state.errors.email && (
          <span className="field-error">{state.errors.email}</span>
        )}
      </div>

      <div className="form-field">
        <label htmlFor="phone">Phone (optional)</label>
        <input id="phone" name="phone" type="tel" />
      </div>

      <div className="form-field">
        <label htmlFor="type">Enquiry Type</label>
        <select id="type" name="type">
          <option value="general">General Enquiry</option>
          <option value="inspection">Request Inspection</option>
          <option value="offer">Make an Offer</option>
        </select>
      </div>

      <div className="form-field">
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" rows={4} required />
        {state.errors.message && (
          <span className="field-error">{state.errors.message}</span>
        )}
      </div>

      {state.errors.form && <p className="form-error">{state.errors.form}</p>}

      {/* SubmitButton reads isPending from the nearest form — no prop drilling */}
      <SubmitButton />
    </form>
  );
}

import { useFormStatus } from 'react-dom';

// This component reads the form's state without receiving any props
function SubmitButton({
  children = 'Submit',
  pendingChildren = 'Submitting...',
}) {
  // useFormStatus must be called inside a component that is a child of a <form>
  // It cannot be called in the same component that renders the <form>
  const { pending, data, method, action } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className={`submit-btn ${pending ? 'submit-btn--pending' : ''}`}
      aria-busy={pending}
    >
      {pending ? (
        <>
          <span className="spinner" aria-hidden="true" />
          {pendingChildren}
        </>
      ) : (
        children
      )}
    </button>
  );
}

// Works anywhere inside the form — inputs can also read form status
function SmartInput({ name, label, type = 'text', ...props }) {
  const { pending } = useFormStatus();

  return (
    <div className="form-field">
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        name={name}
        type={type}
        disabled={pending} // auto-disabled while form is submitting
        {...props}
      />
    </div>
  );
}

// Usage — SubmitButton and SmartInput get form state automatically
function EnquiryForm({ action }) {
  return (
    <form action={action}>
      <SmartInput name="name" label="Name" />
      <SmartInput name="email" label="Email" type="email" />
      <SmartInput name="phone" label="Phone" type="tel" />
      <SubmitButton>Send Enquiry</SubmitButton>
    </form>
  );
}

import { useOptimistic, useActionState } from 'react';

function PropertySaveButton({ propertyId, initialSaved }) {
  // useOptimistic takes: (realState, updateFn)
  // updateFn: (currentOptimisticState, optimisticUpdate) => nextOptimisticState
  const [optimisticSaved, setOptimisticSaved] = useOptimistic(
    initialSaved,
    (current, update) => update, // update replaces current
  );

  const [, toggleSave, isPending] = useActionState(async () => {
    // Apply optimistic update immediately — before the API call
    setOptimisticSaved(!optimisticSaved);

    try {
      const result = await propertiesApi.save(propertyId);
      return result.saved;
    } catch (err) {
      // On error, useOptimistic automatically rolls back to initialSaved
      throw err;
    }
  }, initialSaved);

  return (
    <button
      onClick={() => toggleSave()}
      className={`save-btn ${optimisticSaved ? 'saved' : ''}`}
      disabled={isPending}
      aria-label={optimisticSaved ? 'Remove from saved' : 'Save property'}
    >
      {optimisticSaved ? '♥ Saved' : '♡ Save'}
    </button>
  );
}

// More complex optimistic update — comments list
function PropertyCommentsList({ propertyId, comments }) {
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (currentComments, newComment) => [
      ...currentComments,
      {
        ...newComment,
        _id: 'temp-' + Date.now(), // temporary ID until server responds
        pending: true, // flag for visual indicator
        createdAt: new Date().toISOString(),
      },
    ],
  );

  const [state, postComment] = useActionState(async (prev, formData) => {
    const text = formData.get('comment');
    if (!text?.trim()) return prev;

    // Add optimistically before API call
    addOptimisticComment({ text, author: 'You' });

    try {
      await commentsApi.create(propertyId, { text });
      return { ...prev, submitted: true };
    } catch (err) {
      return { ...prev, error: err.message };
    }
  }, {});

  return (
    <div className="comments-section">
      <ul className="comments-list">
        {optimisticComments.map((comment) => (
          <li
            key={comment._id}
            className={`comment ${comment.pending ? 'comment--pending' : ''}`}
          >
            <span>{comment.text}</span>
            {comment.pending && (
              <span className="pending-indicator">Sending...</span>
            )}
          </li>
        ))}
      </ul>

      <form action={postComment} className="comment-form">
        <input name="comment" placeholder="Add a note..." required />
        <SubmitButton>Post</SubmitButton>
      </form>
    </div>
  );
}

import { use, Suspense } from 'react';

// The promise is created outside the component — usually passed as a prop
// or created in a parent component / Server Component

// ✅ use() integrates with Suspense — the component suspends until the promise resolves
function PropertyDetails({ propertyPromise }) {
  // use() suspends this component while the promise is pending
  // The nearest <Suspense> boundary shows its fallback during that time
  const property = use(propertyPromise);

  return (
    <div className="property-details">
      <h1>{property.title}</h1>
      <p>{property.address.displayText}</p>
      <p>{property.description}</p>
    </div>
  );
}

// Parent starts the fetch immediately — before the child renders
function PropertyPage({ slug }) {
  // The promise is created immediately when PropertyPage renders
  // PropertyDetails doesn't need to wait for itself to mount before fetching
  // This is the "render-as-you-fetch" pattern — eliminates fetch waterfalls
  const propertyPromise = propertiesApi.getBySlug(slug);

  return (
    <Suspense fallback={<PropertyDetailSkeleton />}>
      <PropertyDetails propertyPromise={propertyPromise} />
    </Suspense>
  );
}

// Multiple parallel data fetches — no waterfall
function PropertyPage({ slug }) {
  // Both fetches start simultaneously
  const propertyPromise = propertiesApi.getBySlug(slug);
  const similarPromise = propertiesApi.getSimilar(slug, 6);

  return (
    <>
      <Suspense fallback={<PropertyDetailSkeleton />}>
        <PropertyDetails propertyPromise={propertyPromise} />
      </Suspense>

      <Suspense fallback={<SimilarPropertiesSkeleton />}>
        <SimilarProperties similarPromise={similarPromise} />
      </Suspense>
    </>
  );
}

import { use, createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

// use(Context) works inside conditions and loops — unlike useContext
function ConditionalComponent({ showExtra }) {
  // This was IMPOSSIBLE with useContext — hooks can't be in conditions
  // React 19: use() can be called conditionally
  if (showExtra) {
    const theme = use(ThemeContext);
    return <div className={`extra extra--${theme}`}>Extra content</div>;
  }

  return <div>Regular content</div>;
}

// use() and useContext are equivalent for unconditional use
// use() is strictly more powerful — prefer it for new code
function Header() {
  const user = use(AuthContext);
  const theme = use(ThemeContext);

  return (
    <header className={`header header--${theme}`}>
      {user ? `Welcome, ${user.name}` : 'Sign in'}
    </header>
  );
}

// React 18 — fetch waterfall pattern
// Component mounts → skeleton renders → useEffect fires → fetch starts → data arrives → render
function PropertyCard_Old({ slug }) {
  const [property, setProperty] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    propertiesApi.getBySlug(slug).then((p) => {
      setProperty(p);
      setLoading(false);
    });
  }, [slug]);

  if (loading) return <Skeleton />;
  return <Card property={property} />;
}

// React 19 — render-as-you-fetch
// Fetch starts immediately → Suspense shows skeleton → data arrives → render
function PropertyCard_New({ slug }) {
  // Promise created before this component even renders
  // (passed from parent or created at module level for static slugs)
  const property = use(propertiesPromise);
  return <Card property={property} />;
}

// React 19 — render metadata directly in components
// React hoists these to <head> automatically
function PropertyDetailPage({ property }) {
  return (
    <>
      {/* Metadata — React hoists to <head> */}
      <title>{property.title} — PropVault</title>

      <meta
        name="description"
        content={`${property.specs.bedrooms} bed, ${property.specs.bathrooms} bath ${property.propertyType} in ${property.address.suburb}. ${property.price.displayText}.`}
      />

      <meta property="og:title" content={property.title} />
      <meta property="og:image" content={property.primaryImage} />
      <meta
        property="og:description"
        content={`${property.address.displayText} — ${property.price.displayText}`}
      />
      <meta property="og:type" content="website" />

      {/* Canonical link */}
      <link
        rel="canonical"
        href={`https://propvault.com.au/properties/${property.slug}`}
      />

      {/* Structured data */}
      <script type="application/ld+json">
        {JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'RealEstateListing',
          name: property.title,
          description: property.description,
          url: `https://propvault.com.au/properties/${property.slug}`,
          price: property.price.amount,
          priceCurrency: 'AUD',
          address: {
            '@type': 'PostalAddress',
            streetAddress: property.address.line1,
            addressLocality: property.address.suburb,
            addressRegion: property.address.state,
            postalCode: property.address.postcode,
          },
        })}
      </script>

      {/* The actual page content */}
      <PropertyDetailView property={property} />
    </>
  );
}

// If multiple components render the same metadata, React deduplicates
// The most specific (deepest in the tree) wins for title
// For meta tags, React uses the `name` prop as the dedup key

// RootLayout renders default metadata
function RootLayout() {
  return (
    <>
      <title>PropVault — Australian Real Estate</title>
      <meta name="theme-color" content="#1a1209" />
      <Outlet />
    </>
  );
}

// PropertyPage overrides the title — React uses this one
function PropertyDetailPage({ property }) {
  return (
    <>
      <title>{property.title} — PropVault</title>
      {/* meta name="theme-color" is NOT re-rendered → deduplication keeps RootLayout's */}
      <PropertyDetailView />
    </>
  );
}

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';

// In a component that knows a heavy resource will be needed soon
function PropertyCard({ property }) {
  // Preconnect to image CDN when the card renders
  preconnect('https://images.propvault.com.au');

  // Prefetch DNS for the API
  prefetchDNS('api.propvault.com.au');

  return <article>...</article>;
}

// In a layout that knows a font will be needed
function RootLayout() {
  // Preload critical font — React adds <link rel="preload"> to <head>
  preload(
    'https://fonts.gstatic.com/s/playfairdisplay/v37/nuFiD-vYSZviVYUb_rj3ij__anPXBYf9lW4e.woff2',
    {
      as: 'font',
      type: 'font/woff2',
      crossOrigin: 'anonymous',
    },
  );

  return <div>{/* ... */}</div>;
}

// preinit — load and execute a script / stylesheet immediately
function CheckoutPage() {
  // Ensure a payment library is loaded before the user sees the payment form
  preinit('https://js.stripe.com/v3/', { as: 'script' });
  preinit('https://checkout.stripe.com/pay.css', { as: 'style' });

  return <PaymentForm />;
}

Client-Server Component Split:

  Server (no JS sent to client)       Client (JS bundle)
  ─────────────────────────────────   ───────────────────────────────
  PropertyListRSC                     PropertyCard
    - Reads MongoDB directly            - Handles save button click
    - No useEffect needed               - Manages enquiry form
    - Zero bundle contribution          - Handles image gallery swipe
  AgentProfileRSC
    - Fetches agent + their listings
    - Renders to HTML on server
  PropertySearchResultsRSC
    - Aggregation pipeline
    - Returns rendered HTML

// Server Component — default in React 19 / Next.js App Router
// File: app/properties/[slug]/page.jsx (Next.js App Router convention)

import { notFound } from 'next/navigation';
import { propertiesDb } from '@/lib/db'; // direct DB access — safe, server-only

// async is valid in Server Components — top-level await
async function PropertyPage({ params }) {
  // Direct database access — no API round-trip
  const property = await propertiesDb.findBySlug(params.slug);
  if (!property) notFound();

  // These fetches run in parallel — no useEffect waterfall
  const [similar, agent] = await Promise.all([
    propertiesDb.findSimilar(property._id, 6),
    agentsDb.findById(property.agent),
  ]);

  return (
    <div className="property-page">
      {/* Server-rendered — no JS in bundle */}
      <PropertyGallery images={property.images} />
      <PropertyInfo property={property} agent={agent} />
      <SimilarProperties properties={similar} />

      {/* Client Component — needs interactivity */}
      <EnquiryFormClient
        propertyId={property._id.toString()}
        agentName={agent.firstName}
      />
      <SaveButtonClient propertyId={property._id.toString()} />
    </div>
  );
}

export default PropertyPage;

// app/actions/property.actions.js — Server Actions file
'use server';

import { propertiesDb } from '@/lib/db';
import { getCurrentUser } from '@/lib/auth';
import { revalidatePath } from 'next/cache';

// This function runs on the server — called from any client component
export async function savePropertyAction(propertyId) {
  const user = await getCurrentUser();
  if (!user) throw new Error('Authentication required');

  const isSaved = user.savedProperties.includes(propertyId);

  await usersDb.findByIdAndUpdate(
    user._id,
    isSaved
      ? { $pull: { savedProperties: propertyId } }
      : { $addToSet: { savedProperties: propertyId } },
  );

  // Invalidate the cached page so the save count updates
  revalidatePath(`/properties`);

  return { saved: !isSaved };
}

// Server Action for creating enquiries
export async function createEnquiryAction(formData) {
  const data = {
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message'),
    propertyId: formData.get('propertyId'),
  };

  await enquiriesDb.create(data);
  await emailService.notifyAgent(data);

  return { success: true };
}

// Client component calling a Server Action
'use client';

import { useActionState } from 'react';
import { savePropertyAction } from '@/app/actions/property.actions';

function SaveButton({ propertyId, isSaved: initialSaved }) {
  const [optimisticSaved, setOptimisticSaved] = useOptimistic(
    initialSaved,
    (_, update) => update,
  );

  const [, toggleSave] = useActionState(async (prev, formData) => {
    setOptimisticSaved(!optimisticSaved);
    return savePropertyAction(propertyId);
  }, {});

  return (
    <form action={toggleSave}>
      <SubmitButton>{optimisticSaved ? '♥ Saved' : '♡ Save'}</SubmitButton>
    </form>
  );
}

// Before React Compiler — manual memoization
import { memo, useMemo, useCallback } from 'react';

const PropertyCard = memo(function PropertyCard({ property, onSave }) {
  const formattedPrice = useMemo(
    () =>
      property.price.amount
        ? `$${property.price.amount.toLocaleString('en-AU')}`
        : (property.price.displayText ?? 'Contact Agent'),
    [property.price],
  );

  const handleSave = useCallback(() => {
    onSave(property._id);
  }, [onSave, property._id]);

  return (
    <article className="property-card">
      <h3>{property.title}</h3>
      <p>{formattedPrice}</p>
      <button onClick={handleSave}>Save</button>
    </article>
  );
});

// After React Compiler — write natural code, compiler handles memoization
// The compiler transforms this into the equivalent of the above automatically
function PropertyCard({ property, onSave }) {
  const formattedPrice = property.price.amount
    ? `$${property.price.amount.toLocaleString('en-AU')}`
    : (property.price.displayText ?? 'Contact Agent');

  return (
    <article className="property-card">
      <h3>{property.title}</h3>
      <p>{formattedPrice}</p>
      <button onClick={() => onSave(property._id)}>Save</button>
    </article>
  );
}
// The compiler sees: formattedPrice only changes when property.price changes
// onSave only changes when onSave changes
// It inserts the correct memoization automatically

// ❌ Mutating props or state — compiler cannot optimize
function BadComponent({ items }) {
  items.push('new item'); // mutating a prop — breaks compiler
  return (
    <ul>
      {items.map((i) => (
        <li>{i}</li>
      ))}
    </ul>
  );
}

// ✅ Immutable — compiler can optimize
function GoodComponent({ items }) {
  const allItems = [...items, 'new item']; // new array — safe
  return (
    <ul>
      {allItems.map((i) => (
        <li key={i}>{i}</li>
      ))}
    </ul>
  );
}

// ❌ Calling hooks conditionally — not allowed regardless of compiler
function BadHooksComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    const [x] = useState(0); // conditional hook — invalid
  }
}

// ✅ Hooks always at top level
function GoodHooksComponent({ isLoggedIn }) {
  const [x] = useState(0);
  if (!isLoggedIn) return null;
  return <div>{x}</div>;
}

import { createRoot } from 'react-dom/client';

// React 19 root creation with error handling options
const root = createRoot(document.getElementById('root'), {
  // Called for errors not caught by error boundaries
  onUncaughtError: (error, errorInfo) => {
    errorMonitoringService.report(error, {
      componentStack: errorInfo.componentStack,
      type: 'uncaught',
    });
  },

  // Called for errors caught by error boundaries
  onCaughtError: (error, errorInfo) => {
    errorMonitoringService.report(error, {
      componentStack: errorInfo.componentStack,
      type: 'caught',
      boundary: errorInfo.errorBoundary,
    });
  },

  // Called for recoverable errors — React retried and succeeded
  onRecoverableError: (error, errorInfo) => {
    console.warn('Recoverable error:', error);
  },
});

root.render(<App />);

// Enhanced error boundary with React 19's improved reset
import { ErrorBoundary } from 'react-error-boundary';

function PropertyPageErrorBoundary({ children }) {
  return (
    <ErrorBoundary
      fallbackRender={({ error, resetErrorBoundary }) => (
        <div className="error-boundary">
          <h2>Unable to load property</h2>
          <p>{error.message}</p>
          <button onClick={resetErrorBoundary}>Try Again</button>
          <a href="/properties">Browse All Properties</a>
        </div>
      )}
      onError={(error, info) => {
        errorService.report(error, info);
      }}
    >
      {children}
    </ErrorBoundary>
  );
}

// React 18 — custom element props treated as HTML attributes (strings only)
// Custom elements couldn't receive objects or functions

// React 19 — passes non-string props as properties, not attributes
function PropertyMap({ coordinates, onMarkerClick }) {
  // These are now correctly received as properties by the web component
  return (
    <propvault-map
      center={coordinates} // Object — passed as property
      zoom={14} // Number — passed as property
      onmarkerclick={onMarkerClick} // Function — passed as property
      theme="light" // String — passed as attribute (unchanged)
    />
  );
}

propvault-react19/
├── app/                         ← Next.js 15 App Router (Server Components by default)
│   ├── layout.jsx               ← Root layout (Server Component)
│   ├── page.jsx                 ← Home page (Server Component)
│   ├── properties/
│   │   ├── page.jsx             ← Listing search (Server Component)
│   │   ├── [slug]/
│   │   │   └── page.jsx         ← Property detail (Server Component)
│   ├── agents/
│   │   └── [id]/
│   │       └── page.jsx         ← Agent profile (Server Component)
│   ├── account/
│   │   ├── saved/
│   │   │   └── page.jsx         ← Saved properties
│   │   └── enquiries/
│   │       └── page.jsx         ← Enquiry history
│   └── actions/
│       ├── property.actions.js  ← Server Actions (mutations)
│       └── enquiry.actions.js
├── components/
│   ├── server/                  ← Pure Server Components
│   │   ├── PropertyList.jsx
│   │   ├── AgentCard.jsx
│   │   └── FeaturedBanner.jsx
│   └── client/                  ← Client Components ('use client')
│       ├── EnquiryForm.jsx
│       ├── SaveButton.jsx
│       ├── SearchFilters.jsx
│       ├── ImageGallery.jsx
│       └── MapView.jsx
├── lib/
│   ├── db.js                    ← Mongoose connection
│   ├── auth.js                  ← Auth utilities
│   └── api.js                   ← Client-side API calls
└── models/                      ← Mongoose models (shared)

// app/layout.jsx — Server Component

import { preload, preconnect } from 'react-dom';
import { getCurrentUser } from '@/lib/auth';
import { NavbarClient } from '@/components/client/NavbarClient';
import './globals.css';

export const metadata = {
  metadataBase: new URL('https://propvault.com.au'),
  title: {
    default: 'PropVault — Australian Real Estate',
    template: '%s — PropVault',
  },
  description:
    'Find houses, apartments, and land for sale or rent across Australia.',
  openGraph: {
    type: 'website',
    siteName: 'PropVault',
    locale: 'en_AU',
  },
};

export default async function RootLayout({ children }) {
  // Read auth state server-side — no loading spinner
  const user = await getCurrentUser();

  // Preload critical assets
  preconnect('https://images.propvault.com.au');
  preload('/fonts/playfair-display-v37.woff2', {
    as: 'font',
    type: 'font/woff2',
    crossOrigin: 'anonymous',
  });

  return (
    <html lang="en-AU">
      <body>
        {/* NavbarClient needs interactivity — mobile menu, dropdowns */}
        <NavbarClient user={user} />
        <main>{children}</main>
        <footer className="footer">
          <p>© 2025 PropVault Pty Ltd. All rights reserved.</p>
        </footer>
      </body>
    </html>
  );
}

// app/properties/page.jsx — Server Component
// Receives URL search params directly — no useSearchParams hook needed

import { Suspense } from 'react';
import { propertiesDb } from '@/lib/db';
import { PropertyGrid } from '@/components/server/PropertyGrid';
import { SearchFiltersClient } from '@/components/client/SearchFiltersClient';
import { PropertyGridSkeleton } from '@/components/server/PropertyGridSkeleton';

export const metadata = {
  title: 'Property Search',
  description:
    'Search houses, apartments, and land for sale and rent across Australia.',
};

// searchParams is provided automatically by Next.js — no URL parsing code
export default async function PropertiesPage({ searchParams }) {
  const {
    suburb,
    city,
    state: stateParam,
    type,
    listingType = 'sale',
    minPrice,
    maxPrice,
    minBeds,
    minBaths,
    sort = 'newest',
    page = '1',
    search,
    lat,
    lng,
    radius,
  } = searchParams;

  const filters = {
    ...(suburb && { 'address.suburb': new RegExp(suburb, 'i') }),
    ...(city && { 'address.city': new RegExp(city, 'i') }),
    ...(stateParam && { 'address.state': stateParam }),
    ...(type && { propertyType: type }),
    listingType,
    isActive: true,
    status: 'active',
    ...(minPrice || maxPrice
      ? {
          'price.amount': {
            ...(minPrice && { $gte: Number(minPrice) }),
            ...(maxPrice && { $lte: Number(maxPrice) }),
          },
        }
      : {}),
    ...(minBeds && { 'specs.bedrooms': { $gte: Number(minBeds) } }),
    ...(minBaths && { 'specs.bathrooms': { $gte: Number(minBaths) } }),
  };

  const sortMap = {
    newest: { listedAt: -1 },
    price_asc: { 'price.amount': 1 },
    price_desc: { 'price.amount': -1 },
    beds_desc: { 'specs.bedrooms': -1 },
  };

  const pageNum = Math.max(1, Number(page));
  const limit = 20;

  // Direct DB access in Server Component — no HTTP round-trip
  const [properties, total] = await Promise.all([
    propertiesDb
      .find(filters)
      .sort(sortMap[sort] ?? { listedAt: -1 })
      .skip((pageNum - 1) * limit)
      .limit(limit)
      .populate('agent', 'firstName lastName avatar agencyName')
      .lean({ virtuals: true }),
    propertiesDb.countDocuments(filters),
  ]);

  return (
    <div className="properties-page">
      <title>
        {suburb
          ? `Properties in ${suburb} — PropVault`
          : 'Property Search — PropVault'}
      </title>

      <div className="properties-layout">
        {/* Client component — handles filter changes, updates URL */}
        <SearchFiltersClient initialFilters={searchParams} totalCount={total} />

        <div className="results-area">
          <div className="results-header">
            <h1>
              {suburb
                ? `Properties in ${suburb}`
                : city
                  ? `Properties in ${city}`
                  : 'All Properties'}
            </h1>
            <p className="results-count">{total} properties found</p>
          </div>

          {/* Suspense boundary for streaming */}
          <Suspense fallback={<PropertyGridSkeleton count={limit} />}>
            <PropertyGrid
              properties={properties}
              pagination={{
                page: pageNum,
                limit,
                total,
                totalPages: Math.ceil(total / limit),
              }}
            />
          </Suspense>
        </div>
      </div>
    </div>
  );
}