'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Loader2, ShoppingCart } from 'lucide-react';
import { api } from '@/lib/api';
import { useAuthStore } from '@/store/authStore';
import { Button } from '@/components/ui/button';

type BuyNowButtonProps = {
  productId: string;
  productName: string;
  inStock: boolean;
  locale: string;
  quantity?: number;
  variantId?: string;
  children?: React.ReactNode;
};

function getErrorMessage(error: unknown, locale: string) {
  const message = (error as { response?: { data?: { message?: string | string[] } } })?.response?.data?.message;
  if (Array.isArray(message)) return message.join(', ');
  if (message === 'Insufficient balance' && locale === 'vi') return 'Số dư ví Account không đủ. Vui lòng nạp thêm tiền.';
  if (message) return message;
  return locale === 'vi' ? 'Không thể tạo đơn hàng. Vui lòng thử lại.' : 'Unable to create the order. Please try again.';
}

export default function BuyNowButton({ productId, productName, inStock, locale, quantity = 1, variantId }: BuyNowButtonProps) {
  const router = useRouter();
  const token = useAuthStore((state) => state.token);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleBuyNow = async () => {
    setError(null);
    if (!token) {
      router.push(`/${locale}/auth/login`);
      return;
    }

    setSubmitting(true);
    try {
      await api.post('/orders/buy', { productId, quantity, variantId });
      router.push(`/${locale}/orders`);
    } catch (requestError) {
      setError(getErrorMessage(requestError, locale));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="flex-1 space-y-2">
      <Button
        type="button"
        onClick={handleBuyNow}
        disabled={!inStock || submitting}
        className="w-full bg-gradient-to-r from-violet-600 to-cyan-600 hover:opacity-90 text-white font-semibold h-12 text-base"
      >
        {submitting ? <Loader2 className="animate-spin" /> : <ShoppingCart />}
        {submitting ? (locale === 'vi' ? 'Đang tạo đơn hàng...' : 'Creating order...') : !inStock ? (locale === 'vi' ? 'Hết hàng' : 'Out of stock') : (locale === 'vi' ? 'Mua ngay' : 'Buy Now')}
      </Button>
      {error && <p role="alert" className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-300">{error}</p>}
      <span className="sr-only">{productName}</span>
    </div>
  );
}