'use client';

import { Minus, Plus, ShoppingBag } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { trackEvent } from '@/lib/analytics';
import { useI18n } from '@/lib/i18n';
import { clampQuantity } from '@/lib/utils';

export function ProductDetailActions({ productId }: { productId: string }) {
  const { t } = useI18n();
  const [quantity, setQuantity] = useState(1);
  const [message, setMessage] = useState('');

  useEffect(() => {
    trackEvent('view_item', { item_id: productId });
  }, [productId]);

  function add() {
    try {
      const current = JSON.parse(localStorage.getItem('moc-len-cart') ?? '[]') as Array<{ id: string; quantity: number }>;
      const existing = current.find((line) => line.id === productId);
      if (existing) existing.quantity = clampQuantity(existing.quantity + quantity);
      else current.push({ id: productId, quantity });
      localStorage.setItem('moc-len-cart', JSON.stringify(current));
      window.dispatchEvent(new Event('moc-len-cart-updated'));
      trackEvent('add_to_cart', { item_id: productId, quantity });
      setMessage(t('cart.addedToCart'));
      window.setTimeout(() => setMessage(''), 1800);
    } catch {
      setMessage(t('cart.saveError'));
    }
  }

  return (
    <div className="detail-actions">
      <div className="quantity-control" aria-label={t('cart.quantity')}>
        <button type="button" aria-label={t('cart.decrease', { name: t('cart.quantity').toLowerCase() })} onClick={() => setQuantity((value) => Math.max(1, value - 1))}><Minus size={16} aria-hidden="true" /></button>
        <span aria-live="polite">{quantity}</span>
        <button type="button" aria-label={t('cart.increase', { name: t('cart.quantity').toLowerCase() })} onClick={() => setQuantity((value) => Math.min(20, value + 1))}><Plus size={16} aria-hidden="true" /></button>
      </div>
      <Button type="button" className="button-primary" variant="ghost" size="lg" onClick={add}><ShoppingBag size={17} aria-hidden="true" /> {t('cart.addToCart')}</Button>
      {message ? <output className="status-pill">{message}</output> : null}
    </div>
  );
}