'use client';

import React, { useState, useEffect, useRef } from 'react';
import {
    User,
    Building,
    MapPin,
    Camera,
    Trash2,
    Edit2,
    Check,
    X,
    ChevronDown,
    LogOut,
    ArrowRight,
    UploadCloud,
    Phone,
    Save
} from 'lucide-react';
import { useRouter } from 'next/navigation';
import BackgroundGradients from '@/components/BackgroundGradients';
import Sidebar from '@/components/Sidebar';
import staticCopy from '@/i18n/staticCopy.json';
import { getStoredLocale, getStoredLocaleRaw, LOCALE_CHANGE_EVENT, primaryLocaleForStaticCopy } from '@/i18n/localeSwitcher';

interface UserData {
    image_url?: string;
    company_business_name: string;
    company_legal_name: string;
    cif_nif: string;
    company_phone: string;
    first_name: string;
    last_name: string;
    address: string;
    city: string;
    state_province: string;
    postcode: string;
    country: string;
    responsible_person_name: string;
    responsible_person_phone: string;
    environmental_role: string;
    has_nima: boolean;
    nima_number: string;
    nima_document_url: string;
    has_organic_auth: boolean;
    organic_auth_document_url: string;
}

interface ProfileFieldProps {
    label: string;
    icon?: React.ReactNode;
    isEditing: boolean;
    children: React.ReactNode;
    className?: string;
    required?: boolean;
}

const ErrorMessage = ({ message }: { message: string }) => (
    <div className="mb-4 p-3 rounded-[5px] bg-red-50 border border-red-200 text-red-700 text-[14px] font-outfit">
        {message}
    </div>
);

const ProfileField = ({ label, icon, isEditing, children, className = "mb-[21px]", required }: ProfileFieldProps) => (
    <div className={className}>
        <label className="block text-[18px] md:text-[20px] font-medium text-gray-900 mb-[9px]">
            {label} {required ? <span className="text-[#FF0000]">*</span> : null}
        </label>

        <div className="relative group w-full flex items-center">
            {children}

            {icon && (
                <div className={`absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none transition-colors duration-300 ${isEditing ? 'text-[#053F31]' : 'text-gray-400'}`}>
                    {icon}
                </div>
            )}

            <div className={`absolute bottom-0 left-[30px] h-[3px] bg-[#053F31] z-10 transition-all duration-300 ${isEditing ? 'w-[80px] brightness-110' : 'w-[60px]'}`}></div>
        </div>
    </div>
);

const MARKETPLACE_ZIGZAG_COUNT = 3;

const cleanFilename = (filename: string | null | undefined): string => {
    if (!filename) return "";
    const base = filename.split('/').pop() || "";
    // Remove pattern: private-1234567890123- or simply 1234567890123-
    return base.replace(/^(private-)?\d{10,15}-/, '');
};

