// hero-form.jsx — Form de 2 steps.
// Step 1 → Continuar: registra lead, guarda leadId.
// Step 2 → Agendar: envia leadId + UTMs, campo Data unificado dd/MM/yyyy HH:mm.

function SummaryRow({ label, value }) {
    return (
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
            <span style={{ fontFamily: "'Roboto',sans-serif", fontSize: 12, color: '#919191' }}>{label}</span>
            <span style={{ fontFamily: "'Roboto',sans-serif", fontSize: 12, color: '#2D2D2D', fontWeight: 500, textAlign: 'right' }}>{value}</span>
        </div>
    );
}

const EMPTY_DATA = {
    nome: '', telefone: '', email: '',
    anoModelo: '', veiculoId: '', veiculoDescricao: '',
    data: '', horario: '',
};

function HeroForm() {
    const { unidade } = useUnidade();
    const [step, setStep] = React.useState(1);
    const [data, setData] = React.useState(EMPTY_DATA);
    const [errors, setErrors] = React.useState({});
    const [leadId, setLeadId] = React.useState(null);
    const [continuandoLead, setContinuandoLead] = React.useState(false);
    const [submitState, setSubmitState] = React.useState({ status: 'idle', error: null, agendamentoId: null });

    const set = (k, v) => setData(d => ({ ...d, [k]: v }));

    const validate1 = () => {
        const e = {};
        if (!data.nome.trim()) e.nome = 'Informe seu nome completo';
        if (digits(data.telefone).length !== 11) e.telefone = 'Telefone deve ter 11 dígitos';
        if (data.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = 'E-mail inválido';
        setErrors(e);
        return Object.keys(e).length === 0;
    };
    const validate2 = () => {
        const e = {};
        if (!data.anoModelo) e.anoModelo = 'Selecione o ano';
        if (!data.veiculoId) e.veiculo = 'Selecione um veículo da lista';
        if (!data.data) e.data = 'Escolha uma data';
        if (!data.horario) e.horario = 'Escolha um horário';
        setErrors(e);
        return Object.keys(e).length === 0;
    };

    // ─── Continuar (Step 1 → Step 2): registra lead, salva leadId ───
    const continuar = async () => {
        if (!validate1()) return;
        setContinuandoLead(true);
        try {
            const id = await window.api.registrarLead({
                FilialId: unidade.filialId,
                nome: data.nome,
                telefone: digits(data.telefone),
                email: data.email || null,
                whatsapp: false,
            });
            setLeadId(id);
            window.api.gtmEvent('lead_gerado', {
                unidade: unidade.slug,
                form_lp: 'quero-vender',
            });
        } catch (err) {
            // Não bloqueia o avanço se a chamada falhar — usuário consegue agendar
            // mesmo sem leadId; o backend pode lidar com lead null.
        } finally {
            setContinuandoLead(false);
            setStep(2);
        }
    };

    // ─── Submit final: agendamento ──────────────────────────────────
    const submit = async () => {
        if (!validate2()) return;
        setSubmitState({ status: 'loading', error: null, agendamentoId: null });
        try {
            const res = await window.api.agendar({
                filialId: unidade.filialId,
                leadId: leadId || null,
                nome: data.nome,
                email: data.email || null,
                telefone: digits(data.telefone),
                veiculoId: data.veiculoId,
                anoModelo: Number(data.anoModelo),
                // Data unificada — formato dd/MM/yyyy HH:mm
                Data: window.api.combinarDataHorario(data.data, data.horario),
            });
            window.api.gtmEvent('agendamento_concluido', {
                unidade: unidade.slug,
                form_lp: 'quero-vender',
                veiculo: data.veiculoDescricao,
                ano_modelo: data.anoModelo,
                data_agendamento: data.data,
            });
            setSubmitState({ status: 'success', error: null, agendamentoId: res.agendamentoId });
        } catch (err) {
            if (err && err.status === 422 && err.fieldErrors) {
                setErrors(prev => ({ ...prev, ...err.fieldErrors }));
                setSubmitState({ status: 'idle', error: null, agendamentoId: null });
            } else {
                setSubmitState({ status: 'error', error: err, agendamentoId: null });
            }
        }
    };

    const resetar = () => {
        setData(EMPTY_DATA);
        setErrors({});
        setStep(1);
        setLeadId(null);
        setSubmitState({ status: 'idle', error: null, agendamentoId: null });
    };

    // ─── Tela de sucesso (inline) ──────────────────────────────────
    if (submitState.status === 'success') {
        return (
            <div style={{ textAlign: 'center', padding: '20px 8px' }}>
                <div style={{
                    width: 64, height: 64, borderRadius: '50%', background: 'rgba(12,113,16,0.1)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    margin: '0 auto 18px',
                }}>
                    <Icon name="check" size={32} color="#0C7110" stroke={3} />
                </div>
                <h3 style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 500, fontSize: 22, color: '#2D2D2D', marginBottom: 8 }}>
                    Agendamento confirmado!
                </h3>
                <p style={{ fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#5B5B5B', lineHeight: 1.6, marginBottom: 22 }}>
                    Olá {data.nome.split(' ')[0]}, recebemos seu agendamento.<br />
                    Em instantes você receberá uma confirmação no WhatsApp.
                </p>
                <div style={{
                    background: '#F9F9F9', borderRadius: 12, padding: '16px 18px',
                    textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 18,
                }}>
                    <SummaryRow label="Veículo" value={`${data.veiculoDescricao} · ${data.anoModelo}`} />
                    <SummaryRow label="Data" value={formatarDataLonga(data.data)} />
                    <SummaryRow label="Horário" value={data.horario} />
                    <SummaryRow label="Local" value={`${unidade.nomeCompleto} · ${unidade.endereco.split(' — ')[0]}`} />
                </div>
                <button onClick={resetar} style={{
                    background: 'none', border: 'none', color: '#5B5B5B',
                    fontFamily: "'Roboto',sans-serif", fontSize: 13, cursor: 'pointer',
                    textDecoration: 'underline',
                }}>Fazer novo agendamento</button>
            </div>
        );
    }

    const loadingSubmit = submitState.status === 'loading';

    return (
        <div>
            <ProgressBar step={step} />
            <div style={{ minHeight: 320 }}>
                {step === 1 && (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                        <Field label="Nome completo" required error={errors.nome}>
                            <input name="Nome" value={data.nome} onChange={e => set('nome', e.target.value)} placeholder="Seu nome" style={inputStyle(errors.nome)} />
                        </Field>
                        <Field label="Telefone / WhatsApp" required error={errors.telefone}>
                            <input name="Telefone" id="Telefone" value={data.telefone} onChange={e => set('telefone', maskPhone(e.target.value))} placeholder="(11) 99999-9999" style={inputStyle(errors.telefone)} inputMode="numeric" />
                        </Field>
                        <Field label="E-mail" error={errors.email}>
                            <input name="Email" value={data.email} onChange={e => set('email', e.target.value)} placeholder="seu@email.com" style={inputStyle(errors.email)} type="email" />
                        </Field>
                    </div>
                )}
                {step === 2 && (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                        <Field label="Ano modelo" required error={errors.anoModelo}>
                            <AnoSelect
                                valor={data.anoModelo}
                                onChange={v => setData(d => ({ ...d, anoModelo: v, veiculoId: '', veiculoDescricao: '' }))}
                                error={errors.anoModelo}
                            />
                        </Field>
                        <Field label="Veículo" required error={errors.veiculo}>
                            <VeiculoAutocomplete
                                valor={data.veiculoId}
                                descricao={data.veiculoDescricao}
                                ano={data.anoModelo}
                                onSelect={(item) => setData(d => ({ ...d, veiculoId: item.id, veiculoDescricao: item.descricao }))}
                                onClear={() => setData(d => ({ ...d, veiculoId: '', veiculoDescricao: '' }))}
                                error={errors.veiculo}
                            />
                        </Field>
                        <Field label="Data da avaliação" required error={errors.data}>
                            <DataCalendarPopup
                                valor={data.data}
                                onChange={v => setData(d => ({ ...d, data: v, horario: '' }))}
                                error={errors.data}
                            />
                        </Field>
                        {data.data && (
                            <Field label="Horário" required error={errors.horario}>
                                <HorarioSelect
                                    data={data.data}
                                    valor={data.horario}
                                    onChange={v => set('horario', v)}
                                    error={errors.horario}
                                    horaAbertura={unidade.horaAbertura}
                                    horaFechamento={unidade.horaFechamento}
                                />
                            </Field>
                        )}
                        {submitState.status === 'error' && (
                            <div style={{
                                background: 'rgba(227,16,24,0.06)', borderRadius: 8,
                                padding: '10px 14px', fontSize: 12, color: '#E31018',
                                fontFamily: "'Roboto',sans-serif", display: 'flex', alignItems: 'center', gap: 8,
                            }}>
                                <Icon name="close" size={14} color="#E31018" stroke={2.4} />
                                Não conseguimos enviar seu agendamento. Verifique sua conexão e tente novamente.
                            </div>
                        )}
                    </div>
                )}
            </div>

            {/* Actions */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 10 }}>
                {step === 1 ? (
                    <button onClick={continuar} disabled={continuandoLead} style={{
                        width: '100%', padding: '13px 20px', borderRadius: 8,
                        background: continuandoLead ? '#9a9a9a' : '#E31018', color: '#fff', border: 'none',
                        fontFamily: "'Roboto',sans-serif", fontSize: 15, fontWeight: 500,
                        cursor: continuandoLead ? 'wait' : 'pointer',
                        boxShadow: continuandoLead ? 'none' : '0 4px 8.9px rgba(227,16,24,0.25)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                    }}>
                        {continuandoLead ? (
                            <>
                                <span style={{
                                    width: 14, height: 14, borderRadius: '50%',
                                    border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff',
                                    animation: 'spin 700ms linear infinite',
                                }} />
                                Salvando...
                            </>
                        ) : (
                            <>
                                Continuar — veículo e horário
                                <Icon name="arrowRight" size={16} color="#fff" stroke={2.4} />
                            </>
                        )}
                    </button>
                ) : (
                    <button onClick={submit} disabled={loadingSubmit} style={{
                        width: '100%', padding: '15px 20px', borderRadius: 8,
                        background: loadingSubmit ? '#9a9a9a' : '#E31018', color: '#fff', border: 'none',
                        fontFamily: "'Roboto',sans-serif", fontSize: 16, fontWeight: 500,
                        cursor: loadingSubmit ? 'wait' : 'pointer',
                        boxShadow: loadingSubmit ? 'none' : '0 4px 8.9px rgba(227,16,24,0.25)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                        transition: 'background 200ms',
                    }}>
                        {loadingSubmit ? (
                            <>
                                <span style={{
                                    width: 16, height: 16, borderRadius: '50%',
                                    border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff',
                                    animation: 'spin 700ms linear infinite',
                                }} />
                                Enviando...
                            </>
                        ) : (
                            <>
                                <Icon name="calendar" size={18} color="#fff" stroke={2.2} />
                                Agendar avaliação gratuita
                            </>
                        )}
                    </button>
                )}
                {step === 2 && (
                    <div style={{
                        background: 'rgba(12,113,16,0.08)', borderRadius: 8,
                        padding: '10px 14px', fontSize: 12, color: '#0C7110',
                        fontFamily: "'Roboto',sans-serif", display: 'flex', alignItems: 'center', gap: 8,
                    }}>
                        <Icon name="check" size={14} color="#0C7110" stroke={2.6} />
                        Você receberá uma confirmação por WhatsApp com todos os detalhes.
                    </div>
                )}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    {step > 1 ? (
                        <button onClick={() => setStep(s => s - 1)} disabled={loadingSubmit} style={{
                            background: 'none', border: 'none', color: '#5B5B5B',
                            fontFamily: "'Roboto',sans-serif", fontSize: 12,
                            cursor: loadingSubmit ? 'not-allowed' : 'pointer',
                            opacity: loadingSubmit ? 0.5 : 1,
                            display: 'flex', alignItems: 'center', gap: 4,
                        }}>
                            <Icon name="arrowLeft" size={12} color="#5B5B5B" />
                            Voltar
                        </button>
                    ) : <span />}
                    <span style={{
                        display: 'inline-flex', alignItems: 'center', gap: 5,
                        fontFamily: "'Roboto',sans-serif", fontSize: 11, color: '#919191',
                    }}>
                        <Icon name="lock" size={11} color="#919191" stroke={2} />
                        Seus dados estão seguros
                    </span>
                </div>
            </div>
        </div>
    );
}

Object.assign(window, { HeroForm });