import { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { X, Shield, Lock } from "lucide-react";
import { useToast } from "@/hooks/use-toast";

export default function CheckoutModal() {
  const [formData, setFormData] = useState({
    email: '',
    name: '',
    payment: 'pix'
  });
  const { toast } = useToast();

  const closeModal = () => {
    const modal = document.getElementById('checkout-modal');
    if (modal) {
      modal.classList.add('hidden');
      document.body.style.overflow = 'auto';
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!formData.email || !formData.name) {
      toast({
        title: "Erro",
        description: "Por favor, preencha todos os campos obrigatórios.",
        variant: "destructive"
      });
      return;
    }

    // Simulate payment processing
    toast({
      title: "Processando pagamento...",
      description: "Você será redirecionado para a página de download em instantes.",
    });

    // In a real app, this would redirect to payment processor or download page
    setTimeout(() => {
      toast({
        title: "Pagamento confirmado!",
        description: "Verifique seu email para o link de download.",
      });
      closeModal();
    }, 2000);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div id="checkout-modal" className="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl max-w-md w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h3 className="text-2xl font-bold text-gray-900">Finalizar Compra</h3>
            <Button
              variant="ghost"
              size="sm"
              onClick={closeModal}
              data-testid="button-close-modal"
            >
              <X className="w-5 h-5" />
            </Button>
          </div>

          {/* Product summary */}
          <div className="bg-gray-50 rounded-xl p-4 mb-6">
            <h4 className="font-semibold text-gray-900 mb-2">Ebook Segredos para Dormir Melhor</h4>
            <div className="flex justify-between text-sm text-gray-600 mb-1">
              <span>Valor original:</span>
              <span className="line-through">R$ 49,90</span>
            </div>
            <div className="flex justify-between text-lg font-bold text-green-600">
              <span>Valor hoje:</span>
              <span>R$ 14,90</span>
            </div>
          </div>

          {/* Payment form */}
          <form onSubmit={handleSubmit}>
            <div className="space-y-4">
              <div>
                <Label htmlFor="email">Email *</Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="seu@email.com"
                  value={formData.email}
                  onChange={handleInputChange}
                  data-testid="input-email"
                  required
                />
              </div>
              
              <div>
                <Label htmlFor="name">Nome Completo *</Label>
                <Input
                  id="name"
                  name="name"
                  type="text"
                  placeholder="Seu nome completo"
                  value={formData.name}
                  onChange={handleInputChange}
                  data-testid="input-name"
                  required
                />
              </div>

              <div>
                <Label>Forma de Pagamento</Label>
                <div className="space-y-2">
                  <label className="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
                    <input
                      type="radio"
                      name="payment"
                      value="pix"
                      className="mr-3"
                      checked={formData.payment === 'pix'}
                      onChange={handleInputChange}
                      data-testid="radio-payment-pix"
                    />
                    <span className="mr-2">💰</span>
                    <span>PIX (Aprovação imediata)</span>
                  </label>
                  <label className="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
                    <input
                      type="radio"
                      name="payment"
                      value="card"
                      className="mr-3"
                      checked={formData.payment === 'card'}
                      onChange={handleInputChange}
                      data-testid="radio-payment-card"
                    />
                    <span className="mr-2">💳</span>
                    <span>Cartão de Crédito</span>
                  </label>
                </div>
              </div>
            </div>

            <Button
              type="submit"
              data-testid="button-checkout-submit"
              className="w-full bg-green-600 hover:bg-green-700 text-white font-bold text-lg py-4 rounded-lg mt-6 transition-colors duration-300"
            >
              FINALIZAR COMPRA - R$ 14,90
            </Button>
          </form>

          {/* Security badges */}
          <div className="mt-6 text-center">
            <div className="flex justify-center items-center space-x-4 text-sm text-gray-600">
              <div className="flex items-center">
                <Lock className="w-4 h-4 mr-2" />
                <span>Pagamento Seguro</span>
              </div>
              <div className="flex items-center">
                <Shield className="w-4 h-4 mr-2" />
                <span>SSL 256 bits</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}