import React, { useState } from 'react';
import { CheckCircle, AlertTriangle } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { useToast } from '../contexts/ToastContext.tsx';

export const PublicContactForm: React.FC = () => {
    const [formData, setFormData] = useState({
        nome: '',
        sobrenome: '',
        cpf: '',
        whatsapp: '',
        tipo: ''
    });
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);
    const toast = useToast();

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

        if(!formData.tipo) {
            toast.error("POR FAVOR, SELECIONE PARTICULAR OU PLANO.");
            setLoading(false);
            return;
        }

        try {
            const cpfExists = await HybridBackend.checkCpfExists(formData.cpf);
            if (cpfExists) {
                toast.error("CPF JÁ CADASTRADO. ENTRE EM CONTATO PELO WHATSAPP.");
                setLoading(false);
                return;
            }

            await HybridBackend.saveLead({
                nome: formData.nome,
                sobrenome: formData.sobrenome,
                cpf: formData.cpf,
                whatsapp: formData.whatsapp,
                tipoInteresse: formData.tipo as any
            });
            
            setSuccess(true);
        } catch (err) {
            toast.error("ERRO AO ENVIAR DADOS. TENTE NOVAMENTE.");
        } finally {
            setLoading(false);
        }
    };

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

    if (success) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-white p-4">
                <div className="text-center">
                    <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                        <CheckCircle size={32}/>
                    </div>
                    <h2 className="text-xl font-bold text-amber-900 uppercase">MENSAGEM ENVIADA!</h2>
                    <p className="text-amber-800 mt-2 uppercase font-bold text-sm">NOSSA EQUIPE ENTRARÁ EM CONTATO EM BREVE.</p>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-white flex flex-col items-center justify-center p-4">
            <div className="w-full max-w-md">
                <h1 className="text-center font-bold text-xl mb-6 text-black uppercase">DEIXE SEU CONTATO</h1>

                <form onSubmit={handleSubmit} className="space-y-4">
                    <input 
                        type="text" 
                        name="nome"
                        placeholder="NOME"
                        className="w-full border border-amber-700 rounded-lg p-3 text-gray-800 outline-none focus:ring-2 focus:ring-amber-500 placeholder-gray-500 uppercase-input"
                        required
                        value={formData.nome}
                        onChange={handleChange}
                    />
                    <input 
                        type="text" 
                        name="sobrenome"
                        placeholder="SOBRENOME"
                        className="w-full border border-amber-700 rounded-lg p-3 text-gray-800 outline-none focus:ring-2 focus:ring-amber-500 placeholder-gray-500 uppercase-input"
                        required
                        value={formData.sobrenome}
                        onChange={handleChange}
                    />
                    <input 
                        type="text" 
                        name="cpf"
                        placeholder="CPF"
                        className="w-full border border-amber-700 rounded-lg p-3 text-gray-800 outline-none focus:ring-2 focus:ring-amber-500 placeholder-gray-500 uppercase-input"
                        required
                        value={formData.cpf}
                        onChange={handleChange}
                    />
                    <input 
                        type="text" 
                        name="whatsapp"
                        placeholder="WHATSAPP"
                        className="w-full border border-amber-700 rounded-lg p-3 text-gray-800 outline-none focus:ring-2 focus:ring-amber-500 placeholder-gray-500 uppercase-input"
                        required
                        value={formData.whatsapp}
                        onChange={handleChange}
                    />

                    <div className="flex gap-4">
                        <button 
                            type="button"
                            onClick={() => setFormData({...formData, tipo: 'Particular'})}
                            className={`flex-1 py-3 rounded-lg font-bold uppercase text-sm transition-colors border ${formData.tipo === 'Particular' ? 'bg-amber-800 text-white border-amber-800' : 'bg-amber-600 text-white border-amber-600 hover:bg-amber-700'}`}
                        >
                            PARTICULAR
                        </button>
                        <button 
                            type="button"
                            onClick={() => setFormData({...formData, tipo: 'Plano'})}
                            className={`flex-1 py-3 rounded-lg font-bold uppercase text-sm transition-colors border ${formData.tipo === 'Plano' ? 'bg-purple-800 text-white border-purple-800' : 'bg-purple-600 text-white border-purple-600 hover:bg-purple-700'}`}
                        >
                            PLANO
                        </button>
                    </div>

                    <button 
                        type="submit" 
                        disabled={loading}
                        className="w-full py-4 bg-gray-800 text-white font-bold rounded-lg mt-6 shadow-sm hover:opacity-90 transition-opacity uppercase disabled:bg-gray-400"
                    >
                        {loading ? 'VERIFICANDO...' : 'ENVIAR'}
                    </button>
                </form>
            </div>
        </div>
    );
};