"use client";

import dynamic from "next/dynamic";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

const MapViewer = dynamic(() => import("@/components/map/MapViewer"), {
    ssr: false,
    loading: () => (
        <div className="h-[600px] w-full animate-pulse bg-muted/20 rounded-2xl flex items-center justify-center text-muted-foreground font-bold shadow-card border border-border/10">
            Connecting to Spatial CRM Engine...
        </div>
    )
});

export default function MapPage() {
    return (
        <div className="flex flex-col h-[calc(100vh-theme(spacing.32))] space-y-6">
            <div className="flex items-center justify-between space-y-2">
                <h2 className="text-3xl font-bold tracking-tight">Interactive Masterplan</h2>
            </div>

            <Card className="flex-1 flex flex-col overflow-hidden border-none shadow-card bg-card rounded-3xl">
                <CardHeader className="bg-muted/5 border-b border-border/10">
                    <CardTitle className="text-xl font-black">Greenville Estate Masterplan</CardTitle>
                    <CardDescription className="font-medium">
                        Live overview of all property plots. Click any plot to view its status, owner, or to initiate a new sale contract.
                    </CardDescription>
                </CardHeader>
                <CardContent className="flex-1 p-6 z-0">
                    <div className="h-full w-full rounded-2xl overflow-hidden border border-border/10 shadow-inner bg-muted/5">
                        <MapViewer />
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}