import React from 'react';
import { AlertCircle, AlertTriangle, CheckCircle2, Clock, Loader2, X } from '@/Components/AnimatedIcons';
import { PaymentStatus } from '@/types/notifications';

// ── State definitions ─────────────────────────────────────────────────────────

interface StateConfig {
  label: string;
  description?: string;
  containerClass: string;
  textClass: string;
  icon: React.ReactNode;
}

const STATE_CONFIG: Partial<Record<PaymentStatus, StateConfig>> = {
  INITIATING: {
    label:          'Preparing payment…',
    containerClass: 'bg-slate-50 border-slate-200',
    textClass:      'text-slate-600',
    icon:           <Loader2 className="w-4 h-4 text-[#FF0D8F] animate-spin flex-shrink-0" aria-hidden="true" />,
  },
  PAYMENT_PENDING: {
    label:          'Waiting for payment confirmation…',
    description:    'Do not close or refresh this page.',
    containerClass: 'bg-amber-50 border-amber-200',
    textClass:      'text-amber-700',
    icon:           <Clock className="w-4 h-4 text-amber-500 flex-shrink-0" aria-hidden="true" />,
  },
  VERIFYING: {
    label:          'Payment received. Verification in progress.',
    description:    'Please wait — do not submit a new payment.',
    containerClass: 'bg-blue-50 border-blue-200',
    textClass:      'text-blue-700',
    icon:           <Loader2 className="w-4 h-4 text-blue-500 animate-spin flex-shrink-0" aria-hidden="true" />,
  },
  SETTLED: {
    label:          'Payment verified and settled.',
    containerClass: 'bg-emerald-50 border-emerald-200',
    textClass:      'text-emerald-700',
    icon:           <CheckCircle2 className="w-4 h-4 text-emerald-500 flex-shrink-0" aria-hidden="true" />,
  },
  FAILED: {
    label:          'Payment failed.',
    description:    'Check notification centre for details. The invoice has NOT been confirmed.',
    containerClass: 'bg-rose-50 border-rose-200',
    textClass:      'text-rose-700',
    icon:           <AlertCircle className="w-4 h-4 text-rose-500 flex-shrink-0" aria-hidden="true" />,
  },
  CANCELLED: {
    label:          'Payment cancelled.',
    description:    'The customer cancelled the checkout. No charge was made.',
    containerClass: 'bg-slate-50 border-slate-200',
    textClass:      'text-slate-600',
    icon:           <AlertTriangle className="w-4 h-4 text-slate-400 flex-shrink-0" aria-hidden="true" />,
  },
};

// ── Component ─────────────────────────────────────────────────────────────────

interface PaymentStatusBannerProps {
  status: PaymentStatus;
  /** Allow parent to override the label (e.g. specific error message). */
  overrideLabel?: string;
  /** Optional dismiss handler — shown for FAILED and CANCELLED states. */
  onDismiss?: () => void;
}

/**
 * PaymentStatusBanner
 *
 * Displays the current payment lifecycle state in the POS payment modal.
 *
 * IMPORTANT: This component is purely a display primitive.
 *  - It does NOT store business state.
 *  - It does NOT call any payment API itself.
 *  - It MUST NOT be used as the authoritative source of payment truth.
 *  - "SETTLED" state may only be set by the parent after receiving
 *    server-side confirmation (not from a Razorpay JS callback alone).
 */
export function PaymentStatusBanner({ status, overrideLabel, onDismiss }: PaymentStatusBannerProps) {
  const config = STATE_CONFIG[status];
  if (!config) return null;

  const isDismissible = (status === 'FAILED' || status === 'CANCELLED') && onDismiss;

  return (
    <div
      role="status"
      aria-live="polite"
      aria-atomic="true"
      aria-label={`Payment status: ${config.label}`}
      className={`
        flex items-start gap-2.5 p-3 rounded-xl border text-sm
        ${config.containerClass} ${config.textClass}
      `}
    >
      {config.icon}

      <div className="flex-1 min-w-0">
        <p className="font-semibold leading-tight">
          {overrideLabel ?? config.label}
        </p>
        {config.description && (
          <p className="text-xs opacity-80 mt-0.5 leading-relaxed">
            {config.description}
          </p>
        )}
      </div>

      {isDismissible && (
        <button
          type="button"
          onClick={onDismiss}
          className="opacity-60 hover:opacity-100 transition-opacity p-0.5 flex-shrink-0"
          aria-label="Dismiss payment status"
        >
          <X className="w-4 h-4" aria-hidden="true" />
        </button>
      )}
    </div>
  );
}