"use client";

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import Link from "next/link";
import Image from "next/image";
import { Heart, MapPin, Bed, Bath, Square, X, ImageIcon } from "lucide-react";
import { useFavorites } from "@/app/contexts/FavoritesContext";
import AuthService from "@/app/services/AuthService";
import Loading from "../loading";

export default function FavoritesPage() {
  const { t } = useTranslation();
  const router = useRouter();
  const { favorites, isLoading: favoritesLoading, removeFavorite } = useFavorites();

  useEffect(() => {
    // Admin check removed
    // if (AuthService.isAdmin()) {
    //   router.push('/');
    //   return;
    // }
    // setIsAdmin(AuthService.isAdmin());
  }, [router]);

  const formatCurrency = (amount) => {
    return amount?.toLocaleString() + " " + t("currency-syp-suffix");
  };

  if (favoritesLoading && favorites.length === 0) {
    return <Loading />;
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">{t("favorites")}</h1>
          <p className="text-gray-600">{t("saved-properties")}</p>
        </div>

        {favorites.length === 0 ? (
          <div className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
            <Heart className="w-16 h-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-xl font-bold text-gray-700 mb-2">{t("no-favorites")}</h3>
            <p className="text-gray-500 mb-6">{t("add-favorites-hint")}</p>
            <Link href="/properties" className="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors">
              {t("browse-properties")}
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {favorites.map((property) => (
              <motion.div
                key={property.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-200"
              >
                <div className="relative h-48 bg-gray-100">
                  {property.images && property.images[0] ? (
                    <Image src={property.images[0]} alt={property.title} fill className="object-cover" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center">
                      <ImageIcon className="w-12 h-12 text-gray-400" />
                    </div>
                  )}
                  <button
                    onClick={() => removeFavorite(property.id)}
                    className="absolute top-2 right-2 w-8 h-8 bg-white/90 rounded-full flex items-center justify-center hover:bg-red-50 transition-colors shadow-sm"
                  >
                    <X className="w-4 h-4 text-red-500" />
                  </button>
                </div>

                <div className="p-5">
                  <div className="flex justify-between items-start mb-3">
                    <div>
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs font-medium">
                          {property.type === "apartment" ? t("buildingType.apartment") : property.type === "villa" ? t("buildingType.villa") : t("buildingType.house")}
                        </span>
                      </div>
                      <h3 className="font-bold text-gray-900 mb-1 line-clamp-1">{property.title}</h3>
                      <div className="flex items-center gap-1 text-gray-500 text-xs mb-2">
                        <MapPin className="w-3 h-3" />
                        <span className="line-clamp-1">
                          {property.location.city}، {property.location.district}
                        </span>
                      </div>
                    </div>
                    <div className="text-left">
                      <div className="text-xl font-bold text-gray-900">{formatCurrency(property.price)}</div>
                      <div className="text-xs text-gray-500">/{property.priceUnit === "daily" ? t("day") : t("month")}</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-center mb-4">
                    <div className="flex items-center gap-3 text-gray-600 text-sm">
                      <div className="flex items-center gap-1">
                        <Bed className="w-4 h-4" />
                        <span>{property.bedrooms}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Bath className="w-4 h-4" />
                        <span>{property.bathrooms}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Square className="w-4 h-4" />
                        <span>{property.area}م²</span>
                      </div>
                    </div>
                  </div>

                  <Link href={`/property/${property.id}`} className="block w-full bg-amber-500 text-white py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors text-center">
                    {t("viewDetails")}
                  </Link>
                </div>
              </motion.div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}