import { useRef, ChangeEvent } from "react";
import Image from "next/image";
import { Camera, X, WarningCircle } from "@phosphor-icons/react/dist/ssr";
import { StepProps } from "./types";
import { titleStyle, subtitleStyle, figtree } from "./styles";

export const PropertyPhotos = ({ data, updateData }: StepProps) => {
    const fileInputRef = useRef<HTMLInputElement>(null);

    const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            const newPhotos = Array.from(e.target.files).map(file => URL.createObjectURL(file));
            const currentPhotos = data.photos || [];
            updateData('photos', [...currentPhotos, ...newPhotos]);
        }
    };

    const removePhoto = (index: number) => {
        const currentPhotos = data.photos || [];
        const updated = currentPhotos.filter((_, i) => i !== index);
        updateData('photos', updated);
    };

    const makeCover = (index: number) => {
        const currentPhotos = data.photos || [];
        if (index === 0 || index >= currentPhotos.length) return;

        const newPhotos = [...currentPhotos];
        const [selectedPhoto] = newPhotos.splice(index, 1);
        newPhotos.unshift(selectedPhoto);

        updateData('photos', newPhotos);
    };

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Add some photos of your house</h2>
            <p className={subtitleStyle}>You'll need 5 photos to get started. You can add more or make changes later.</p>

            <div className="flex flex-col gap-6">
                <div
                    onClick={() => fileInputRef.current?.click()}
                    className="border-2 border-dashed border-gray-300 rounded-lg p-12 flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-gray-50 transition-colors"
                >
                    <Camera size={48} className="text-gray-400" />
                    <span className={`${figtree.className} text-lg font-medium underline`}>Upload photos</span>
                    <span className="text-sm text-gray-500">JPG, PNG up to 10MB</span>
                    <input
                        type="file"
                        multiple
                        accept="image/*"
                        className="hidden"
                        ref={fileInputRef}
                        onChange={handleFileChange}
                    />
                </div>

                {data.photos && data.photos.length > 0 && (
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                        {data.photos.map((photo, index) => (
                            <div key={index} className="relative aspect-square border-2 border-black rounded-lg overflow-hidden group">
                                <Image src={photo} alt={`Property ${index + 1}`} fill className="object-cover" />
                                <button
                                    onClick={() => removePhoto(index)}
                                    className="absolute top-2 right-2 bg-white rounded-full p-1 border-2 border-black hover:bg-red-50 transition-colors z-10"
                                >
                                    <X size={16} />
                                </button>
                                {index === 0 && (
                                    <div className="absolute bottom-2 left-2 bg-black text-white text-xs px-2 py-1 rounded z-10">Cover Photo</div>
                                )}
                                {index !== 0 && (
                                    <button
                                        onClick={() => makeCover(index)}
                                        className="absolute bottom-2 left-2 bg-white/90 text-black text-xs font-bold px-2 py-1 rounded border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity z-10 hover:bg-[#E7FE78]"
                                    >
                                        Make Cover
                                    </button>
                                )}
                            </div>
                        ))}
                    </div>
                )}

                {(!data.photos || data.photos.length < 5) && (
                    <div className="flex items-center gap-2 text-orange-600 bg-orange-50 p-4 rounded-lg border border-orange-200">
                        <WarningCircle size={24} />
                        <span className="font-medium">Please upload at least {5 - (data.photos?.length || 0)} more photos</span>
                    </div>
                )}
            </div>
        </div>
    )
}
