{/* Header */}

{/* Pattern */}

{isCreating ? New Entry : }

{loadingAddr ? "Fetching Address..." : address.split(',')[0]}

{loadingAddr ? "Locating..." : address}

{/* Body Content */}

{loadingAddr ? (

Resolving Location...

) : ( <> {/* Status Selector */} {isEditing && (

Canvassing Status

{["Neutral", "Hot Lead", "Customer", "Not Interested"].map(s => ( ))}

)} {/* SECTION 1: BASIC PROPERTY INFO */}

Property Basics

{/* SECTION 2: VALUES & CONDITION */}

Value & Condition

{/* SECTION 3: RENTAL STATUS (Conditional) */}

Rental Status

{formData.isRented === 'Yes' ? (

) : (

{formData.ownerWillingToRent !== 'No' && ( )}

)}

{/* SECTION 4: OWNER INTENT (Conditional) */}

Recall & Sales Intent

{formData.willingToSell === 'Yes' ? (

) : ( )}

{/* SECTION 5: OWNER CONTACT */}

Owner Contact

{/* SECTION 6: NOTES */}

Field Notes

{isEditing ? (

setFormData({ ...formData, notes: e.target.value })}
                                    />
                                ) : (
                                    <p className="text-sm text-zinc-600 dark:text-zinc-400 bg-zinc-50 dark:bg-white/5 p-4 rounded-xl border border-zinc-200 dark:border-white/5">
                                        {formData.notes || "No notes available."}
                                    </p>
                                )}
                            </div>
                        </>
                    )}
                </div>

{/* Footer */}
                <div className="p-6 border-t border-zinc-200 dark:border-white/5 bg-zinc-50/50 dark:bg-black/20 backdrop-blur-md shrink-0">
                    {isEditing ? (
                        <button onClick={handleSave} disabled={loadingAddr} className="w-full py-3 bg-zinc-900 dark:bg-white hover:bg-zinc-800 text-white dark:text-black font-bold rounded-xl shadow-lg transition-all flex items-center justify-center space-x-2 disabled:opacity-50">
                            <Save size={18} /> <span>{isCreating ? "Create Entry" : "Save Changes"}</span>
                        </button>
                    ) : (
                        <button onClick={() => setIsEditing(true)} className="w-full py-3 bg-white dark:bg-zinc-800 hover:bg-zinc-50 text-zinc-900 dark:text-white border border-zinc-200 dark:border-white/10 font-bold rounded-xl shadow-sm transition-all flex items-center justify-center space-x-2">
                            <Edit2 size={18} /> <span>Edit Details</span>
                        </button>
                    )}
                </div>
            </SpotlightCard>
        </div>
    );
};

const InputGroup = ({ label, children }) => (
    <div className="space-y-1.5">
        <label className="text-[10px] uppercase font-bold text-zinc-400 tracking-widest ml-0.5">{label}</label>
        <div>{children}</div>
    </div>
);

// --- MAIN PAGE COMPONENT --- //

function Maps() {
    const { properties, setProperties, updatePropertyStatus } = useMockStore();
    const { user } = useAuth();
    const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
        // Simulate initial map load
        const timer = setTimeout(() => setIsLoading(false), 1000);
        return () => clearTimeout(timer);
    }, []);

// Selection State
    const [selectedPropertyId, setSelectedPropertyId] = useState(null);
    const [newPropertyLocation, setNewPropertyLocation] = useState(null); // { lat, lng, address }
    const [loadingAddr, setLoadingAddr] = useState(false);

// Derived Selection
    const selectedProperty = useMemo(() =>
        properties.find(p => p.id === selectedPropertyId),
        [properties, selectedPropertyId]
    );

// -- Handlers --

// 1. Click Existing Polygon
    const handlePropertySelect = (property) => {
        setNewPropertyLocation(null); // Clear new creation mode
        setSelectedPropertyId(property.id);
    };