export default function ProfilePage() {
    const router = useRouter();
    const [isEditing, setIsEditing] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [errorMsg, setErrorMsg] = useState("");
    const [imagePreviewUrl, setImagePreviewUrl] = useState("");
    const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
    const [isProfileImageRemoved, setIsProfileImageRemoved] = useState(false);
    const profileImageInputRef = useRef<HTMLInputElement | null>(null);
    const nimaDocumentInputRef = useRef<HTMLInputElement | null>(null);
    const organicDocumentInputRef = useRef<HTMLInputElement | null>(null);
    
    const [selectedNimaFile, setSelectedNimaFile] = useState<File | null>(null);
    const [selectedOrganicFile, setSelectedOrganicFile] = useState<File | null>(null);

    const [companyRoleOptions, setCompanyRoleOptions] = useState<
        { id: string; label: string; value: string }[]
    >([]);

    const [formData, setFormData] = useState<UserData>({
        image_url: "",
        company_business_name: "",
        company_legal_name: "",
        cif_nif: "",
        company_phone: "",
        first_name: "",
        last_name: "",
        address: "",
        city: "",
        state_province: "",
        postcode: "",
        country: "",
        responsible_person_name: "",
        responsible_person_phone: "",
        environmental_role: "",
        has_nima: false,
        nima_number: "",
        nima_document_url: "",
        has_organic_auth: false,
        organic_auth_document_url: ""
    });

    const [uiLocale, setUiLocale] = useState(getStoredLocale);

    useEffect(() => {
        const sync = () => setUiLocale(getStoredLocale());
        sync();
        if (typeof window === "undefined") return;
        window.addEventListener(LOCALE_CHANGE_EVENT, sync);
        return () => window.removeEventListener(LOCALE_CHANGE_EVENT, sync);
    }, []);

    useEffect(() => {
        let cancelled = false;
        const base = (process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL ?? "").replace(/\/$/, "");
        if (!base) return;

        fetch(`${base}/store/form-options`, {
            method: "GET",
            headers: {
                "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
                "x-medusa-locale": (getStoredLocaleRaw() ?? getStoredLocale()).trim(),
            },
            cache: "no-store",
        })
            .then((r) => (r.ok ? r.json() : null))
            .then((json: unknown) => {
                if (cancelled || !json || typeof json !== "object") return;
                const forms = (json as Record<string, unknown>).forms;
                if (!forms || typeof forms !== "object") return;
                const block =
                    (forms as Record<string, unknown>)["Waste Registration"] ??
                    (forms as Record<string, unknown>)["waste registration"];
                if (!block || typeof block !== "object") return;
                const raw = (block as Record<string, unknown>).company_role;
                if (!Array.isArray(raw)) return;

                const mapped = raw
                    .map((item: unknown) => {
                        const o = item as Record<string, unknown>;
                        const value = String(o?.value ?? "").trim();
                        if (!value) return null;
                        return {
                            id: String(o?.id ?? value),
                            label: String(o?.label ?? value).trim() || value,
                            value,
                        };
                    })
                    .filter(Boolean) as { id: string; label: string; value: string }[];

                setCompanyRoleOptions(mapped);
            })
            .catch(() => {});

        return () => {
            cancelled = true;
        };
    }, [uiLocale]);

    useEffect(() => {
        const fetchProfileData = async () => {
            const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL;
            if (!base) return;

            try {
                const headers: Record<string, string> = {
                    "Content-Type": "application/json",
                    "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
                };

                const raw = typeof window !== "undefined" ? localStorage.getItem("currentUser") : null;
                const user = raw ? JSON.parse(raw) : null;
                const authTok = String(user?.token ?? user?.access_token ?? "").trim();
                if (authTok) headers.Authorization = `Bearer ${authTok}`;
                headers["x-medusa-locale"] = (getStoredLocaleRaw() ?? getStoredLocale()).trim();

                const res = await fetch(`${base}/store/customers/profile`, {
                    method: "GET",
                    headers,
                    credentials: "include",
                    cache: "no-store",
                });

                if (res.ok) {
                    const data = await res.json();
                    if (data) {
                        const rawProfile = data.profile || data;
                        const sanitizedProfile = Object.fromEntries(
                            Object.entries(rawProfile).map(([key, val]) => {
                                if (val === null) {
                                    if (key === 'has_nima' || key === 'has_organic_auth') return [key, false];
                                    return [key, ""];
                                }
                                return [key, val];
                            })
                        );
                        setFormData(prev => ({
                            ...prev,
                            ...sanitizedProfile
                        }));
                    }
                }
            } catch (err) {
            }
        };

        fetchProfileData();

        const onLocaleChange = () => {
            void fetchProfileData();
        };
        if (typeof window !== "undefined") {
            window.addEventListener(LOCALE_CHANGE_EVENT, onLocaleChange);
        }

        const storedUser = localStorage.getItem("currentUser");
        if (!storedUser) {
            router.push("/login");
        }

        return () => {
            if (typeof window !== "undefined") {
                window.removeEventListener(LOCALE_CHANGE_EVENT, onLocaleChange);
            }
        };
    }, [router]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        setErrorMsg("");
        const { name, value, type } = e.target;

        if (type === 'radio') {
            setFormData((prev) => ({ ...prev, [name]: value === 'true' }));
        } else {
            setFormData((prev) => ({ ...prev, [name]: value }));
        }
    };

    const handleFileUpload = (field: 'nima_document_url' | 'organic_auth_document_url') => {
        if (!isEditing) return;
        if (field === "nima_document_url") {
            nimaDocumentInputRef.current?.click();
            return;
        }
        organicDocumentInputRef.current?.click();
    };

    const handleDocumentFileChange = (
        field: 'nima_document_url' | 'organic_auth_document_url',
        e: React.ChangeEvent<HTMLInputElement>
    ) => {
        const file = e.target.files?.[0];
        if (!file) return;
        
        if (field === 'nima_document_url') {
            setSelectedNimaFile(file);
        } else {
            setSelectedOrganicFile(file);
        }

        const nextUrl = URL.createObjectURL(file);
        setFormData((prev) => {
            const previous = prev[field];
            if (typeof previous === "string" && previous.startsWith("blob:")) {
                URL.revokeObjectURL(previous);
            }
            return { ...prev, [field]: nextUrl };
        });
        setErrorMsg("");
    };

    const handleProfileImageClick = () => {
        if (!isEditing) return;
        profileImageInputRef.current?.click();
    };

    const handleProfileImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;
        if (!file.type.startsWith("image/")) {
            alert("Please select an image file.");
            return;
        }
        const previewUrl = URL.createObjectURL(file);
        setImagePreviewUrl(previewUrl);
        setSelectedImageFile(file);
        setIsProfileImageRemoved(false);
        setFormData((prev) => ({ ...prev, image_url: file.name }));
    };

    const handleProfileImageDelete = () => {
        if (!isEditing) return;
        if (imagePreviewUrl) {
            URL.revokeObjectURL(imagePreviewUrl);
        }
        setImagePreviewUrl("");
        setSelectedImageFile(null);
        setIsProfileImageRemoved(true);
        setFormData((prev) => ({ ...prev, image_url: "" }));
        if (profileImageInputRef.current) {
            profileImageInputRef.current.value = "";
        }
        setErrorMsg("");
    };

    const handleSave = async () => {
        setIsLoading(true);
        try {
            setErrorMsg("");
            const trim = (v: string | undefined) => String(v ?? "").trim();
            if (!trim(formData.company_business_name)) {
                setErrorMsg("Please enter company name.");
                return;
            }
            if (!trim(formData.company_legal_name)) {
                setErrorMsg("Please enter company legal name.");
                return;
            }
            if (!trim(formData.cif_nif)) {
                setErrorMsg("Please enter CIF/NIF.");
                return;
            }
            if (!trim(formData.company_phone)) {
                setErrorMsg("Please enter phone number.");
                return;
            }
            if (!trim(formData.first_name)) {
                setErrorMsg("Please enter first name.");
                return;
            }
            if (!trim(formData.last_name)) {
                setErrorMsg("Please enter last name.");
                return;
            }
            if (!trim(formData.address)) {
                setErrorMsg("Please enter address.");
                return;
            }
            if (!trim(formData.city)) {
                setErrorMsg("Please enter city.");
                return;
            }
            if (!trim(formData.state_province)) {
                setErrorMsg("Please enter state.");
                return;
            }
            if (!trim(formData.postcode)) {
                setErrorMsg("Please enter postcode.");
                return;
            }
            if (!trim(formData.country)) {
                setErrorMsg("Please enter country.");
                return;
            }
            if (trim(formData.country).length !== 2) {
                setErrorMsg("Please enter a valid 2-letter country code.");
                return;
            }
            if (!trim(formData.responsible_person_name)) {
                setErrorMsg("Please enter responsible person name.");
                return;
            }
            if (!trim(formData.responsible_person_phone)) {
                setErrorMsg("Please enter responsible person phone number.");
                return;
            }
            if (!trim(formData.environmental_role)) {
                setErrorMsg("Please select company role.");
                return;
            }
            if (formData.has_nima && !trim(formData.nima_document_url)) {
                setErrorMsg("Please attach NIMA document.");
                return;
            }
            if (formData.has_organic_auth && !trim(formData.organic_auth_document_url)) {
                setErrorMsg("Please attach organic waste authorisation document.");
                return;
            }

            const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL;
            if (!base) return;

            const headers: Record<string, string> = {
                "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
            };

            const raw = typeof window !== "undefined" ? localStorage.getItem("currentUser") : null;
            const user = raw ? JSON.parse(raw) : null;
            const authTok = String(user?.token ?? user?.access_token ?? "").trim();
            if (authTok) headers.Authorization = `Bearer ${authTok}`;

            const payload: Record<string, any> = { 
                ...formData,
                state: formData.state_province,
                phone: formData.responsible_person_phone,
                company_role: formData.environmental_role
            };
            if (!selectedImageFile && !isProfileImageRemoved) {
                delete payload.image_url;
            }

            if (!payload.nima_document_url) delete payload.nima_document_url;
            if (!payload.organic_auth_document_url) delete payload.organic_auth_document_url;

            if (!payload.company_business_name?.trim()) delete payload.company_business_name;
            if (!payload.first_name?.trim()) delete payload.first_name;
            if (!payload.last_name?.trim()) delete payload.last_name;

            if (payload.country && payload.country.trim().length !== 2) {
                delete payload.country;
            }

            let requestBody: BodyInit;
            if (selectedImageFile || selectedNimaFile || selectedOrganicFile) {
                const fd = new FormData();
                if (selectedImageFile) fd.append("image_url", selectedImageFile);
                if (selectedNimaFile) fd.append("nima_document", selectedNimaFile);
                if (selectedOrganicFile) fd.append("organic_auth_document", selectedOrganicFile);

                Object.entries(payload).forEach(([key, val]) => {
                    if (["image_url", "nima_document", "organic_auth_document", "has_nima", "has_organic_auth"].includes(key)) return;
                    if (val === undefined || val === null || val === "") return;
                    fd.append(key, String(val));
                });
                // Always append booleans to ensure they are updated
                fd.append("has_nima", String(formData.has_nima));
                fd.append("has_organic_auth", String(formData.has_organic_auth));
                
                requestBody = fd;
            } else {
                headers["Content-Type"] = "application/json";
                requestBody = JSON.stringify(payload);
            }

            const res = await fetch(`${base}/store/customers/profile`, {
                method: "PATCH",
                headers,
                credentials: "include",
                body: requestBody
            });

            if (res.ok) {
                const savedData = await res.json().catch(() => null);
                if (imagePreviewUrl) {
                    URL.revokeObjectURL(imagePreviewUrl);
                    setImagePreviewUrl("");
                }
                setSelectedImageFile(null);
                setIsProfileImageRemoved(false);
                
                const storedRaw = typeof window !== "undefined" ? localStorage.getItem("currentUser") : null;
                if (storedRaw) {
                    const currentUser = JSON.parse(storedRaw);
                    const firstName = formData.first_name || "";
                    const lastName = formData.last_name || "";
                    const fullName = (firstName + " " + lastName).trim();
                    const savedProfile = savedData?.profile || savedData || {};
                    const savedImageUrl = String(
                        savedProfile.image_url ??
                        (isProfileImageRemoved ? "" : formData.image_url) ??
                        ""
                    ).trim();
                    
                    const updatedUser = {
                        ...currentUser,
                        first_name: firstName,
                        last_name: lastName,
                        fullName: fullName,
                        name: fullName || currentUser.name,
                        image_url: savedImageUrl,
                        avatar_url: savedProfile.avatar_url ?? currentUser.avatar_url,
                        avatar: savedProfile.avatar ?? currentUser.avatar,
                        profile_image: savedProfile.profile_image ?? currentUser.profile_image,
                    };
                    localStorage.setItem("currentUser", JSON.stringify(updatedUser));
                    window.dispatchEvent(new Event("storage"));
                    window.dispatchEvent(new Event("auth-change"));
                }
                
                setErrorMsg("");
                setIsEditing(false);
                window.location.reload();
            } else {
            }
        } catch (error) {
        } finally {
            setIsLoading(false);
        }
    };

    const handleCancel = () => {
        setErrorMsg("");
        setIsEditing(false);
        setSelectedNimaFile(null);
        setSelectedOrganicFile(null);
        setSelectedImageFile(null);
        setImagePreviewUrl("");
    };

    const handleLogout = () => {
        localStorage.removeItem("currentUser");
        router.push("/login");
    };

    const inputClass = `w-full border rounded-lg px-4 py-3 appearance-none focus:outline-none font-light text-[18px] transition-colors duration-200
    ${isEditing
            ? 'bg-white border-gray-300 focus:border-[#053F31] text-gray-900 shadow-sm'
            : 'bg-transparent border-gray-300 border-[#053F31] text-gray-600 pl-[15px] cursor-default'
        }`;

    const profileLocale = primaryLocaleForStaticCopy(uiLocale) as keyof typeof staticCopy.profile;
    const t = staticCopy.profile[profileLocale] ?? staticCopy.profile["en-EN"];

    return (
        <main className="px-4 pt-6 pb-20 md:pr-8">
            <div className="min-h-screen flex items-start gap-6 xl:max-w-[1240px] 2xl:max-w-[1440px] sm:mx-auto">
                <BackgroundGradients count={MARKETPLACE_ZIGZAG_COUNT} />
                <Sidebar />
                <div className="w-full pb-28 md:pb-10 z-10">
                    <section className="font-outfit selection:bg-[#053F31] selection:text-white">

                        <div className="bg-[#F7FAF8] border rounded-[20px] border-gray-200 p-[20px] sm:p-[30px] lg:p-[40px] shadow-xl">

                            <div className="flex flex-col md:flex-row justify-between items-center mb-[40px] gap-6">
                                <div className="flex flex-col sm:flex-row items-center gap-6">
                                    <div className="relative group">
                                        <div className="w-[100px] h-[100px] md:w-[120px] md:h-[120px] rounded-full border-4 border-white shadow-md overflow-hidden bg-gray-200">
                                            <img
                                                src={
                                                    imagePreviewUrl
                                                        ? imagePreviewUrl
                                                        : formData.image_url?.trim() &&
                                                          /^(https?:\/\/|\/|blob:|data:image\/)/i.test(formData.image_url)
                                                            ? formData.image_url
                                                        : `https://ui-avatars.com/api/?name=${encodeURIComponent(
                                                            `${formData.first_name || ""} ${formData.last_name || ""}`.trim() ||
                                                            formData.company_business_name ||
                                                            "User"
                                                        )}&background=053F31&color=ffffff&size=256`
                                                }
                                                alt={t.profileImageAlt}
                                                className="w-full h-full object-cover"
                                            />
                                            <input
                                                ref={profileImageInputRef}
                                                type="file"
                                                accept="image/*"
                                                onChange={handleProfileImageChange}
                                                className="hidden"
                                            />
                                        </div>
                                        <button
                                            type="button"
                                            disabled={!isEditing}
                                            onClick={handleProfileImageClick}
                                            className={`absolute bottom-0 right-0 p-2 rounded-full text-white shadow-lg transition-all duration-300
                                                ${isEditing
                                                    ? 'bg-[#053F31] hover:bg-[#1B4D3E] translate-y-0 opacity-100 cursor-pointer'
                                                    : 'bg-gray-400 translate-y-2 opacity-0 cursor-default'
                                                }`}
                                        >
                                            <Camera size={18} />
                                        </button>
                                        {isEditing ? (
                                            <button
                                                type="button"
                                                onClick={handleProfileImageDelete}
                                                className="absolute bottom-0 left-0 p-2 rounded-full bg-red-500 hover:bg-red-600 text-white shadow-lg transition-all duration-300 cursor-pointer"
                                                aria-label={t.deletePhotoAria}
                                                title={t.deletePhotoAria}
                                            >
                                                <Trash2 size={16} />
                                            </button>
                                        ) : null}
                                    </div>

                                    <div className="text-center sm:text-left">
                                        <h3 className="text-2xl font-lexend font-medium text-[#053F31]">{formData.first_name} {formData.last_name}</h3>
                                        <p className="text-gray-500 font-light capitalize">{formData.company_business_name || t.companyNameFallback}</p>
                                    </div>
                                </div>

                                <div className="flex gap-3">
                                    {isEditing ? (
                                        <>
                                            <button
                                                onClick={handleCancel}
                                                className="px-5 py-2 rounded-full border border-gray-300 text-gray-600 hover:bg-gray-100 transition flex items-center gap-2"
                                            >
                                                <X size={18} /> {t.cancel}
                                            </button>
                                            <button
                                                onClick={handleSave}
                                                disabled={isLoading}
                                                className="bg-[#1B4D3E] text-white px-6 py-2 rounded-full hover:bg-emerald-900 transition flex items-center gap-2 shadow-md"
                                            >
                                                {isLoading ? t.saving : <><Check size={18} /> {t.save}</>}
                                            </button>
                                        </>
                                    ) : (
                                        <>
                                            <button
                                                onClick={handleLogout}
                                                className="px-5 py-2 rounded-full border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-2 bg-white"
                                            >
                                                <LogOut size={16} /> {t.logout}
                                            </button>
                                            <button
                                                onClick={() => {
                                                    setErrorMsg("");
                                                    setIsEditing(true);
                                                }}
                                                className="bg-white border border-[#053F31] text-[#053F31] px-6 py-2 rounded-full hover:bg-[#DAE6DC] transition flex items-center gap-2 font-medium"
                                            >
                                                <Edit2 size={16} /> {t.editDetails}
                                            </button>
                                        </>
                                    )}
                                </div>
                            </div>
                            <form onSubmit={(e) => e.preventDefault()} className="space-y-6">
                                {isEditing && errorMsg ? <ErrorMessage message={errorMsg} /> : null}

                                <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
                                    <div className="flex justify-between items-center mb-6 border-b border-gray-100 pb-4">
                                        <h4 className="text-xl font-lexend text-[#053F31] font-medium flex items-center">
                                            {t.sectionCompany}
                                        </h4>
                                        <div className="w-8 h-8 rounded-full bg-[#DAE6DC] flex items-center justify-center text-[#053F31]">
                                            <ArrowRight size={18} />
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[30px] gap-y-[10px]">
                                        <ProfileField label={t.companyBusinessName} icon={<Building size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="company_business_name" value={formData.company_business_name} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.companyLegalName} icon={<Building size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="company_legal_name" value={formData.company_legal_name} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.cifNif} icon={<Check size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="cif_nif" value={formData.cif_nif} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.phoneNumber} icon={<Phone size={18} />} isEditing={isEditing} required>
                                            <input type="tel" name="company_phone" placeholder={t.phonePlaceholder} value={formData.company_phone} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.firstName} icon={<User size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="first_name" value={formData.first_name} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.lastName} icon={<User size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="last_name" value={formData.last_name} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <div className="col-span-1 md:col-span-2">
                                            <ProfileField label={t.address} icon={<MapPin size={18} />} isEditing={isEditing} required>
                                                <input type="text" name="address" value={formData.address} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                            </ProfileField>
                                        </div>

                                        <ProfileField label={t.city} icon={<MapPin size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="city" value={formData.city} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.stateProvince} icon={<MapPin size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="state_province" value={formData.state_province} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.postcode} icon={<MapPin size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="postcode" value={formData.postcode} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.country} icon={<ChevronDown size={18} />} isEditing={isEditing} required>
                                            <select name="country" value={formData.country} onChange={handleChange} disabled={!isEditing} className={inputClass}>
                                                <option value="">{t.selectCountry}</option>
                                                <option value="es">{t.countrySpain}</option>
                                                <option value="de">{t.countryGermany}</option>
                                                <option value="fr">{t.countryFrance}</option>
                                                <option value="it">{t.countryItaly}</option>
                                                <option value="in">{t.countryIndia}</option>
                                                <option value="us">{t.countryUs}</option>
                                                <option value="gb">{t.countryUk}</option>
                                            </select>
                                        </ProfileField>
                                    </div>
                                </div>

                                <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
                                    <div className="flex justify-between items-center mb-6 border-b border-gray-100 pb-4">
                                        <h4 className="text-xl font-lexend text-[#053F31] font-medium flex items-center">
                                            {t.sectionResponsible}
                                        </h4>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[30px] gap-y-[10px]">
                                        <ProfileField label={t.responsibleName} icon={<User size={18} />} isEditing={isEditing} required>
                                            <input type="text" name="responsible_person_name" value={formData.responsible_person_name} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>

                                        <ProfileField label={t.phoneNumber} icon={<Phone size={18} />} isEditing={isEditing} required>
                                            <input type="tel" name="responsible_person_phone" placeholder={t.phonePlaceholder} value={formData.responsible_person_phone} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                        </ProfileField>
                                    </div>
                                </div>

                                <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
                                    <div className="flex justify-between items-center mb-6 border-b border-gray-100 pb-4">
                                        <h4 className="text-xl font-lexend text-[#053F31] font-medium flex items-center">
                                            {t.sectionEnvironmental}
                                        </h4>
                                    </div>

                                    <div className="grid grid-cols-1 gap-x-[30px] gap-y-[20px]">

                                        <div className="md:w-1/2">
                                            <ProfileField label={t.environmentalRole} icon={<ChevronDown size={18} />} isEditing={isEditing} required>
                                                <select name="environmental_role" value={formData.environmental_role} onChange={handleChange} disabled={!isEditing} className={inputClass}>
                                                    <option value="">{t.selectRole}</option>
                                                    {companyRoleOptions.map((opt) => (
                                                        <option key={opt.id} value={opt.value}>
                                                            {opt.label}
                                                        </option>
                                                    ))}
                                                </select>
                                            </ProfileField>
                                        </div>

                                        <div className="flex flex-col sm:flex-row sm:items-center gap-4 mb-2">
                                            <label className="text-[18px] md:text-[20px] font-medium text-gray-900 w-full sm:w-1/2">
                                                {t.hasNimaQuestion} <span className="text-[#FF0000]">*</span>
                                            </label>
                                            <div className="flex gap-6 w-full sm:w-1/2">
                                                <label className="flex items-center gap-2 cursor-pointer">
                                                    <input
                                                        type="radio"
                                                        name="has_nima"
                                                        value="true"
                                                        checked={formData.has_nima === true}
                                                        onChange={handleChange}
                                                        disabled={!isEditing}
                                                        className="w-5 h-5 accent-[#053F31]"
                                                    />
                                                    <span className="text-gray-700 text-lg">{t.yes}</span>
                                                </label>
                                                <label className="flex items-center gap-2 cursor-pointer">
                                                    <input
                                                        type="radio"
                                                        name="has_nima"
                                                        value="false"
                                                        checked={formData.has_nima === false}
                                                        onChange={handleChange}
                                                        disabled={!isEditing}
                                                        className="w-5 h-5 accent-[#053F31]"
                                                    />
                                                    <span className="text-gray-700 text-lg">{t.no}</span>
                                                </label>
                                            </div>
                                        </div>

                                        {formData.has_nima && (
                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[30px] bg-[#fdfdfd] p-4 border border-gray-100 rounded-lg">
                                                <ProfileField label={t.nimaNumber} isEditing={isEditing}>
                                                    <input type="text" name="nima_number" value={formData.nima_number} onChange={handleChange} disabled={!isEditing} className={inputClass} />
                                                </ProfileField>

                                                <div className="mb-[21px]">
                                                    <label className="block text-[18px] md:text-[20px] font-medium text-gray-900 mb-[9px]">
                                                        {t.attachNimaDocument} <span className="text-[#FF0000]">*</span>
                                                    </label>
                                                    <input
                                                        ref={nimaDocumentInputRef}
                                                        type="file"
                                                        accept=".pdf,image/jpeg,image/jpg,image/png,image/webp"
                                                        onChange={(e) => handleDocumentFileChange("nima_document_url", e)}
                                                        className="hidden"
                                                    />
                                                    {isEditing ? (
                                                        <div
                                                            onClick={() => handleFileUpload('nima_document_url')}
                                                            className={`w-full border-2 border-dashed rounded-lg px-4 py-8 flex flex-col items-center justify-center text-center transition-colors duration-200 border-[#053F31] bg-[#F7FAF8] cursor-pointer hover:bg-[#DAE6DC]`}
                                                        >
                                                            <UploadCloud size={32} className={`mb-3 text-[#053F31]`} />
                                                            <p className="text-gray-600 font-light">
                                                                {formData.nima_document_url ? t.docAttachedReplace : t.uploadHint}
                                                            </p>
                                                            {(selectedNimaFile || formData.nima_document_url) && (
                                                                <span className="text-sm text-[#053F31] mt-2 font-medium truncate max-w-[250px] block">
                                                                    {selectedNimaFile ? selectedNimaFile.name : cleanFilename(formData.nima_document_url)}
                                                                </span>
                                                            )}
                                                        </div>
                                                    ) : (
                                                        <div className="w-full bg-transparent p-3 rounded-lg border border-gray-200">
                                                            {formData.nima_document_url ? (
                                                                <div className="flex items-center gap-2 text-[#053F31]">
                                                                    <Check size={18} />
                                                                    <span className="font-medium truncate max-w-[250px] block">
                                                                        {cleanFilename(formData.nima_document_url)}
                                                                    </span>
                                                                </div>
                                                            ) : (
                                                                <span className="text-gray-400 italic font-light">{t.noDocumentAttached}</span>
                                                            )}
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        )}

                                        <div className="flex flex-col sm:flex-row sm:items-center gap-4 mt-4 mb-2 pt-6 border-t border-gray-100">
                                            <label className="text-[18px] md:text-[20px] font-medium text-gray-900 w-full sm:w-1/2">
                                                {t.organicAuthQuestion} <span className="text-[#FF0000]">*</span>
                                            </label>
                                            <div className="flex gap-6 w-full sm:w-1/2">
                                                <label className="flex items-center gap-2 cursor-pointer">
                                                    <input
                                                        type="radio"
                                                        name="has_organic_auth"
                                                        value="true"
                                                        checked={formData.has_organic_auth === true}
                                                        onChange={handleChange}
                                                        disabled={!isEditing}
                                                        className="w-5 h-5 accent-[#053F31]"
                                                    />
                                                    <span className="text-gray-700 text-lg">{t.yes}</span>
                                                </label>
                                                <label className="flex items-center gap-2 cursor-pointer">
                                                    <input
                                                        type="radio"
                                                        name="has_organic_auth"
                                                        value="false"
                                                        checked={formData.has_organic_auth === false}
                                                        onChange={handleChange}
                                                        disabled={!isEditing}
                                                        className="w-5 h-5 accent-[#053F31]"
                                                    />
                                                    <span className="text-gray-700 text-lg">{t.no}</span>
                                                </label>
                                            </div>
                                        </div>

                                        {formData.has_organic_auth && (
                                            <div className="md:w-1/2 bg-[#fdfdfd] p-4 border border-gray-100 rounded-lg">
                                                <label className="block text-[18px] md:text-[20px] font-medium text-gray-900 mb-[9px]">
                                                    {t.attachOrganicDocument} <span className="text-[#FF0000]">*</span>
                                                </label>
                                                <input
                                                    ref={organicDocumentInputRef}
                                                    type="file"
                                                    accept=".pdf,image/jpeg,image/jpg,image/png,image/webp"
                                                    onChange={(e) => handleDocumentFileChange("organic_auth_document_url", e)}
                                                    className="hidden"
                                                />
                                                {isEditing ? (
                                                    <div
                                                        onClick={() => handleFileUpload('organic_auth_document_url')}
                                                        className={`w-full border-2 border-dashed rounded-lg px-4 py-8 flex flex-col items-center justify-center text-center transition-colors duration-200 border-[#053F31] bg-[#F7FAF8] cursor-pointer hover:bg-[#DAE6DC]`}
                                                    >
                                                        <UploadCloud size={32} className={`mb-3 text-[#053F31]`} />
                                                        <p className="text-gray-600 font-light">
                                                            {formData.organic_auth_document_url ? t.docAttachedReplace : t.uploadHint}
                                                        </p>
                                                        {(selectedOrganicFile || formData.organic_auth_document_url) && (
                                                            <span className="text-sm text-[#053F31] mt-2 font-medium truncate max-w-[250px] block">
                                                                {selectedOrganicFile ? selectedOrganicFile.name : cleanFilename(formData.organic_auth_document_url)}
                                                            </span>
                                                        )}
                                                    </div>
                                                ) : (
                                                    <div className="w-full bg-transparent p-3 rounded-lg border border-gray-200">
                                                        {formData.organic_auth_document_url ? (
                                                            <div className="flex items-center gap-2 text-[#053F31]">
                                                                <Check size={18} />
                                                                <span className="font-medium truncate max-w-[250px] block">
                                                                    {cleanFilename(formData.organic_auth_document_url)}
                                                                </span>
                                                            </div>
                                                        ) : (
                                                            <span className="text-gray-400 italic font-light">{t.noDocumentAttached}</span>
                                                        )}
                                                    </div>
                                                )}
                                            </div>
                                        )}

                                    </div>
                                </div>

                                {isEditing && (
                                    <div className="flex justify-end pt-4">
                                        <button
                                            onClick={handleSave}
                                            disabled={isLoading}
                                            className="bg-[#1B4D3E] text-white px-8 py-3 rounded-full hover:bg-emerald-900 transition flex items-center gap-2 shadow-lg text-lg font-medium tracking-wide"
                                        >
                                            {isLoading ? t.saving : <><Save size={20} /> {t.saveChanges}</>}
                                        </button>
                                    </div>
                                )}

                            </form>
                        </div>
                    </section>
                </div>
            </div>
        </main>
    );
}