"use client";

import Link from "next/link";
import Image from "next/image";
import { Property } from "@/data/properties";
import { useCompare } from "@/context/CompareContext";
import { useState, useEffect } from "react";

interface PropertyCardProps {
    property: Property;
}

export default function PropertyCard({ property }: PropertyCardProps) {
    const { addToCompare, removeFromCompare, isInCompare } = useCompare();
    const inCompare = isInCompare(property.id);
    const [isWishlisted, setIsWishlisted] = useState(false);

    // Load wishlist from localStorage
    useEffect(() => {
        const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
        setIsWishlisted(wishlist.includes(property.id));
    }, [property.id]);

    const handleCompareClick = (e: React.MouseEvent) => {
        e.preventDefault();
        if (inCompare) {
            removeFromCompare(property.id);
        } else {
            addToCompare(property);
        }
    };

    const handleShareClick = (e: React.MouseEvent) => {
        e.preventDefault();
        const url = `${window.location.origin}/properties/${property.id}`;

        if (navigator.share) {
            navigator.share({
                title: property.title,
                text: `Check out ${property.title} in ${property.location}`,
                url: url,
            }).catch(() => {
                // Fallback to clipboard
                navigator.clipboard.writeText(url);
                alert("Link copied to clipboard!");
            });
        } else {
            // Fallback to clipboard
            navigator.clipboard.writeText(url);
            alert("Link copied to clipboard!");
        }
    };

    const handleWishlistClick = (e: React.MouseEvent) => {
        e.preventDefault();
        const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");

        if (isWishlisted) {
            // Remove from wishlist
            const updated = wishlist.filter((id: number) => id !== property.id);
            localStorage.setItem("wishlist", JSON.stringify(updated));
            setIsWishlisted(false);
        } else {
            // Add to wishlist
            const updated = [...wishlist, property.id];
            localStorage.setItem("wishlist", JSON.stringify(updated));
            setIsWishlisted(true);
        }
    };

    return (
        <Link
            href={`/residential-real-estate/${property.slug}`}
            className="group block bg-white dark:bg-gray-900 rounded-2xl overflow-hidden border border-gray-100 dark:border-gray-800 hover:border-gray-200 dark:hover:border-gray-700 shadow-sm hover:shadow-xl transition-all duration-300"
        >
            <div className="relative h-64 w-full overflow-hidden">
                <Image
                    src={property.image}
                    alt={property.title}
                    fill
                    className="object-cover group-hover:scale-110 transition-transform duration-500"
                />

                {/* Status Badge */}
                {property.status && (
                    <div className={`absolute top-4 left-4 px-3 py-1 rounded-full text-xs font-semibold ${property.status === "Sold Out"
                        ? "bg-red-500 text-white"
                        : property.status === "New Launch"
                            ? "bg-green-500 text-white"
                            : "bg-white/90 text-gray-900"
                        }`}>
                        {property.status}
                    </div>
                )}

                {/* Action Buttons */}
                <div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button
                        onClick={handleCompareClick}
                        className={`p-2 rounded-full shadow-lg transition-all ${inCompare
                            ? "bg-primary text-white scale-110"
                            : "bg-white hover:bg-gray-100 text-gray-700"
                            }`}
                        aria-label={inCompare ? "Remove from compare" : "Add to compare"}
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="w-5 h-5"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            strokeWidth="2"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                d="M8 7h8v10H8zM4 11h8v10H4z"
                            />
                        </svg>

                    </button>
                    <button
                        onClick={handleShareClick}
                        className="p-2 bg-white rounded-full shadow-lg hover:bg-gray-100 transition-colors"
                        aria-label="Share"
                    >
                        <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                        </svg>
                    </button>
                    <button
                        onClick={handleWishlistClick}
                        className={`p-2 rounded-full shadow-lg transition-all ${isWishlisted
                            ? "bg-red-500 text-white scale-110"
                            : "bg-white hover:bg-gray-100 text-gray-700"
                            }`}
                        aria-label={isWishlisted ? "Remove from wishlist" : "Add to wishlist"}
                    >
                        <svg className="w-5 h-5" fill={isWishlisted ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                    </button>
                </div>
            </div>

            {/* Content Section */}
            <div className="p-6">
                <h3 className="text-xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">
                    {property.title}
                </h3>

                <div className="flex items-center text-gray-600 dark:text-gray-400 text-sm mb-4">
                    <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    {property.location}
                </div>

                <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-800">
                    <div>
                        <div className="text-2xl font-bold text-primary whitespace-nowrap">{property.price}</div>
                        <div className="text-sm text-gray-500 dark:text-gray-400">{property.overview.size}</div>
                    </div>
                    <div className="text-right">
                        <div className="text-sm font-semibold text-foreground">{property.overview.bhk}</div>
                        <div className="text-xs text-gray-500 dark:text-gray-400">Possession: {property.overview.possession}</div>
                    </div>
                </div>
            </div>
        </Link>
    );
}
