"use client";

import { useCompare } from "@/context/CompareContext";
import Image from "next/image";
import Link from "next/link";

export default function CompareBar() {
    const { compareList, removeFromCompare, clearCompare } = useCompare();

    if (compareList.length === 0) return null;

    return (
        <div className="fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-gray-900 border-t-2 border-primary shadow-2xl">
            <div className="max-w-7xl mx-auto px-6 py-4">
                <div className="flex items-center justify-between gap-4">
                    <div className="flex items-center gap-4 flex-1 overflow-x-auto hide-scrollbar">
                        <div className="flex items-center gap-2 flex-shrink-0">
                            <svg
                                className="w-7 h-7 text-primary"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    strokeWidth="2"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    d="M4 7h11m0 0l-4-4m4 4l-4 4M20 17H9m0 0l4-4m-4 4l4 4"
                                />
                            </svg>

                            <span className="font-semibold text-foreground">Compare Properties ({compareList.length}/4)</span>
                        </div>

                        <div className="flex gap-3 pt-3 pr-3">
                            {compareList.map((property) => (
                                <div key={property.id} className="relative group flex-shrink-0">
                                    <div className="w-20 h-20 rounded-lg overflow-hidden border-2 border-gray-200 dark:border-gray-700">
                                        <Image
                                            src={property.image}
                                            alt={property.title}
                                            width={80}
                                            height={80}
                                            className="object-cover w-full h-full"
                                        />
                                    </div>
                                    <button
                                        onClick={() => removeFromCompare(property.id)}
                                        className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-md"
                                        aria-label="Remove from comparison"
                                    >
                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                    <div className="absolute bottom-0 left-0 right-0 bg-black/70 text-white text-xs p-1 text-center truncate opacity-0 group-hover:opacity-100 transition-opacity">
                                        {property.title}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    <div className="flex items-center gap-3 flex-shrink-0">
                        <button
                            onClick={clearCompare}
                            className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors font-medium"
                        >
                            Clear All
                        </button>
                        <Link
                            href="/compare"
                            className={`px-6 py-3 rounded-lg font-semibold transition-all ${compareList.length >= 2
                                ? "bg-primary text-white hover:bg-blue-700 shadow-lg hover:shadow-xl"
                                : "bg-gray-300 text-gray-500 cursor-not-allowed"
                                }`}
                            onClick={(e) => {
                                if (compareList.length < 2) {
                                    e.preventDefault();
                                    alert("Please select at least 2 properties to compare");
                                }
                            }}
                        >
                            Compare Now
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}
