/**
 * PaymentMethodsPage
 * Standalone page for managing payment methods
 * Route: /billing/payment-methods or /settings/billing
 * Epic: OQI-005 Pagos y Stripe
 */

import React from 'react';
import { Link } from 'react-router-dom';
import {
  CreditCard,
  ArrowLeft,
  ExternalLink,
  Shield,
  Info,
} from 'lucide-react';
import { usePaymentStore } from '../../../stores/paymentStore';
import PaymentMethodsManager from '../../../components/payments/PaymentMethodsManager';
import StripeElementsWrapper from '../../../components/payments/StripeElementsWrapper';

export default function PaymentMethodsPage() {
  const { openBillingPortal, currentSubscription } = usePaymentStore();

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link
            to="/billing"
            className="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
          </Link>
          <div>
            <h1 className="text-2xl font-bold text-white flex items-center gap-3">
              <div className="p-2 bg-blue-600/20 rounded-lg">
                <CreditCard className="w-6 h-6 text-blue-400" />
              </div>
              Payment Methods
            </h1>
            <p className="text-gray-400 mt-1">
              Manage your saved payment methods
            </p>
          </div>
        </div>
        <button
          onClick={openBillingPortal}
          className="flex items-center gap-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white rounded-lg transition-colors border border-gray-700"
        >
          <ExternalLink className="w-4 h-4" />
          Stripe Portal
        </button>
      </div>

      {/* Security Notice */}
      <div className="flex items-start gap-3 p-4 bg-gray-800/50 border border-gray-700 rounded-xl">
        <Shield className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" />
        <div>
          <p className="text-white font-medium">Secure Payment Processing</p>
          <p className="text-gray-400 text-sm mt-1">
            All payment information is securely processed by Stripe. We never store your full card
            details on our servers. Your data is protected with bank-level encryption.
          </p>
        </div>
      </div>

      {/* Subscription Info (if active) */}
      {currentSubscription && (
        <div className="flex items-start gap-3 p-4 bg-blue-900/20 border border-blue-800/50 rounded-xl">
          <Info className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
          <div>
            <p className="text-blue-400 font-medium">Active Subscription</p>
            <p className="text-gray-400 text-sm mt-1">
              Your {currentSubscription.plan?.name ?? currentSubscription.planName} subscription
              will automatically renew using your default payment method.
              Next billing date:{' '}
              {new Date(currentSubscription.currentPeriodEnd).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
              })}
            </p>
          </div>
        </div>
      )}

      {/* Payment Methods Manager */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-6">
        <StripeElementsWrapper>
          <PaymentMethodsManager
            showTitle={false}
            onMethodChange={() => {
              // Could trigger a notification here
            }}
          />
        </StripeElementsWrapper>
      </div>

      {/* Help Section */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-6">
        <h3 className="text-white font-medium mb-4">Frequently Asked Questions</h3>
        <div className="space-y-4">
          <div>
            <h4 className="text-gray-300 font-medium">
              What payment methods do you accept?
            </h4>
            <p className="text-gray-500 text-sm mt-1">
              We accept all major credit and debit cards (Visa, Mastercard, American Express,
              Discover), as well as regional payment methods in select countries.
            </p>
          </div>
          <div>
            <h4 className="text-gray-300 font-medium">How do I update my default payment method?</h4>
            <p className="text-gray-500 text-sm mt-1">
              Click the star icon next to any saved payment method to set it as your default. Your
              subscription will automatically use the default method for future payments.
            </p>
          </div>
          <div>
            <h4 className="text-gray-300 font-medium">Is my payment information secure?</h4>
            <p className="text-gray-500 text-sm mt-1">
              Yes! We use Stripe for payment processing, which is PCI-DSS Level 1 certified - the
              highest level of security certification. Your card details are encrypted and never
              stored on our servers.
            </p>
          </div>
          <div>
            <h4 className="text-gray-300 font-medium">
              What happens if my payment fails?
            </h4>
            <p className="text-gray-500 text-sm mt-1">
              If a payment fails, we will notify you via email and retry the payment automatically.
              You can update your payment method at any time to prevent service interruption.
            </p>
          </div>
        </div>
      </div>

      {/* Need Help */}
      <div className="text-center py-6">
        <p className="text-gray-500 text-sm">
          Need help with your billing?{' '}
          <Link to="/support" className="text-blue-400 hover:text-blue-300">
            Contact Support
          </Link>
        </p>
      </div>
    </div>
  );
}
