
import React, { useState, useEffect, useRef } from 'react';
import { X, Home, DollarSign, User, Edit2, Save, Info, AlertCircle, ShieldCheck, Loader2, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
import { SpotlightCard } from '../SpotlightCard';

const StatusBadge = ({ status }) => {
    const colors = {
        "Neutral": "bg-violet-400",
        "Hot Lead": "bg-red-500",
        "Renovated": "bg-blue-500",
        "Customer": "bg-emerald-500",
        "Not Interested": "bg-white border border-zinc-200 text-zinc-900 shadow-sm"
    };
    return (
        <span className={`px-2 py-1 rounded text-[10px] uppercase font-bold text-white shadow-sm ${colors[status] || "bg-zinc-400"}`}>
            {status}
        </span>
    );
};

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>
);

const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, loadingAddr, allowUpload = true }) => {
    const [isEditing, setIsEditing] = useState(false);
    const [activeTab, setActiveTab] = useState('details');
    // Initialize photos from data or use empty array
    const [photos, setPhotos] = useState([]);

    // Lightbox State
    const [lightboxIndex, setLightboxIndex] = useState(null); // null = closed, number = open at index
    const [touchStart, setTouchStart] = useState(null);
    const [touchEnd, setTouchEnd] = useState(null);

    const panelRef = useRef(null);
    const closeButtonRef = useRef(null);
    const lightboxRef = useRef(null);

    // Initial State Matching Schema
    const initialFormState = {
        // Status
        status: 'Neutral',
        // 1.1 Basic Property Details
        propertyType: 'House',
        builtUpArea: '',
        lotSize: '',
        yearBuilt: '',
        bedrooms: '',
        bathrooms: '',
        parkingSpaces: '',
        // 1.2 Transaction & Market
        purchaseDate: '',
        purchasePrice: '',
        marketValue: 0,
        taxValue: '',
        // 1.3 Renovation
        roofCondition: 'Good',
        lastRenovationDate: '',
        // 1.4 Rental Status
        isRented: 'No', // Yes/No
        tenantName: '',
        currentRent: '',
        leaseEnd: '',
        ownerWillingToRent: 'Yes',
        expectedRent: '',
        // 1.5 Location
        schoolDistrict: '',
        neighborhoodRating: 5,
        // 2.1 Owner Details
        ownerName: '',
        ownerPhone: '',
        ownerEmail: '',
        ownerAddress: '',
        occupation: '',
        ownershipType: 'Individual',
        // 2.4 Owner Intent
        willingToSell: 'No',
        desiredPrice: '',
        minPrice: '',
        // 3.0 Insurance Information
        insurance_company: '',
        insurance_company_not_listed: false,
        damage_location: '',
        date_of_loss: '',
        claim_filed: 'No',
        claim_number: '',
        has_paperwork: 'No',
        adjuster_name: '',
        adjuster_phone: '',
        adjuster_ext: '',
        adjuster_type: '',
        adjuster_fax: '',
        adjuster_email: '',
        met_with_adjuster: 'No',
        claim_approved: 'No',
        // Notes
        notes: ''
    };

    const [formData, setFormData] = useState(initialFormState);

    // Reset or Initialize Form
    useEffect(() => {
        if (data) {
            setFormData({
                ...initialFormState,
                status: data.canvassingStatus || 'Neutral',
                ownerName: data.ownerData?.fullName || '',
                ownerPhone: data.ownerData?.primaryPhoneNumber || '',
                ownerEmail: data.ownerData?.emailAddress || '',
                marketValue: data.propertyData?.currentEstimatedMarketValue || 0,
                notes: data.propertyData?.notes || '',
                propertyType: data.propertyData?.propertyType || 'House',
                builtUpArea: data.propertyData?.totalBuiltUpArea || '',
                lotSize: data.propertyData?.lotPlotSize || '',
                yearBuilt: data.propertyData?.yearBuilt || '',
                bedrooms: data.propertyData?.numberOfBedrooms || '',
                bathrooms: data.propertyData?.numberOfBathrooms || '',
                parkingSpaces: data.propertyData?.numberOfParkingSpaces || '',
                taxValue: data.propertyData?.propertyTaxAssessmentValue || '',
                roofCondition: data.propertyData?.roofCondition || 'Good',
                lastRenovationDate: data.propertyData?.lastMajorRenovationDate || '',
                isRented: data.propertyData?.currentlyRented ? 'Yes' : 'No',
                tenantName: data.propertyData?.currentTenantName || '',
                currentRent: data.propertyData?.currentMonthlyRentAmount || '',
                leaseEnd: data.propertyData?.leaseEndDate || '',
                ownerWillingToRent: data.propertyData?.ownerWillingToRent ? 'Yes' : 'No',
                expectedRent: data.propertyData?.expectedMonthlyRentAmount || '',
                schoolDistrict: data.propertyData?.schoolDistrict || '',
                neighborhoodRating: data.propertyData?.neighborhoodRating || 5,
                occupation: data.ownerData?.occupation || '',
                ownershipType: data.ownerData?.ownershipType || 'Individual',
                willingToSell: data.ownerData?.willingToSellProperty ? 'Yes' : 'No',
                desiredPrice: data.ownerData?.desiredSellingPrice || '',
                minPrice: data.ownerData?.minimumAcceptableSellingPrice || '',
                ownerAddress: data.ownerData?.mailingAddress || '',
                insurance_company: data.insuranceData?.insurance_company || '',
                insurance_company_not_listed: data.insuranceData?.insurance_company_not_listed || false,
                damage_location: data.insuranceData?.damage_location || '',
                date_of_loss: data.insuranceData?.date_of_loss || '',
                claim_filed: data.insuranceData?.claim_filed ? 'Yes' : 'No',
                claim_number: data.insuranceData?.claim_number || '',
                has_paperwork: data.insuranceData?.has_paperwork ? 'Yes' : 'No',
                adjuster_name: data.insuranceData?.adjuster_name || '',
                adjuster_phone: data.insuranceData?.adjuster_phone || '',
                adjuster_ext: data.insuranceData?.adjuster_ext || '',
                adjuster_type: data.insuranceData?.adjuster_type || '',
                adjuster_fax: data.insuranceData?.adjuster_fax || '',
                adjuster_email: data.insuranceData?.adjuster_email || '',
                met_with_adjuster: data.insuranceData?.met_with_adjuster ? 'Yes' : 'No',
                claim_approved: data.insuranceData?.claim_approved ? 'Yes' : 'No',
            });
            setIsEditing(false);
            setPhotos(data.photos || []);
        } else if (newLocation) {
            setFormData(initialFormState);
            setIsEditing(true);
            setPhotos([]);
        }
        setActiveTab('details');
    }, [data, newLocation]);

    // Accessibility: Focus and key listeners for Drawer
    useEffect(() => {
        if (isOpen && closeButtonRef.current) {
            closeButtonRef.current.focus();
        }

        const handleKeyDown = (e) => {
            if (e.key === 'Escape') {
                // If Lightbox is open, close it first
                if (lightboxIndex !== null) {
                    setLightboxIndex(null);
                    return;
                }
                onClose();
            }
        };

        if (isOpen) {
            document.addEventListener('keydown', handleKeyDown);
        }
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [isOpen, onClose, lightboxIndex]);

    // Lightbox Keyboard Navigation
    useEffect(() => {
        if (lightboxIndex === null) return;

        const handleLightboxKeys = (e) => {
            if (e.key === 'ArrowRight') {
                setLightboxIndex((prev) => (prev + 1) % photos.length);
            } else if (e.key === 'ArrowLeft') {
                setLightboxIndex((prev) => (prev - 1 + photos.length) % photos.length);
            }
        };

        document.addEventListener('keydown', handleLightboxKeys);
        return () => document.removeEventListener('keydown', handleLightboxKeys);
    }, [lightboxIndex, photos.length]);

    const handleSave = () => {
        onSave(formData);
        if (data) setIsEditing(false);
    };

    // Swipe Logic for Lightbox
    const handleTouchStart = (e) => {
        setTouchEnd(null);
        setTouchStart(e.targetTouches[0].clientX);
    };

    const handleTouchMove = (e) => {
        setTouchEnd(e.targetTouches[0].clientX);
    };

    const handleTouchEnd = () => {
        if (!touchStart || !touchEnd) return;
        const distance = touchStart - touchEnd;
        const isLeftSwipe = distance > 50;
        const isRightSwipe = distance < -50;

        if (isLeftSwipe) {
            setLightboxIndex((prev) => (prev + 1) % photos.length);
        } else if (isRightSwipe) {
            setLightboxIndex((prev) => (prev - 1 + photos.length) % photos.length);
        }
    };

    // Photo Logic
    const handleUploadPhoto = (e) => {
        const file = e.target.files[0];
        if (file) {
            const newPhoto = {
                id: Date.now(),
                url: URL.createObjectURL(file), // Mock URL
                caption: file.name
            };
            setPhotos([...photos, newPhoto]);
            // Ideally notify parent to save photos
        }
    };

    const handleDeletePhoto = (id) => {
        setPhotos(photos.filter(p => p.id !== id));
    };

    if (!isOpen) return null;

    const isCreating = !data && !!newLocation;
    const address = data?.propertyData?.propertyAddress || newLocation?.address || "Unknown Location";

    // Helper for Inputs
    const RenderInput = ({ label, field, type = "text", placeholder, options, locked = false }) => {
        if (!isEditing) {
            return (
                <InputGroup label={label}>
                    <span className="text-sm font-medium text-zinc-900 dark:text-zinc-200">
                        {formData[field] || "-"}
                    </span>
                </InputGroup>
            );
        }

        if (locked) {
            return (
                <InputGroup label={label}>
                    <div className="w-full bg-zinc-100 dark:bg-zinc-800/50 border border-zinc-200 dark:border-white/5 rounded-lg py-2 px-3 text-sm text-zinc-400 cursor-not-allowed italic">
                        {placeholder || "Not Applicable"}
                    </div>
                </InputGroup>
            );
        }

        return (
            <InputGroup label={label}>
                {options ? (
                    <select
                        value={formData[field]}
                        onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
                        className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg py-2 px-2 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 appearance-none"
                    >
                        {options.map(opt => (
                            <option key={opt} value={opt} className="bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white">
                                {opt}
                            </option>
                        ))}
                    </select>
                ) : (
                    <input
                        type={type}
                        value={formData[field]}
                        onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
                        placeholder={placeholder}
                        className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg py-2 px-3 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder-zinc-400"
                    />
                )}
            </InputGroup>
        );
    };

    return (
        <div
            className={`fixed z-[1000] flex flex-col transition-transform duration-300 ease-out inset-0 md:inset-auto md:top-4 md:right-4 md:bottom-4 md:w-[500px] ${isOpen ? 'translate-x-0' : 'translate-x-full md:translate-x-[calc(100%+2rem)]'}`}
            role="dialog"
            aria-modal="true"
            aria-label="Property Details"
        >
            <SpotlightCard rounded="rounded-none" className="h-full flex flex-col overflow-hidden bg-white/95 dark:bg-zinc-900/95 backdrop-blur-3xl border-l border-white/20 shadow-2xl">

                {/* Header */}
                <div className="relative h-32 bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900 dark:to-black p-6 flex flex-col justify-end shrink-0 border-b border-zinc-200 dark:border-white/5">
                    <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-[0.03] dark:opacity-10 pointer-events-none mix-blend-overlay"></div>

                    <button
                        ref={closeButtonRef}
                        onClick={onClose}
                        className="absolute top-4 right-4 p-2 bg-white/50 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 rounded-full transition-all backdrop-blur-md text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500 z-50 cursor-pointer shadow-sm border border-black/5 dark:border-white/5"
                        aria-label="Close property details"
                    >
                        <X size={18} />
                    </button>

                    <div className="relative z-10">
                        <div className="flex items-center space-x-2 mb-1">
                            {isCreating ? <span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-blue-500 text-white">New Entry</span> : <StatusBadge status={isEditing ? formData.status : data.canvassingStatus} />}
                        </div>
                        <h2 className="text-xl font-black text-zinc-900 dark:text-white truncate">{loadingAddr ? "Fetching Address..." : address.split(',')[0]}</h2>
                        <span className="text-xs text-zinc-500 truncate block">{loadingAddr ? "Locating..." : address}</span>
                    </div>
                </div>

                {/* Tabs */}
                {!loadingAddr && (
                    <div className="flex border-b border-zinc-200 dark:border-white/5 bg-zinc-50/50 dark:bg-black/20" role="tablist">
                        <button
                            className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors border-b-2 ${activeTab === 'details' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
                            onClick={() => setActiveTab('details')}
                            role="tab"
                            aria-selected={activeTab === 'details'}
                            aria-controls="prop-details"
                        >
                            Property Details
                        </button>
                        <button
                            className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors border-b-2 ${activeTab === 'photos' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
                            onClick={() => setActiveTab('photos')}
                            role="tab"
                            aria-selected={activeTab === 'photos'}
                            aria-controls="prop-photos"
                        >
                            Photos ({photos.length})
                        </button>
                    </div>
                )}

                {/* Body Content */}
                <div className="flex-1 overflow-y-auto p-6 space-y-8 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']">

                    {loadingAddr ? (
                        <div className="flex flex-col items-center justify-center h-40 space-y-3 text-zinc-500">
                            <Loader2 className="animate-spin" size={24} />
                            <span className="text-xs font-bold uppercase">Resolving Location...</span>
                        </div>
                    ) : (
                        <>
                            {/* DETAILS TAB */}
                            {activeTab === 'details' && (
                                <div role="tabpanel" id="prop-details" className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-200">
                                    {/* Status Selector */}
                                    {isEditing && (
                                        <div className="space-y-2">
                                            <label className="text-[10px] uppercase font-bold text-zinc-500 tracking-widest ml-1">Canvassing Status</label>
                                            <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                                                {["Neutral", "Hot Lead", "Renovated", "Customer", "Not Interested"].map(s => (
                                                    <button key={s} onClick={() => setFormData({ ...formData, status: s })} className={`px-1 py-2 rounded text-[10px] font-bold border transition-all ${formData.status === s ? 'bg-zinc-900 dark:bg-white text-white dark:text-black' : 'bg-transparent border-zinc-200 dark:border-white/10 text-zinc-500'}`}>{s}</button>
                                                ))}
                                            </div>
                                        </div>
                                    )}

                                    {/* SECTION 1: BASIC PROPERTY INFO */}
                                    <div className="space-y-4">
                                        <div className="flex items-center gap-2 pb-2 border-b border-zinc-200 dark:border-white/5 text-blue-600 dark:text-blue-400">
                                            <Home size={16} /> <h3 className="text-xs font-black uppercase tracking-widest">Property Basics</h3>
                                        </div>
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <RenderInput label="Property Type" field="propertyType" options={["House", "Apartment", "Condo", "Commercial", "Land"]} />
                                            <RenderInput label="Built-Up Area (sqft)" field="builtUpArea" type="number" />
                                            <RenderInput label="Lot Size (sqft)" field="lotSize" type="number" />
                                            <RenderInput label="Year Built" field="yearBuilt" type="number" />
                                            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 col-span-1 md:col-span-2">
                                                <RenderInput label="Beds" field="bedrooms" type="number" />
                                                <RenderInput label="Baths" field="bathrooms" type="number" />
                                                <RenderInput label="Parking" field="parkingSpaces" type="number" />
                                            </div>
                                        </div>
                                    </div>

                                    {/* SECTION 2: VALUES & CONDITION */}
                                    <div className="space-y-4">
                                        <div className="flex items-center gap-2 pb-2 border-b border-zinc-200 dark:border-white/5 text-emerald-600 dark:text-emerald-400">
                                            <DollarSign size={16} /> <h3 className="text-xs font-black uppercase tracking-widest">Value & Condition</h3>
                                        </div>
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <RenderInput label="Est. Market Value ($)" field="marketValue" type="number" />
                                            <RenderInput label="Tax Assessed Value ($)" field="taxValue" type="number" />
                                            <RenderInput label="Roof Condition" field="roofCondition" options={["Excellent", "Good", "Fair", "Needs Repair", "Critical"]} />
                                            <RenderInput label="Last Reno Date" field="lastRenovationDate" type="date" />
                                        </div>
                                    </div>

                                    {/* SECTION 3: RENTAL STATUS (Conditional) */}
                                    <div className="space-y-4">
                                        <div className="flex items-center gap-2 pb-2 border-b border-zinc-200 dark:border-white/5 text-purple-600 dark:text-purple-400">
                                            <div className="p-1 bg-purple-100 dark:bg-purple-900/30 rounded"><User size={12} /></div>
                                            <h3 className="text-xs font-black uppercase tracking-widest">Rental Status</h3>
                                        </div>

                                        <RenderInput label="Currently Rented?" field="isRented" options={["Yes", "No"]} />

                                        {formData.isRented === 'Yes' ? (
                                            <div className="p-4 bg-purple-50 dark:bg-purple-900/10 rounded-xl space-y-4 border border-purple-100 dark:border-purple-500/20">
                                                <h4 className="text-[10px] uppercase font-bold text-purple-600 dark:text-purple-400 border-b border-purple-200 dark:border-purple-500/20 pb-1 mb-2">Tenant Profile</h4>
                                                <RenderInput label="Full Name *" field="tenantName" placeholder="Required" />
                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                    <RenderInput label="Phone *" field="tenantPhone" placeholder="Required" />
                                                    <RenderInput label="Email" field="tenantEmail" />
                                                </div>
                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                    <RenderInput label="Occupation" field="tenantOccupation" />
                                                    <RenderInput label="Employer" field="tenantEmployer" />
                                                </div>
                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                    <RenderInput label="Annual Income" field="tenantIncome" />
                                                    <RenderInput label="Family Status" field="livingStatus" options={["Single", "Family", "Couple", "Roommates"]} />
                                                </div>

                                                <h4 className="text-[10px] uppercase font-bold text-purple-600 dark:text-purple-400 border-b border-purple-200 dark:border-purple-500/20 pb-1 mb-2 mt-4">Lease Details</h4>
                                                <RenderInput label="Lease Type" field="leaseType" options={["Residential Standard", "Commercial NNN", "Short Term", "Month-to-Month"]} />
                                                <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                                                    <RenderInput label="Signed" field="leaseSigned" type="date" />
                                                    <RenderInput label="Start" field="leaseStart" type="date" />
                                                    <RenderInput label="End" field="leaseEnd" type="date" />
                                                </div>
                                                <RenderInput label="Monthly Rent ($)" field="currentRent" type="number" />
                                            </div>
                                        ) : (
                                            <div className="p-4 bg-zinc-50 dark:bg-white/5 rounded-xl space-y-4">
                                                <RenderInput label="Owner Willing to Rent?" field="ownerWillingToRent" options={["Yes", "No", "Maybe"]} />
                                                {formData.ownerWillingToRent !== 'No' && (
                                                    <RenderInput label="Expected Rent ($)" field="expectedRent" type="number" />
                                                )}
                                            </div>
                                        )}
                                    </div>

                                    {/* SECTION 4: INSURANCE INFORMATION */}
                                    <div className="space-y-4">
                                        <div className="flex items-center gap-2 pb-2 border-b border-zinc-200 dark:border-white/5 text-blue-600 dark:text-blue-400">
                                            <ShieldCheck size={16} /> <h3 className="text-xs font-black uppercase tracking-widest">Insurance Information</h3>
                                        </div>

                                        <div className="space-y-4">
                                            <RenderInput label="Insurance Company" field="insurance_company" options={["State Farm", "Allstate", "Liberty Mutual", "Farmers", "Nationwide", "USAA", "Chubb", "Travelers", "Progressive", "American Family", "Other"]} />

                                            <div className="flex items-center space-x-2">
                                                <input
                                                    type="checkbox"
                                                    checked={formData.insurance_company_not_listed}
                                                    onChange={(e) => isEditing && setFormData({ ...formData, insurance_company_not_listed: e.target.checked })}
                                                    disabled={!isEditing}
                                                    className="rounded border-zinc-300 dark:border-white/10"
                                                />
                                                <span className="text-xs text-zinc-500">Company Not Listed</span>
                                            </div>

                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                <RenderInput label="Claim Filed?" field="claim_filed" options={["Yes", "No"]} />
                                                <RenderInput label="Date of Loss" field="date_of_loss" type="date" />
                                            </div>

                                            {formData.claim_filed === 'Yes' && (
                                                <div className="p-4 bg-blue-50 dark:bg-blue-900/10 rounded-xl space-y-4 border border-blue-100 dark:border-blue-500/20">
                                                    <RenderInput label="Damage Location" field="damage_location" />
                                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                        <RenderInput label="Claim Number" field="claim_number" />
                                                        <RenderInput label="Has Paperwork?" field="has_paperwork" options={["Yes", "No"]} />
                                                    </div>

                                                    <h4 className="text-[10px] uppercase font-bold text-blue-600 dark:text-blue-400 border-b border-blue-200 dark:border-blue-500/20 pb-1 mb-2 mt-2">Adjuster Details</h4>
                                                    <RenderInput label="Adjuster Name" field="adjuster_name" />
                                                    <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                                                        <RenderInput label="Phone" field="adjuster_phone" />
                                                        <RenderInput label="Ext" field="adjuster_ext" />
                                                        <RenderInput label="Fax" field="adjuster_fax" />
                                                    </div>
                                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                        <RenderInput label="Email" field="adjuster_email" />
                                                        <RenderInput label="Type" field="adjuster_type" options={["Staff Adjuster", "Independent Adjuster", "Public Adjuster"]} />
                                                    </div>
                                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                        <RenderInput label="Met Adjuster?" field="met_with_adjuster" options={["Yes", "No"]} />
                                                        <RenderInput label="Claim Approved?" field="claim_approved" options={["Yes", "No"]} />
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    </div>

                                    {/* SECTION 5: OWNER INTENT (Conditional) */}
                                    <div className="space-y-4">
                                        <div className="flex items-center gap-2 pb-2 border-b border-zinc-200 dark:border-white/5 text-amber-600 dark:text-amber-400">
                                            <AlertCircle size={16} /> <h3 className="text-xs font-black uppercase tracking-widest">Recall & Sales Intent</h3>
                                        </div>

                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <RenderInput label="Willing to Sell?" field="willingToSell" options={["Yes", "No", "Undecided"]} />
                                            <RenderInput label="Ownership Type" field="ownershipType" options={["Individual", "Joint", "Corporate", "Trust"]} />
                                        </div>

                                        {formData.willingToSell === 'Yes' ? (
                                            <div className="p-4 bg-amber-50 dark:bg-amber-900/10 rounded-xl space-y-4 border border-amber-100 dark:border-amber-500/20">
                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                    <RenderInput label="Desired Price" field="desiredPrice" type="number" />
                                                    <RenderInput label="Min Price" field="minPrice" type="number" />
                                                </div>
                                            </div>
                                        ) : (
                                            <RenderInput label="Desired Price" field="desiredPrice" locked={true} placeholder="Owner not selling" />
                                        )}
                                    </div>

                                    {/* SECTION 5: OWNER CONTACT */}
                                    <div className="space-y-4">
                                        <div className="flex items-center gap-2 pb-2 border-b border-zinc-200 dark:border-white/5 text-zinc-500">
                                            <User size={16} /> <h3 className="text-xs font-black uppercase tracking-widest">Owner Contact</h3>
                                        </div>
                                        <RenderInput label="Full Name" field="ownerName" />
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <RenderInput label="Phone" field="ownerPhone" />
                                            <RenderInput label="Email" field="ownerEmail" />
                                        </div>
                                        <RenderInput label="Occupation" field="occupation" />
                                    </div>

                                    {/* SECTION 6: NOTES */}
                                    <div className="space-y-4">
                                        <div className="flex items-center gap-2 pb-2 border-b border-zinc-200 dark:border-white/5 text-zinc-500">
                                            <Edit2 size={16} /> <h3 className="text-xs font-black uppercase tracking-widest">Field Notes</h3>
                                        </div>
                                        {isEditing ? (
                                            <textarea
                                                className="w-full h-32 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl p-3 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 resize-none"
                                                value={formData.notes}
                                                placeholder="Add notes..."
                                                onChange={e => 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>
                            )}

                            {/* PHOTOS TAB */}
                            {activeTab === 'photos' && (
                                <div role="tabpanel" id="prop-photos" className="space-y-4 animate-in fade-in slide-in-from-right-4 duration-200 h-full flex flex-col">
                                    <div className="grid grid-cols-2 gap-3 pb-4">
                                        {photos.map((photo, index) => (
                                            <div key={photo.id} className="relative aspect-square rounded-lg overflow-hidden group border border-white/10 hover:border-blue-500/50 transition-colors cursor-pointer" onClick={() => setLightboxIndex(index)}>
                                                <img
                                                    src={photo.url}
                                                    alt={photo.caption || 'Property view'}
                                                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                                />
                                                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                                    <span className="text-white text-xs font-bold uppercase tracking-widest border border-white/50 px-2 py-1 rounded-full backdrop-blur-sm">View</span>
                                                </div>

                                                {allowUpload && (
                                                    <button
                                                        onClick={(e) => { e.stopPropagation(); handleDeletePhoto(photo.id); }}
                                                        className="absolute top-2 right-2 bg-red-500/80 hover:bg-red-600 text-white p-1.5 rounded-full backdrop-blur-sm transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-red-500 opacity-0 group-hover:opacity-100"
                                                        aria-label={`Delete photo ${photo.caption}`}
                                                    >
                                                        <Trash2 size={14} />
                                                    </button>
                                                )}


                                            </div>
                                        ))}

                                        {photos.length === 0 && (
                                            <div className="col-span-2 py-12 text-center border-2 border-dashed border-zinc-200 dark:border-white/10 rounded-lg bg-zinc-50 dark:bg-white/5">
                                                <div className="w-12 h-12 bg-zinc-100 dark:bg-white/10 rounded-full flex items-center justify-center mx-auto mb-3">
                                                    <Home size={24} className="text-zinc-400" />
                                                </div>
                                                <p className="text-zinc-400 text-xs mb-1">No photos added yet</p>
                                                <p className="text-zinc-500 text-[10px]">{allowUpload ? "Upload photos to document property condition" : "No imagery available for this property"}</p>
                                            </div>
                                        )}
                                    </div>

                                    {allowUpload && (
                                        <div className="mt-auto pt-4 sticky bottom-0 bg-white/95 dark:bg-zinc-900/95 backdrop-blur border-t border-zinc-200 dark:border-white/10 pb-1">
                                            <label className="flex items-center justify-center w-full gap-2 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white font-bold py-3 rounded-lg transition-colors cursor-pointer border border-zinc-200 dark:border-white/10 hover:border-blue-500/50 focus-within:ring-2 focus-within:ring-blue-500">
                                                <span className="text-xl">+</span>
                                                <span className="text-xs uppercase tracking-widest">Upload Photo</span>
                                                <input
                                                    type="file"
                                                    accept="image/*"
                                                    className="hidden"
                                                    onChange={handleUploadPhoto}
                                                    aria-label="Upload a photo"
                                                />
                                            </label>
                                        </div>
                                    )}
                                </div>
                            )}
                        </>
                    )}
                </div>

                {/* Footer (Property Details Editing) */}
                {activeTab === 'details' && !loadingAddr && (
                    <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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                <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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                <Edit2 size={18} /> <span>Edit Details</span>
                            </button>
                        )}
                    </div>
                )}
            </SpotlightCard>

            {/* LIGHTBOX OVERLAY */}
            {lightboxIndex !== null && photos[lightboxIndex] && (
                <div
                    className="fixed inset-0 z-[2000] bg-black/95 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200 focus:outline-none touch-none"
                    tabIndex={-1}
                    ref={lightboxRef}
                    role="dialog"
                    aria-label="Photo Lightbox"
                    onTouchStart={handleTouchStart}
                    onTouchMove={handleTouchMove}
                    onTouchEnd={handleTouchEnd}
                >
                    {/* Close Button */}
                    <button
                        onClick={() => setLightboxIndex(null)}
                        className="absolute top-4 right-4 text-white/70 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors z-50 focus:ring-2 focus:ring-white"
                        aria-label="Close photo view"
                    >
                        <X size={24} />
                    </button>

                    {/* Navigation Left */}
                    <button
                        onClick={(e) => { e.stopPropagation(); setLightboxIndex((prev) => (prev - 1 + photos.length) % photos.length); }}
                        className="absolute left-2 md:left-4 text-white/70 hover:text-white p-2 md:p-3 rounded-full hover:bg-white/10 transition-colors z-50 focus:ring-2 focus:ring-white"
                        aria-label="Previous photo"
                    >
                        <ChevronLeft size={28} className="md:w-8 md:h-8" />
                    </button>

                    {/* Main Image */}
                    <div className="relative max-w-5xl max-h-[85vh] w-full h-full flex flex-col items-center justify-center">
                        <img
                            src={photos[lightboxIndex].url}
                            alt={photos[lightboxIndex].caption || "Full screen view"}
                            className="max-w-full max-h-full object-contain rounded-lg shadow-2xl"
                        />

                        <div className="absolute bottom-[-40px] text-white/50 text-xs uppercase tracking-widest font-mono">
                            {lightboxIndex + 1} / {photos.length}
                        </div>
                    </div>

                    {/* Navigation Right */}
                    <button
                        onClick={(e) => { e.stopPropagation(); setLightboxIndex((prev) => (prev + 1) % photos.length); }}
                        className="absolute right-2 md:right-4 text-white/70 hover:text-white p-2 md:p-3 rounded-full hover:bg-white/10 transition-colors z-50 focus:ring-2 focus:ring-white"
                        aria-label="Next photo"
                    >
                        <ChevronRight size={28} className="md:w-8 md:h-8" />
                    </button>

                </div>
            )}
        </div>
    );
};

export default PropertyDetailDrawer;
