"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { useThemeColors } from "@/context/ThemeContext";
import { api } from "@/services/axios";
import { AxiosError } from "axios";
import Link from "next/link";
import {
    Building2,
    FileText,
    Mail,
    Briefcase,
    User,
    Lock,
    ArrowLeft,
    AlertCircle,
    CheckCircle,
    Loader2,
    ChevronRight,
    Phone,
    MapPin,
    Upload,
    X,
    ChevronLeft,
    UserPlus,
    ArrowRight,
    Globe,
    Landmark,
    CreditCard,
    Database,
    Info,
    Server,
    Users,
} from "lucide-react";

// --- Tipagem local do tema ---
interface ThemeColors {
    primary: string;
    secondary: string;
    background: string;
    card: string;
    text: string;
    textSecondary: string;
    border: string;
    danger: string;
    hover?: string;
}

// --- Tipagem do formulário ---
interface FormData {
    nome: string;
    nif: string;
    email: string;
    telefone: string;
    endereco: string;
    regime_fiscal: "simplificado" | "geral";
    sujeito_iva: boolean;
    nome_banco?: string | null;
    numero_conta?: string | null;
    iban?: string | null;
    logo: string;
    subdomain: string;
    modo: "colectivo" | "singular"; //    NOVO CAMPO
    admin_name: string;
    admin_email: string;
    admin_password: string;
}

// --- Componente de Input ---
interface InputFieldProps {
    name: string;
    icon: React.ElementType;
    type?: string;
    placeholder: string;
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
    colors: ThemeColors;
    required?: boolean;
    isSelect?: boolean;
    options?: { value: string; label: string }[];
    prefix?: string;
    maxLength?: number;
    disabled?: boolean;
}

const InputField: React.FC<InputFieldProps> = ({
    name,
    icon: Icon,
    type = "text",
    placeholder,
    value,
    onChange,
    colors,
    required = false,
    isSelect = false,
    options = [],
    prefix,
    maxLength,
    disabled = false,
}) => {
    const [isFocused, setIsFocused] = useState(false);
    return (
        <div className="relative">
            <Icon
                size={18}
                className="absolute left-3 top-1/2 -translate-y-1/2"
                style={{ color: isFocused ? colors.primary : colors.textSecondary }}
            />
            {prefix && (
                <div className="absolute left-3 top-1/2 -translate-y-1/2 text-sm" style={{ color: colors.textSecondary }}>
                    {prefix}
                </div>
            )}
            {isSelect ? (
                <select
                    name={name}
                    value={value}
                    onChange={onChange}
                    onFocus={() => setIsFocused(true)}
                    onBlur={() => setIsFocused(false)}
                    required={required}
                    disabled={disabled}
                    className="w-full pl-10 pr-4 py-3 border outline-none text-sm transition-colors appearance-none"
                    style={{
                        backgroundColor: disabled ? `${colors.border}40` : colors.card,
                        borderColor: isFocused ? colors.primary : colors.border,
                        color: colors.text,
                        cursor: disabled ? 'not-allowed' : 'default',
                    }}
                >
                    <option value="" disabled>{placeholder}</option>
                    {options.map((opt) => (
                        <option key={opt.value} value={opt.value}>{opt.label}</option>
                    ))}
                </select>
            ) : (
                <input
                    type={type}
                    name={name}
                    placeholder={placeholder}
                    value={value}
                    onChange={onChange}
                    onFocus={() => setIsFocused(true)}
                    onBlur={() => setIsFocused(false)}
                    required={required}
                    disabled={disabled}
                    className="w-full pl-10 pr-4 py-3 border outline-none text-sm transition-colors"
                    style={{
                        backgroundColor: disabled ? `${colors.border}40` : colors.card,
                        borderColor: isFocused ? colors.primary : colors.border,
                        color: colors.text,
                        cursor: disabled ? 'not-allowed' : 'default',
                    }}
                    maxLength={maxLength}
                />
            )}
        </div>
    );
};

// --- Componente de informação do modo ---
interface ModoInfoProps {
    modo: "colectivo" | "singular";
    colors: ThemeColors;
}

