'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Heart } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { wishlistApi } from '@/lib/api';
import { useAuthStore } from '@/lib/store/auth';
import { cn } from '@/lib/utils';
import { useToast } from './Toaster';

interface WishlistButtonProps {
  servicePublicId: string;
  locale: string;
  className?: string;
}

export function WishlistButton({ servicePublicId, locale, className }: WishlistButtonProps) {
  const t = useTranslations('wishlist');
  const router = useRouter();
  const toast = useToast();
  const status = useAuthStore((s) => s.status);
  const [saved, setSaved] = useState(false);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    if (status !== 'authenticated') return;
    wishlistApi
      .list(locale)
      .then((items) => setSaved(items.some((i) => i.service.public_id === servicePublicId)))
      .catch(() => undefined);
  }, [status, locale, servicePublicId]);

  const toggle = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (status !== 'authenticated') {
      router.push(`/${locale}/auth/login`);
      return;
    }
    if (busy) return;
    setBusy(true);
    const prev = saved;
    setSaved(!prev);
    try {
      if (prev) {
        await wishlistApi.remove(locale, servicePublicId);
        toast(t('removed'), 'success');
      } else {
        await wishlistApi.add(locale, servicePublicId);
        toast(t('added'), 'success');
      }
    } catch {
      setSaved(prev);
      toast(t('error'), 'error');
    } finally {
      setBusy(false);
    }
  };

  return (
    <button
      type="button"
      onClick={toggle}
      disabled={busy}
      aria-label={saved ? t('remove') : t('add')}
      aria-pressed={saved}
      className={cn(
        'flex h-11 w-11 items-center justify-center rounded-full bg-white/80 backdrop-blur-sm shadow-sm transition-colors hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600',
        className,
      )}
    >
      <Heart
        className={cn('h-4 w-4 transition-colors', saved ? 'fill-danger text-danger' : 'text-neutral-600')}
        aria-hidden
      />
    </button>
  );
}