import { useState } from 'react'
import { Link } from 'react-router-dom'
import Footer from '../components/Footer'
import Navbar from '../components/Navbar'
import { submitJobApplication, type JobApplicationPayload } from '../services/jobs'

const ROLE_OPTIONS = [
    'Corretor(a)',
    'Assistente Administrativo',
    'Estagiário(a)',
    'Outro',
]

const BENEFITS = [
    {
        icon: (
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
            </svg>
        ),
        title: 'Equipe colaborativa',
        description: 'Trabalhe com profissionais experientes em um ambiente de apoio mútuo e crescimento constante.',
    },
    {
        icon: (
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
            </svg>
        ),
        title: 'Crescimento real',
        description: 'Plano de carreira claro, metas atingíveis e reconhecimento de resultados individuais e coletivos.',
    },
    {
        icon: (
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="10" /><path d="M12 8v4l3 3" />
            </svg>
        ),
        title: 'Flexibilidade',
        description: 'Horários adaptáveis, comissionamento competitivo e autonomia para gerenciar sua agenda.',
    },
]

interface FormState {
    name: string
    email: string
    phone: string
    role_interest: string
    message: string
    file_name: string
    privacy: boolean
}

const INITIAL: FormState = {
    name: '',
    email: '',
    phone: '',
    role_interest: '',
    message: '',
    file_name: '',
    privacy: false,
}

function InputField({
    label, name, type = 'text', required = false, value, onChange, placeholder,
}: {
    label: string
    name: string
    type?: string
    required?: boolean
    value: string
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
    placeholder?: string
}) {
    return (
        <div className="flex flex-col gap-1.5">
            <label htmlFor={name} className="text-sm font-medium text-textSecondary">
                {label}{required && <span className="text-red-400 ml-0.5">*</span>}
            </label>
            <input
                id={name}
                name={name}
                type={type}
                required={required}
                value={value}
                onChange={onChange}
                placeholder={placeholder}
                className="h-10 rounded-lg border border-borderSubtle bg-surface px-3 text-sm text-textPrimary placeholder:text-textQuaternary focus:outline-none focus:ring-2 focus:ring-[#5e6ad2]/40 focus:border-[#5e6ad2] transition"
            />
        </div>
    )
}