const ModoInfo: React.FC<ModoInfoProps> = ({ modo, colors }) => {
    if (modo === "colectivo") {
        return (
            <div className="flex items-start gap-3 p-4 rounded-lg mt-2" style={{ backgroundColor: `${colors.primary}10`, border: `1px solid ${colors.primary}30` }}>
                <Users size={20} style={{ color: colors.primary }} />
                <div>
                    <p className="text-sm font-medium" style={{ color: colors.primary }}>Modo Colectivo (Multi-Tenant)</p>
                    <p className="text-xs mt-1" style={{ color: colors.textSecondary }}>
                        Todas as empresas partilham a mesma base de dados. Os dados são isolados por <strong>tenant_id</strong>.
                        Ideal para empresas que pretendem uma gestão centralizada com custos reduzidos.
                    </p>
                </div>
            </div>
        );
    }

    return (
        <div className="flex items-start gap-3 p-4 rounded-lg mt-2" style={{ backgroundColor: `${colors.secondary}10`, border: `1px solid ${colors.secondary}30` }}>
            <Server size={20} style={{ color: colors.secondary }} />
            <div>
                <p className="text-sm font-medium" style={{ color: colors.secondary }}>Modo Singular (Single-Tenant)</p>
                <p className="text-xs mt-1" style={{ color: colors.textSecondary }}>
                    Cada empresa tem a sua própria base de dados dedicada. Isolamento total e maior performance.
                    Ideal para empresas que necessitam de isolamento rigoroso de dados.
                </p>
            </div>
        </div>
    );
};

