Spanglish/frontend/src/app/(public)/dashboard/components/_shared/PayActions.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import toast from 'react-hot-toast';
import { CheckCircleIcon } from '@heroicons/react/24/outline';
import Button from '@/components/ui/Button';
import { ticketsApi } from '@/lib/api';
import { useLanguage } from '@/context/LanguageContext';
import { pyg } from './helpers';

interface PayActionsProps {
  ticketId: string;
  /** Amount owed, used in the confirm copy. */
  amount: number;
  currency?: string;
  /** Where the money is going — event name or account label. */
  destination: string;
  locale: string;
  /** Called after the payment is successfully marked as sent. */
  onPaid?: () => void;
  size?: 'sm' | 'md' | 'lg';
  /** Stack the two buttons full-width (cards) vs inline (rows). */
  layout?: 'stack' | 'inline';
  className?: string;
  /**
   * The booking's spot was released after the hold threshold passed. Hides the
   * "Pay now" link (money was already sent) and labels the retry "Rebook".
   */
  onHold?: boolean;
}

/**
 * The two unpaid-ticket actions used across Overview, Tickets and Payments:
 *   • "Pay now"  -> opens the existing manual-payment page (TPago / bank details)
 *   • "I've paid" -> short confirm step, then marks the payment as sent
 *                    (moves the ticket to "Awaiting approval").
 */
export default function PayActions({
  ticketId,
  amount,
  currency = 'PYG',
  destination,
  locale,
  onPaid,
  size = 'sm',
  layout = 'stack',
  className,
  onHold = false,
}: PayActionsProps) {
  const { t } = useLanguage();
  const [confirming, setConfirming] = useState(false);
  const [marking, setMarking] = useState(false);

  const handleConfirm = async () => {
    setMarking(true);
    try {
      await ticketsApi.markPaymentSent(ticketId);
      toast.success(t('dashboard.payment.receivedConfirmSoon'));
      setConfirming(false);
      onPaid?.();
    } catch (error: any) {
      // Idempotent backend: if already marked, treat as success.
      if (error?.message?.includes('already')) {
        setConfirming(false);
        onPaid?.();
        return;
      }
      toast.error(
        error?.message ||
          (locale === 'es' ? 'No se pudo marcar el pago' : 'Could not mark payment')
      );
    } finally {
      setMarking(false);
    }
  };

  const containerClass =
    layout === 'stack' ? 'flex flex-col gap-2' : 'flex flex-wrap gap-2';
  const btnWidth = layout === 'stack' ? 'w-full' : '';

  return (
    <>
      <div className={`${containerClass} ${className || ''}`}>
        {!onHold && (
          <Link href={`/booking/${ticketId}`} className={btnWidth}>
            <Button size={size} className={btnWidth}>
              {locale === 'es' ? 'Pagar ahora' : 'Pay now'}
            </Button>
          </Link>
        )}
        <Button
          variant={onHold ? 'primary' : 'outline'}
          size={size}
          className={btnWidth}
          onClick={() => setConfirming(true)}
        >
          {onHold
            ? (locale === 'es' ? 'Reservar de nuevo' : 'Rebook')
            : (locale === 'es' ? 'Ya pagué' : "I've paid")}
        </Button>
      </div>

      {confirming && (
        <div
          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
          role="dialog"
          aria-modal="true"
          onClick={() => !marking && setConfirming(false)}
        >
          <div
            className="w-full max-w-sm rounded-card bg-white p-6 shadow-card-hover"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="mb-4 flex justify-center">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
                <CheckCircleIcon className="h-7 w-7 text-amber-600" />
              </div>
            </div>
            <h3 className="mb-2 text-center text-lg font-semibold text-primary-dark">
              {onHold
                ? (locale === 'es' ? '¿Reservar de nuevo?' : 'Rebook your spot?')
                : (locale === 'es' ? '¿Confirmar pago?' : 'Confirm payment?')}
            </h3>
            <p className="mb-6 text-center text-sm text-gray-600">
              {onHold
                ? (locale === 'es'
                    ? `Intentaremos reservar tu lugar de nuevo para ${destination}.`
                    : `We'll try to re-reserve your spot for ${destination}.`)
                : (locale === 'es'
                    ? `¿Ya enviaste los ${pyg(amount, currency)} para ${destination}?`
                    : `Did you already send the ${pyg(amount, currency)} for ${destination}?`)}
            </p>
            <div className="flex flex-col gap-2">
              <Button isLoading={marking} className="w-full" onClick={handleConfirm}>
                {onHold
                  ? (locale === 'es' ? 'Sí, reservar de nuevo' : 'Yes, rebook')
                  : (locale === 'es' ? 'Sí, ya pagué' : "Yes, I've paid")}
              </Button>
              <Button
                variant="ghost"
                className="w-full"
                disabled={marking}
                onClick={() => setConfirming(false)}
              >
                {locale === 'es' ? 'Todavía no' : 'Not yet'}
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}