"use client";

import Link from "next/link";
import { Heart } from "lucide-react";
import { AccountSection } from "@/components/account/AccountSection";
import { useFavorites } from "@/context/FavoritesContext";
import { formatCop } from "@/data/products";

export default function FavoritesPage() {
  return (
    <AccountSection title="Mis favoritos">
      <FavoritesList />
    </AccountSection>
  );
}

function FavoritesList() {
  const { items, remove, ready } = useFavorites();

  if (!ready) {
    return <p>Cargando tus favoritos…</p>;
  }

  if (!items.length) {
    return (
      <div className="space-y-4">
        <p>
          Todavía no has guardado prendas. En cualquier producto, toca el
          corazón para marcarlo como favorito.
        </p>
        <Link href="/shop" className="ot-btn ot-btn-ghost inline-flex">
          Ver catálogo
        </Link>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <p className="text-ot-ink/70">
        {items.length} pieza{items.length === 1 ? "" : "s"} guardada
        {items.length === 1 ? "" : "s"}.
      </p>
      <ul className="divide-y divide-black/10 border border-black/10 bg-white">
        {items.map((item) => (
          <li key={item.id || item.slug} className="flex gap-3 p-3 sm:p-4">
            <Link
              href={`/product/${item.slug}`}
              className="shrink-0 w-16 h-20 sm:w-20 sm:h-24 bg-ot-cream overflow-hidden"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={item.image}
                alt=""
                className="h-full w-full object-cover object-top"
              />
            </Link>
            <div className="min-w-0 flex-1 flex flex-col justify-between py-0.5">
              <div>
                <p className="text-[10px] tracking-[0.16em] uppercase text-ot-muted">
                  {item.collection}
                </p>
                <Link
                  href={`/product/${item.slug}`}
                  className="font-serif text-lg text-ot-ink leading-tight hover:underline"
                >
                  {item.name}
                </Link>
                <p className="mt-1 text-sm text-ot-ink/80">
                  {formatCop(item.price)}
                </p>
              </div>
              <div className="flex flex-wrap gap-3 mt-2">
                <Link
                  href={`/product/${item.slug}`}
                  className="text-xs underline underline-offset-2 text-ot-green"
                >
                  Ver prenda
                </Link>
                <button
                  type="button"
                  onClick={() => remove(item.id || item.slug)}
                  className="text-xs text-ot-muted hover:text-red-700 inline-flex items-center gap-1"
                >
                  <Heart size={12} fill="currentColor" />
                  Quitar
                </button>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}