import Image from "next/image";
import { Camera, Star } from "@phosphor-icons/react/dist/ssr";
import { FormData } from "./types";
import { figtree } from "./styles";

export const LivePreview = ({ data }: { data: FormData }) => {
    // Helpers to derive display values
    const getCity = () => {
        if (!data.location) return "YOUR CITY";
        const parts = data.location.split(',');
        return parts[0].trim().toUpperCase();
    };

    const getTitle = () => {
        if (data.title) return data.title;
        const type = data.propertyType ? data.propertyType.charAt(0).toUpperCase() + data.propertyType.slice(1) : "Property";
        const place = data.placeType === 'entire' ? 'Entire place' : data.placeType === 'room' ? 'Private room' : 'Shared room';
        return `${type} · ${place}`;
    };

    const getPrice = () => {
        return data.price ? `₨${parseInt(data.price).toLocaleString()}` : "₨0";
    };

    return (
        <div className="w-full max-w-md mx-auto sticky top-24">
            <div className="bg-white border-2 border-black p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
                <div className="flex items-center justify-between mb-4">
                    <h3 className={`${figtree.className} text-xl font-bold`}>Preview</h3>
                    <div className="px-3 py-1 bg-black text-white text-xs font-bold uppercase tracking-wider rounded-full">
                        New
                    </div>
                </div>

                {/* Card Replica */}
                <div className="border-2 border-black overflow-hidden bg-white">
                    {/* Image Placeholder */}
                    <div className="relative aspect-[16/14] bg-gray-100 flex items-center justify-center border-b-2 border-black overflow-hidden">
                        {data.photos && data.photos.length > 0 ? (
                            <Image src={data.photos[0]} alt="Preview" fill className="object-cover" />
                        ) : (
                            <div className="flex flex-col items-center gap-2 text-gray-400">
                                <Camera size={48} />
                                <span className={`${figtree.className} font-medium`}>Cover Photo</span>
                            </div>
                        )}
                    </div>

                    {/* Details */}
                    <div className="p-4 space-y-2">
                        <div className="flex items-center justify-between">
                            <p className={`${figtree.className} text-xs font-bold text-gray-700 tracking-wider uppercase`}>
                                {getCity()}
                            </p>
                            <div className="flex items-center gap-1">
                                <Star size={16} weight="fill" />
                                <span className={`${figtree.className} text-sm font-medium`}>New</span>
                            </div>
                        </div>

                        <h3 className={`${figtree.className} text-base font-normal text-gray-900 line-clamp-1`}>
                            {getTitle()}
                        </h3>

                        <p className={`${figtree.className} text-base`}>
                            <span className="font-bold">{getPrice()}</span>
                            <span className="text-gray-600"> night</span>
                        </p>
                    </div>
                </div>

                {/* Live Updates Summary */}
                <div className="mt-6 space-y-3 border-t-2 border-gray-100 pt-4">
                    <div className="flex justify-between text-sm">
                        <span className="text-gray-500">Guests</span>
                        <span className="font-medium">{data.guests || 0}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                        <span className="text-gray-500">Amenities</span>
                        <span className="font-medium">{data.amenities?.length || 0} selected</span>
                    </div>
                </div>
            </div>
        </div>
    );
};
