"use client";

import { useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { useLanguage } from '@/src/lib/context/LanguageContext';
import { getLocalizedUrl } from '@/src/lib/utils/urlHelper';

interface VivaPayFormProps {
  amount?: number | null;
  submissionId?: string;
}

export default function VivaPayForm({ amount, submissionId }: VivaPayFormProps) {
  const [loading, setLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  // A hard redirect leaves the router behind, so the language and tenant have
  // to be written into the URL by hand or the customer finishes paying on a
  // French site and lands on an English thank-you page.
  const { currentLanguage } = useLanguage();
  const franchiseeId = useSearchParams().get('franchiseeId');

  const formatAmount = (amt: number | null | undefined): string => {
    if (!amt) return '$25.00';
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(amt);
  };

  const handleVivaPayment = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setErrorMsg(null);

    try {
      // Dummy Viva Pay payment logic
      console.log('[VivaPay] Processing payment with dummy implementation');
      
      // Simulate API call delay
      await new Promise(resolve => setTimeout(resolve, 2000));

      // Simulate success
      console.log('[VivaPay] Payment processed successfully');
      window.location.href = getLocalizedUrl(
        `/thank-you/${submissionId || 'default'}`,
        currentLanguage,
        franchiseeId,
      );
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Payment failed';
      setErrorMsg(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleVivaPayment} className="space-y-6">
      {/* Error Message */}
      {errorMsg && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
          {errorMsg}
        </div>
      )}

      {/* Viva Pay Dummy Form */}
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-2 font-[Signika]">
            Phone Number
          </label>
          <input
            type="tel"
            placeholder="+1 (XXX) XXX-XXXX"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0097DC] focus:border-transparent"
            required
          />
        </div>

        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-2 font-[Signika]">
            Account PIN
          </label>
          <input
            type="password"
            placeholder="••••"
            maxLength={4}
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0097DC] focus:border-transparent"
            required
          />
        </div>

        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-2 font-[Signika]">
            Card Number
          </label>
          <input
            type="text"
            placeholder="XXXX XXXX XXXX XXXX"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0097DC] focus:border-transparent"
            required
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2 font-[Signika]">
              Expiry Date
            </label>
            <input
              type="text"
              placeholder="MM/YY"
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0097DC] focus:border-transparent"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2 font-[Signika]">
              CVV
            </label>
            <input
              type="text"
              placeholder="123"
              maxLength={3}
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0097DC] focus:border-transparent"
              required
            />
          </div>
        </div>

        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
          <p className="text-xs text-purple-700 font-[Signika]">
            💡 This is a demo. Use any values to continue.
          </p>
        </div>
      </div>

      {/* Payment Button */}
      <button
        type="submit"
        disabled={loading}
        className="w-full bg-gradient-to-r from-[#7C3AED] to-[#A855F7] hover:from-[#6D28D9] hover:to-[#9333EA] text-white font-bold py-4 px-6 rounded-full text-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl"
      >
        {loading ? 'Processing Payment...' : `Pay with Viva Pay - ${formatAmount(amount)}`}
      </button>

      {/* Info Text */}
      <p className="text-sm text-gray-500 text-center">
        Your payment information is encrypted and secure.
      </p>
    </form>
  );
}