export default function JobsPage() {
    const [form, setForm] = useState<FormState>(INITIAL)
    const [loading, setLoading] = useState(false)
    const [success, setSuccess] = useState(false)
    const [error, setError] = useState<string | null>(null)

    function handleChange(
        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
    ) {
        const { name, value, type } = e.target
        if (type === 'checkbox') {
            setForm((prev) => ({ ...prev, [name]: (e.target as HTMLInputElement).checked }))
        } else {
            setForm((prev) => ({ ...prev, [name]: value }))
        }
    }

    async function handleSubmit(e: React.FormEvent) {
        e.preventDefault()
        if (!form.privacy) {
            setError('Você precisa aceitar a política de privacidade.')
            return
        }
        setLoading(true)
        setError(null)
        try {
            const payload: JobApplicationPayload = {
                name: form.name,
                email: form.email,
                phone: form.phone || undefined,
                role_interest: form.role_interest,
                message: form.message,
                file_name: form.file_name || undefined,
            }
            await submitJobApplication(payload)
            setSuccess(true)
            setForm(INITIAL)
        } catch {
            setError('Não foi possível enviar sua candidatura. Tente novamente.')
        } finally {
            setLoading(false)
        }
    }

    return (
        <>
            <Navbar />
            <main className="min-h-screen bg-canvas pt-14">

                {/* Hero */}
                <section className="bg-panel border-b border-borderSubtle">
                    <div className="max-w-[760px] mx-auto px-6 py-16 text-center">
                        <span className="inline-flex items-center gap-1.5 rounded-full border border-[#5e6ad2]/30 bg-[#5e6ad2]/10 px-3 py-1 text-xs font-medium text-[#5e6ad2] mb-5">
                            Oportunidades
                        </span>
                        <h1 className="text-3xl sm:text-4xl font-semibold text-textPrimary tracking-tight mb-4">
                            Trabalhe Conosco
                        </h1>
                        <p className="text-base text-textSecondary leading-relaxed max-w-[540px] mx-auto">
                            Faça parte de um time apaixonado pelo mercado imobiliário. Envie seu currículo e conte-nos por que você quer crescer com a gente.
                        </p>
                    </div>
                </section>

                {/* Benefícios */}
                <section className="max-w-[1000px] mx-auto px-6 py-14">
                    <h2 className="text-lg font-semibold text-textPrimary mb-8 text-center">
                        Por que trabalhar conosco?
                    </h2>
                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
                        {BENEFITS.map((b) => (
                            <div key={b.title} className="rounded-xl border border-borderSubtle bg-panel p-6 flex flex-col gap-3">
                                <span className="text-[#5e6ad2]">{b.icon}</span>
                                <h3 className="text-sm font-semibold text-textPrimary">{b.title}</h3>
                                <p className="text-sm text-textTertiary leading-relaxed">{b.description}</p>
                            </div>
                        ))}
                    </div>
                </section>

                {/* Formulário */}
                <section className="max-w-[680px] mx-auto px-6 pb-20">
                    <div className="rounded-xl border border-borderSubtle bg-panel p-8">
                        <h2 className="text-lg font-semibold text-textPrimary mb-1">
                            Envie sua candidatura
                        </h2>
                        <p className="text-sm text-textTertiary mb-6">
                            Preencha os campos abaixo e entraremos em contato.
                        </p>

                        {success ? (
                            <div className="rounded-lg border border-green-500/30 bg-green-500/10 p-6 text-center">
                                <svg className="mx-auto mb-3 text-green-400" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" />
                                </svg>
                                <p className="text-sm font-medium text-green-400">Candidatura enviada com sucesso!</p>
                                <p className="text-xs text-textTertiary mt-1">Entraremos em contato em breve.</p>
                                <button
                                    onClick={() => setSuccess(false)}
                                    className="mt-4 text-xs text-[#5e6ad2] hover:underline"
                                >
                                    Enviar outra candidatura
                                </button>
                            </div>
                        ) : (
                            <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
                                {/* Dados pessoais */}
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    <InputField
                                        label="Nome completo"
                                        name="name"
                                        required
                                        value={form.name}
                                        onChange={handleChange}
                                        placeholder="Seu nome"
                                    />
                                    <InputField
                                        label="E-mail"
                                        name="email"
                                        type="email"
                                        required
                                        value={form.email}
                                        onChange={handleChange}
                                        placeholder="seu@email.com"
                                    />
                                    <InputField
                                        label="Telefone"
                                        name="phone"
                                        type="tel"
                                        value={form.phone}
                                        onChange={handleChange}
                                        placeholder="(11) 99999-9999"
                                    />
                                    {/* Cargo de interesse */}
                                    <div className="flex flex-col gap-1.5">
                                        <label htmlFor="role_interest" className="text-sm font-medium text-textSecondary">
                                            Cargo de interesse<span className="text-red-400 ml-0.5">*</span>
                                        </label>
                                        <select
                                            id="role_interest"
                                            name="role_interest"
                                            required
                                            value={form.role_interest}
                                            onChange={handleChange}
                                            className="h-10 rounded-lg border border-borderSubtle bg-surface px-3 text-sm text-textPrimary focus:outline-none focus:ring-2 focus:ring-[#5e6ad2]/40 focus:border-[#5e6ad2] transition"
                                        >
                                            <option value="">Selecione…</option>
                                            {ROLE_OPTIONS.map((r) => (
                                                <option key={r} value={r}>{r}</option>
                                            ))}
                                        </select>
                                    </div>
                                </div>

                                {/* Nome do arquivo */}
                                <InputField
                                    label="Nome do arquivo do currículo (PDF)"
                                    name="file_name"
                                    value={form.file_name}
                                    onChange={handleChange}
                                    placeholder="curriculo_joao_silva.pdf"
                                />

                                {/* Mensagem */}
                                <div className="flex flex-col gap-1.5">
                                    <label htmlFor="message" className="text-sm font-medium text-textSecondary">
                                        Apresentação<span className="text-red-400 ml-0.5">*</span>
                                    </label>
                                    <textarea
                                        id="message"
                                        name="message"
                                        required
                                        rows={5}
                                        maxLength={5000}
                                        value={form.message}
                                        onChange={handleChange}
                                        placeholder="Fale um pouco sobre você, sua experiência e por que quer trabalhar conosco…"
                                        className="rounded-lg border border-borderSubtle bg-surface px-3 py-2.5 text-sm text-textPrimary placeholder:text-textQuaternary focus:outline-none focus:ring-2 focus:ring-[#5e6ad2]/40 focus:border-[#5e6ad2] transition resize-none"
                                    />
                                    <span className="text-xs text-textQuaternary text-right">
                                        {form.message.length}/5000
                                    </span>
                                </div>

                                {/* Política */}
                                <label className="flex items-start gap-2.5 cursor-pointer">
                                    <input
                                        type="checkbox"
                                        name="privacy"
                                        checked={form.privacy}
                                        onChange={handleChange}
                                        className="mt-0.5 h-4 w-4 rounded border-borderSubtle accent-[#5e6ad2]"
                                    />
                                    <span className="text-xs text-textTertiary leading-relaxed">
                                        Li e aceito a{' '}
                                        <Link to="/politica-de-privacidade" className="text-[#5e6ad2] hover:underline" target="_blank" rel="noopener noreferrer">
                                            Política de Privacidade
                                        </Link>
                                        .
                                    </span>
                                </label>

                                {error && (
                                    <p className="text-sm text-red-400">{error}</p>
                                )}

                                <button
                                    type="submit"
                                    disabled={loading}
                                    className="w-full rounded-lg bg-[#5e6ad2] py-2.5 text-sm font-semibold text-white hover:bg-[#6872d8] transition disabled:opacity-60 disabled:cursor-not-allowed"
                                >
                                    {loading ? 'Enviando…' : 'ENVIAR CANDIDATURA'}
                                </button>
                            </form>
                        )}
                    </div>
                </section>

            </main>
            <Footer />
        </>
    )
}