export default function RegisterCompanyPage() {
    const router = useRouter();
    const colors = useThemeColors() as ThemeColors;

    const [step, setStep] = useState(1);
    const [form, setForm] = useState<FormData>({
        nome: "",
        nif: "",
        email: "",
        telefone: "",
        endereco: "",
        regime_fiscal: "geral",
        sujeito_iva: true,
        nome_banco: "",
        numero_conta: "",
        iban: "",
        logo: "",
        subdomain: "",
        modo: "colectivo", //    VALOR PADRÃO
        admin_name: "",
        admin_email: "",
        admin_password: "",
    });

    const [logoFile, setLogoFile] = useState<File | null>(null);
    const [logoPreview, setLogoPreview] = useState<string | null>(null);
    const [uploadingLogo, setUploadingLogo] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");
    const [success, setSuccess] = useState(false);

    const handleChange = (
        e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
    ) => {
        const value =
            e.target.type === "checkbox"
                ? (e.target as HTMLInputElement).checked
                : e.target.value;
        setForm({ ...form, [e.target.name]: value });
    };

    const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;
        if (!file.type.startsWith("image/")) {
            setError("Por favor, selecione um arquivo de imagem válido.");
            return;
        }
        if (file.size > 2 * 1024 * 1024) {
            setError("A imagem deve ter no máximo 2MB.");
            return;
        }
        setLogoFile(file);
        setLogoPreview(URL.createObjectURL(file));
    };

    const removeLogo = () => {
        setLogoFile(null);
        if (logoPreview) {
            URL.revokeObjectURL(logoPreview);
            setLogoPreview(null);
        }
    };

    const refreshCsrf = async () => {
        try {
            await api.get("/sanctum/csrf-cookie");
            await new Promise((resolve) => setTimeout(resolve, 100));
        } catch (error) {
            console.error("[CSRF] Erro:", error);
        }
    };

    const uploadLogo = async (file: File): Promise<string> => {
        const uploadFormData = new FormData();
        uploadFormData.append("logo", file);
        await refreshCsrf();
        const response = await api.post("/api/upload-temp-logo", uploadFormData, {
            headers: { "Content-Type": "multipart/form-data" },
        });
        if (response.data.success) return response.data.logo_url;
        throw new Error(response.data.message || "Falha no upload");
    };

    //    VALIDAÇÃO DO NIF (apenas 10 dígitos numéricos)
    const validateNIF = (nif: string): boolean => {
        // Remove espaços e caracteres especiais
        const clean = nif.replace(/\D/g, '');
        // Verifica se tem exatamente 10 dígitos
        if (clean.length !== 10) {
            setError("NIF deve ter exatamente 10 dígitos numéricos.");
            return false;
        }
        return true;
    };

    //    VALIDAÇÃO DO SUBDOMÍNIO
    const validateSubdomain = (subdomain: string): boolean => {
        const regex = /^[a-z0-9][a-z0-9-]*[a-z0-9]$/;
        if (!regex.test(subdomain)) {
            setError("Subdomínio inválido. Use apenas letras minúsculas, números e hífen (não pode começar ou terminar com hífen).");
            return false;
        }
        return true;
    };

    const validateStep1 = (): boolean => {
        setError("");

        if (!form.nome.trim()) {
            setError("Nome da empresa é obrigatório");
            return false;
        }

        //    VALIDAÇÃO DO NIF
        if (!form.nif.trim()) {
            setError("NIF é obrigatório");
            return false;
        }
        const nifClean = form.nif.replace(/\D/g, '');
        if (nifClean.length !== 10) {
            setError("NIF deve ter exatamente 10 dígitos numéricos.");
            return false;
        }

        if (!form.email.trim()) {
            setError("Email da empresa é obrigatório");
            return false;
        }
        if (!form.telefone.trim()) {
            setError("Telefone é obrigatório");
            return false;
        }
        if (!form.endereco.trim()) {
            setError("Endereço é obrigatório");
            return false;
        }
        if (!form.subdomain.trim()) {
            setError("Subdomínio é obrigatório");
            return false;
        }

        //    VALIDAÇÃO DO SUBDOMÍNIO
        const subdomainRegex = /^[a-z0-9][a-z0-9-]*[a-z0-9]$/;
        if (!subdomainRegex.test(form.subdomain)) {
            setError("Subdomínio inválido. Use apenas letras minúsculas, números e hífen (não pode começar ou terminar com hífen).");
            return false;
        }

        return true;
    };

    const handleNextStep = () => {
        if (validateStep1()) setStep(2);
    };

    const handlePrevStep = () => {
        setStep(1);
        setError("");
    };

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

        setError("");

        if (!form.admin_name.trim()) {
            setError("Nome do administrador é obrigatório");
            return;
        }
        if (!form.admin_email.trim()) {
            setError("Email do administrador é obrigatório");
            return;
        }
        if (!form.admin_password || form.admin_password.length < 8) {
            setError("Senha deve ter no mínimo 8 caracteres");
            return;
        }

        setLoading(true);
        setError("");
        setSuccess(false);

        try {
            await refreshCsrf();

            let logoUrl = "";
            if (logoFile) {
                setUploadingLogo(true);
                logoUrl = await uploadLogo(logoFile);
                setUploadingLogo(false);
            }

            const submitData = {
                nome: form.nome,
                nif: form.nif.replace(/\D/g, ''), //    Garante apenas números
                email: form.email,
                telefone: form.telefone,
                endereco: form.endereco,
                regime_fiscal: form.regime_fiscal,
                sujeito_iva: form.sujeito_iva,
                nome_banco: form.nome_banco,
                numero_conta: form.numero_conta,
                iban: form.iban,
                logo: logoUrl || "images/3.png",
                subdomain: form.subdomain.toLowerCase().trim(), //    Garante minúsculo
                modo: form.modo, //    NOVO CAMPO
                admin_name: form.admin_name,
                admin_email: form.admin_email,
                admin_password: form.admin_password,
            };

            await api.post("/api/empresas", submitData);
            setSuccess(true);
            setTimeout(() => router.push("/login"), 2000);
        } catch (err: unknown) {
            let errorMessage = "Erro ao criar empresa. Verifique os dados e tente novamente.";
            if (err instanceof AxiosError && err.response?.data?.message) {
                errorMessage = err.response.data.message;
            } else if (err instanceof Error) {
                errorMessage = err.message;
            }
            setError(errorMessage);
        } finally {
            setLoading(false);
            setUploadingLogo(false);
        }
    };

    const regimeOptions = [
        { value: "simplificado", label: "Regime Simplificado" },
        { value: "geral", label: "Regime Geral" },
    ];

    //    OPÇÕES PARA O MODO
    const modoOptions = [
        { value: "colectivo", label: "Colectivo (Multi-Tenant um banco de dados)" },
        { value: "singular", label: "Singular (Single-Tenant empresa banco )" },
    ];

    return (
        <div className="min-h-screen py-12 px-4" style={{ backgroundColor: colors.background }}>
            <div className="max-w-4xl mx-auto">
                <div className="flex items-center justify-between mb-8">
                    <div className="flex items-center gap-4">
                        <button onClick={() => router.back()} className="p-2 transition-opacity hover:opacity-70" style={{ color: colors.primary }}>
                            <ArrowLeft size={24} />
                        </button>
                        <div>
                            <h1 className="text-3xl font-bold" style={{ color: colors.secondary }}>
                                Criar nova empresa
                            </h1>
                            <p className="text-base mt-2" style={{ color: colors.textSecondary }}>
                                Preencha os dados abaixo para começar a usar o FaturaJá
                            </p>
                        </div>
                    </div>
                </div>

                {/*    STEP INDICATOR */}
                <div className="flex mb-8 border-b" style={{ borderColor: colors.border }}>
                    <div className="flex-1 py-3 text-center">
                        <div className={`inline-flex items-center gap-2 text-sm font-medium ${step === 1 ? "opacity-100" : "opacity-50"}`} style={{ color: step === 1 ? colors.primary : colors.text }}>
                            <span className="w-6 h-6 flex items-center justify-center text-xs rounded-full" style={{ backgroundColor: step === 1 ? colors.primary : colors.border, color: step === 1 ? "white" : colors.text }}>
                                1
                            </span>
                            Dados da Empresa
                        </div>
                    </div>
                    <div className="flex-1 py-3 text-center">
                        <div className={`inline-flex items-center gap-2 text-sm font-medium ${step === 2 ? "opacity-100" : "opacity-50"}`} style={{ color: step === 2 ? colors.primary : colors.text }}>
                            <span className="w-6 h-6 flex items-center justify-center text-xs rounded-full" style={{ backgroundColor: step === 2 ? colors.primary : colors.border, color: step === 2 ? "white" : colors.text }}>
                                2
                            </span>
                            Administrador do sistema
                        </div>
                    </div>
                </div>

                <div className="border shadow-sm" style={{ backgroundColor: colors.card, borderColor: colors.border }}>
                    <form onSubmit={handleSubmit}>
                        <div className="p-8">
                            {error && (
                                <div className="flex items-center gap-3 p-4 mb-6 border-l-4" style={{ backgroundColor: `${colors.danger}10`, borderColor: colors.danger }}>
                                    <AlertCircle size={20} style={{ color: colors.danger }} />
                                    <span className="text-sm" style={{ color: colors.danger }}>{error}</span>
                                </div>
                            )}
                            {success && (
                                <div className="flex items-center gap-3 p-4 mb-6 border-l-4" style={{ backgroundColor: `${colors.primary}10`, borderColor: colors.primary }}>
                                    <CheckCircle size={20} style={{ color: colors.primary }} />
                                    <span className="text-sm" style={{ color: colors.primary }}>Empresa criada com sucesso! Redirecionando para o login...</span>
                                </div>
                            )}

                            {step === 1 && (
                                <div className="space-y-6">
                                    {/*    LOGO */}
                                    <div>
                                        <label className="block text-sm font-medium mb-2" style={{ color: colors.text }}>Logo da Empresa</label>
                                        <div className="flex items-center gap-4">
                                            {logoPreview ? (
                                                <div className="relative">
                                                    <Image src={logoPreview} alt="Logo" width={64} height={64} className="object-cover border" style={{ borderColor: colors.border }} />
                                                    <button type="button" onClick={removeLogo} className="absolute -top-2 -right-2 p-1 text-white" style={{ background: colors.secondary }}>
                                                        <X size={14} />
                                                    </button>
                                                </div>
                                            ) : (
                                                <label className="flex flex-col items-center justify-center w-16 h-16 border-2 border-dashed cursor-pointer hover:border-primary" style={{ borderColor: colors.border }}>
                                                    <Upload size={20} style={{ color: colors.text }} />
                                                    <span className="text-xs mt-1" style={{ color: colors.textSecondary }}>Upload</span>
                                                    <input type="file" accept="image/*" onChange={handleLogoChange} className="hidden" />
                                                </label>
                                            )}
                                            <div className="flex items-center gap-4">
                                                <div className="w-px h-10" style={{ backgroundColor: colors.border }} />
                                                <span className="text-xs" style={{ color: colors.textSecondary }}>Adicione a logo da tua empresa (JPG/PNG até 2MB)</span>
                                            </div>
                                        </div>
                                    </div>

                                    {/*    CAMPOS DA EMPRESA */}
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                                        <InputField name="nome" icon={Building2} placeholder="Nome da empresa *" value={form.nome} onChange={handleChange} colors={colors} required />
                                        
                                        {/*    NIF COM VALIDAÇÃO DE 10 DÍGITOS */}
                                        <InputField 
                                            name="nif" 
                                            icon={FileText} 
                                            placeholder="NIF (10 dígitos) *" 
                                            value={form.nif} 
                                            onChange={(e) => {
                                                const raw = e.target.value.replace(/\D/g, '').slice(0, 10);
                                                setForm({ ...form, nif: raw });
                                            }} 
                                            colors={colors} 
                                            required 
                                            maxLength={10}
                                        />
                                        
                                        <InputField name="email" icon={Mail} type="email" placeholder="Email da empresa *" value={form.email} onChange={handleChange} colors={colors} required />
                                        <InputField name="telefone" icon={Phone} placeholder="Telefone *" value={form.telefone} onChange={handleChange} colors={colors} required />
                                        
                                        <InputField name="nome_banco" icon={Landmark} placeholder="Nome do Banco" value={form.nome_banco ?? ""} onChange={handleChange} colors={colors} />
                                        <InputField name="numero_conta" icon={CreditCard} placeholder="Número da Conta" value={form.numero_conta ?? ""} onChange={(e) => {  const raw = e.target.value.replace(/\D/g, '').slice(0, 11); setForm({ ...form, numero_conta: raw });}} colors={colors}  maxLength={11}/>
                                        <InputField name="iban" icon={Globe} placeholder="Digite os 21 dígitos do IBAN" value={form.iban?.replace(/^AO06/, "") ?? ""} onChange={(e) => { const raw = e.target.value.replace(/\D/g, '').slice(0, 21); setForm({ ...form, iban: `AO06${raw}` }); }} colors={colors} maxLength={21} />
                                        <InputField name="subdomain" icon={Globe} placeholder="Subdomínio * (ex: minhaempresa)" value={form.subdomain} onChange={handleChange} colors={colors} required />
                                        <div className="md:col-span-2">
                                            <InputField name="endereco" icon={MapPin} placeholder="Endereço completo *" value={form.endereco} onChange={handleChange} colors={colors} required />
                                        </div>
                                    </div>

                                    {/*    SELEÇÃO DO MODO */}
                                    <div className="mt-6">
                                        <label className="block text-sm font-medium mb-2" style={{ color: colors.text }}>
                                            <Database size={16} className="inline mr-2" style={{ color: colors.primary }} />
                                            Modo de Funcionamento *
                                        </label>
                                        <InputField 
                                            name="modo" 
                                            icon={Database} 
                                            placeholder="Selecione o modo" 
                                            value={form.modo} 
                                            onChange={handleChange} 
                                            colors={colors} 
                                            isSelect 
                                            options={modoOptions} 
                                            required 
                                        />
                                        
                                        {/*    INFORMAÇÃO DO MODO SELECIONADO */}
                                        <ModoInfo modo={form.modo} colors={colors} />
                                    </div>

                                    {/*    REGIME FISCAL E IVA */}
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mt-4">
                                        <InputField name="regime_fiscal" icon={Briefcase} placeholder="Regime Fiscal" value={form.regime_fiscal} onChange={handleChange} colors={colors} isSelect options={regimeOptions} />
                                        <label className="flex items-center gap-3 py-3">
                                            <input type="checkbox" name="sujeito_iva" checked={form.sujeito_iva} onChange={handleChange} className="w-5 h-5" style={{ accentColor: colors.primary }} />
                                            <span className="text-sm" style={{ color: colors.text }}>Sujeito a IVA</span>
                                        </label>
                                    </div>
                                </div>
                            )}

                            {step === 2 && (
                                <div className="space-y-6">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                                        <InputField name="admin_name" icon={User} placeholder="Nome completo *" value={form.admin_name} onChange={handleChange} colors={colors} required />
                                        <InputField name="admin_email" icon={Mail} type="email" placeholder="Email *" value={form.admin_email} onChange={handleChange} colors={colors} required />
                                        <InputField name="admin_password" icon={Lock} type="password" placeholder="Senha * (mínimo 8 caracteres)" value={form.admin_password} onChange={handleChange} colors={colors} required />
                                    </div>
                                </div>
                            )}
                        </div>

                        <div className="flex justify-between items-center p-6 border-t" style={{ borderColor: colors.border }}>
                            <Link href="/login" className="group inline-flex items-center gap-2 transition-colors font-medium text-sm" style={{ color: colors.secondary }}>
                                <UserPlus size={18} /> Já tenho conta <ArrowRight size={16} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                            </Link>
                            <div className="flex gap-4">
                                {step === 2 && (
                                    <button type="button" onClick={handlePrevStep} className="flex items-center gap-2 px-6 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" style={{ color: colors.textSecondary }}>
                                        <ChevronLeft size={18} /> Voltar
                                    </button>
                                )}
                                {step === 1 ? (
                                    <button type="button" onClick={handleNextStep} className="flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-80" style={{ backgroundColor: colors.primary }}>
                                        Próximo <ChevronRight size={18} />
                                    </button>
                                ) : (
                                    <button type="submit" disabled={loading || uploadingLogo} className="flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-80 disabled:opacity-50" style={{ backgroundColor: colors.primary }}>
                                        {loading && <Loader2 size={18} className="animate-spin" />}
                                        {loading ? "Criando empresa..." : "Criar empresa"}
                                    </button>
                                )}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}