// 2. Click Empty Map (Create New)
    const handleMapCreate = async (latlng) => {
        // Only Field Agents (employees) can create
        if (user?.role !== 'FIELD_AGENT' && user?.role !== 'ADMIN') return;

setSelectedPropertyId(null);
        setNewPropertyLocation({ lat: latlng.lat, lng: latlng.lng, address: '' });
        setLoadingAddr(true);

try {
            // Reverse Geocode using simple OSM Nominatim API
            // Note: In production, user should cache/throttle or use paid service.
            const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latlng.lat}&lon=${latlng.lng}`);

if (!response.ok) throw new Error("Geocoding service unavailable");

const data = await response.json();

setNewPropertyLocation(prev => ({
                ...prev,
                address: data.display_name || "Unknown Location"
            }));
            logger.info("Geocoding successful", { lat: latlng.lat, lng: latlng.lng });
        } catch (err) {
            logger.error("Geocoding failed", err);
            toast.error("Could not fetch address", { description: "Using coordinates instead." });
            setNewPropertyLocation(prev => ({ ...prev, address: "Location Found (Address Unavailable)" }));
        } finally {
            setLoadingAddr(false);
        }
    };

// 3. Save Changes (Create or Update)
    const handleSave = (formData) => {
        try {
            // Construct the full data objects based on schema
            const newOwnerData = {
                fullName: formData.ownerName,
                primaryPhoneNumber: formData.ownerPhone || "Pending",
                emailAddress: formData.ownerEmail || "Pending",
                details: {
                    occupation: formData.occupation,
                    ownershipType: formData.ownershipType,
                    willingToSell: formData.willingToSell,
                    desiredPrice: formData.desiredPrice,
                    minPrice: formData.minPrice,
                    ownerAddress: formData.ownerAddress
                }
            };

const newPropertyData = {
                propertyType: formData.propertyType,
                currentEstimatedMarketValue: parseInt(formData.marketValue) || 0,
                notes: formData.notes,
                details: {
                    builtUpArea: formData.builtUpArea,
                    lotSize: formData.lotSize,
                    yearBuilt: formData.yearBuilt,
                    bedrooms: formData.bedrooms,
                    bathrooms: formData.bathrooms,
                    parkingSpaces: formData.parkingSpaces,
                    taxValue: formData.taxValue,
                    roofCondition: formData.roofCondition,
                    lastRenovationDate: formData.lastRenovationDate,

// Rental Status
                    isRented: formData.isRented,
                    tenantName: formData.tenantName,
                    currentRent: formData.currentRent,
                    leaseEnd: formData.leaseEnd,
                    ownerWillingToRent: formData.ownerWillingToRent,
                    expectedRent: formData.expectedRent,

// Location (can be expanded)
                    schoolDistrict: formData.schoolDistrict,
                    neighborhoodRating: formData.neighborhoodRating
                }
            };

if (selectedPropertyId) {
                // Update Existing
                setProperties(prev => prev.map(p => {
                    if (p.id === selectedPropertyId) {
                        return {
                            ...p,
                            canvassingStatus: formData.status,
                            ownerData: { ...p.ownerData, ...newOwnerData, details: { ...p.ownerData.details, ...newOwnerData.details } },
                            propertyData: {
                                ...p.propertyData,
                                ...newPropertyData,
                                details: { ...p.propertyData.details, ...newPropertyData.details } // Merge to keep existing data not in form if any
                            }
                        };
                    }
                    return p;
                }));
            } else if (newPropertyLocation) {
                // Create New
                const newId = `prop-${Date.now()}`;
                const newProp = {
                    id: newId,
                    polygon: [], // We don't have a polygon drawing tool yet, implies point-based or empty
                    canvassingStatus: formData.status,
                    ownerData: newOwnerData,
                    propertyData: {
                        ...newPropertyData,
                        propertyAddress: newPropertyLocation.address,
                    }
                };

// In a real app we'd need to store the LatLng for this new valid prop separately if it has no polygon
                // For now, we just add it to the list. 
                // NOTE: Since MapsView maps *Polygons*, this new item won't appear on map unless we add a Marker layer or mock a polygon around the point.
                // For MVP, we will mock a tiny square polygon around the point so it renders.

const lat = newPropertyLocation.lat;
                const lng = newPropertyLocation.lng;
                const size = 0.0001; // Tiny box
                newProp.polygon = [
                    [lat + size, lng - size],
                    [lat + size, lng + size],
                    [lat - size, lng + size],
                    [lat - size, lng - size]
                ];

setProperties(prev => [...prev, newProp]);
                setSelectedPropertyId(newId); // Select the new item
                setNewPropertyLocation(null); // Clear creation mode
            }
            toast.success("Property data saved successfully");
        } catch (error) {
            logger.error("Error saving property data", error);
            toast.error("Failed to save changes", { description: "Please try again." });
        }
    };

if (isLoading) return <Loader fullScreen text="Loading Territory Map..." />;

return (
        <div className="w-full h-full relative bg-zinc-50 dark:bg-black overflow-hidden transition-colors duration-300" style={{ height: "calc(100vh - 0px)" }}>
            <MapView
                data={properties}
                onSelect={handlePropertySelect}
                onMapCreate={handleMapCreate}
            />

<Drawer
                isOpen={!!selectedPropertyId || !!newPropertyLocation}
                onClose={() => { setSelectedPropertyId(null); setNewPropertyLocation(null); }}
                data={selectedProperty}
                newLocation={newPropertyLocation}
                onSave={handleSave}
                loadingAddr={loadingAddr}
            />
        </div>
    );
}

export default Maps;