"use client";

import Link from "next/link";

import {
  Heart,
  Trash2,
  ChevronRight,
  Sparkles,
} from "lucide-react";

import { motion, AnimatePresence } from "framer-motion";

import CarListCard from "@/components/cars/CarListCard";

import { useWishlistStore } from "@/store/useWishlistStore";

export default function WishlistPage() {
  const { items, clear } =
    useWishlistStore();

  return (
    <div className="max-w-[1280px] mx-auto px-4 py-6 pb-24">
      {/* ═══════════════════════════════════
          PAGE HEADER
      ═══════════════════════════════════ */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        {/* Left */}
        <div>
          <p className="text-[11px] uppercase tracking-[0.2em] text-pink-600 font-black mb-1">
            Your Collection
          </p>

          <h1 className="text-3xl font-black text-gray-900">
            Saved Cars
          </h1>

          <p className="text-sm text-gray-500 mt-1">
            {items.length} car
            {items.length !== 1
              ? "s"
              : ""}{" "}
            saved to wishlist
          </p>
        </div>

        {/* Right */}
        {items.length > 0 && (
          <motion.button
            type="button"
            whileHover={{
              y: -2,
            }}
            whileTap={{
              scale: 0.97,
            }}
            onClick={clear}
            aria-label="Clear all saved cars"
            className="inline-flex items-center justify-center gap-2 rounded-2xl border border-red-200 bg-red-50 px-5 py-3 text-sm font-bold text-red-600 hover:bg-red-100 transition-all duration-300 w-full md:w-auto focus:outline-none focus:ring-2 focus:ring-red-400"
          >
            <Trash2 className="w-4 h-4" />

            Clear All
          </motion.button>
        )}
      </div>

      {/* ═══════════════════════════════════
          EMPTY STATE
      ═══════════════════════════════════ */}
      {items.length === 0 ? (
        <motion.div
          initial={{
            opacity: 0,
            y: 20,
          }}
          animate={{
            opacity: 1,
            y: 0,
          }}
          transition={{
            duration: 0.4,
          }}
          className="relative overflow-hidden rounded-[36px] border border-gray-200/70 bg-white shadow-[0_15px_50px_rgba(0,0,0,0.05)]"
        >
          {/* Background Glow */}
          <div className="absolute top-0 left-0 w-[300px] h-[300px] bg-pink-100 rounded-full blur-3xl opacity-40" />

          <div className="relative px-6 py-20 sm:px-10 text-center">
            {/* Icon */}
            <div className="w-28 h-28 rounded-[32px] bg-gradient-to-br from-pink-50 to-rose-100 flex items-center justify-center mx-auto mb-8 shadow-xl shadow-pink-100">
              <Heart className="w-12 h-12 text-pink-500" />
            </div>

            {/* Title */}
            <h2 className="text-3xl font-black text-gray-900 mb-3">
              No Saved Cars Yet
            </h2>

            {/* Desc */}
            <p className="max-w-md mx-auto text-gray-500 text-base leading-relaxed mb-8">
              Save your favourite cars
              and compare them later
              easily from your wishlist.
            </p>

            {/* CTA */}
            <Link
              href="/cars"
              className="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-pink-500 to-rose-500 px-8 py-4 text-white font-black shadow-xl shadow-pink-100 hover:scale-105 transition-all duration-300"
            >
              Browse Cars

              <ChevronRight className="w-5 h-5" />
            </Link>
          </div>
        </motion.div>
      ) : (
        <>
          {/* ═══════════════════════════════════
              TOP INFO CARD
          ═══════════════════════════════════ */}
          <motion.div
            initial={{
              opacity: 0,
              y: 10,
            }}
            animate={{
              opacity: 1,
              y: 0,
            }}
            transition={{
              duration: 0.3,
            }}
            className="mb-6 rounded-[30px] border border-gray-200/70 bg-gradient-to-r from-pink-50 via-white to-rose-50 p-5 shadow-sm"
          >
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
              {/* Left */}
              <div className="flex items-start gap-4">
                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-500 flex items-center justify-center shadow-lg shadow-pink-100 shrink-0">
                  <Sparkles className="w-6 h-6 text-white" />
                </div>

                <div>
                  <h3 className="text-lg font-black text-gray-900">
                    Your Premium Wishlist
                  </h3>

                  <p className="text-sm text-gray-500 mt-1">
                    Compare, explore and
                    track your favourite
                    cars anytime.
                  </p>
                </div>
              </div>

              {/* Count */}
              <div className="inline-flex items-center justify-center rounded-2xl bg-white border border-pink-100 px-5 py-3 shadow-sm">
                <span className="text-sm font-bold text-pink-600">
                  {items.length} Saved
                  {items.length > 1
                    ? " Cars"
                    : " Car"}
                </span>
              </div>
            </div>
          </motion.div>

          {/* ═══════════════════════════════════
              LIST
          ═══════════════════════════════════ */}
          <div className="space-y-4">
            <AnimatePresence>
              {items.map((car, index) => (
                <motion.div
                  key={car.id}
                  initial={{
                    opacity: 0,
                    y: 20,
                  }}
                  animate={{
                    opacity: 1,
                    y: 0,
                  }}
                  exit={{
                    opacity: 0,
                    y: -20,
                  }}
                  transition={{
                    duration: 0.3,
                    delay: index * 0.04,
                  }}
                >
                  <CarListCard
                    car={car}
                  />
                </motion.div>
              ))}
            </AnimatePresence>
          </div>
        </>
      )}
    </div>
  );
}