@php
    $normalizedRole = \App\Models\User::normalizeRole($user->role ?? null);
    $isSupplier = $normalizedRole === \App\Models\User::ROLE_SUPPLIER;
    $selectedTipoPersona = old('tipo_persona', $company?->tipo_persona);
    $requiresMoralDocs = $selectedTipoPersona === 'moral';
    $isUnderReview = $isSupplier
        && ($company?->profile_completed_at !== null)
        && (($company?->provider_status ?? null) === \App\Models\Company::STATUS_PENDING);
    $hasAllSupplierDocs = $isSupplier
        && $company
        && $company->csf_path
        && $company->domicilio_path
        && $company->id_oficial_path
        && $company->caratula_path
        && (!$requiresMoralDocs || ($company->opinion_cumplimiento_path && $company->acta_constitutiva_path));
@endphp

<section>
    <header style="margin-bottom:12px;">
        <h2 class="section-title">{{ $isSupplier ? 'Completar perfil' : 'Perfil básico' }}</h2>
        <p class="subtle">
            {{ $isSupplier ? 'Todos los documentos fiscales aplicables son obligatorios para poder subir facturas.' : 'Actualiza los datos generales de tu cuenta.' }}
        </p>
        <p class="subtle" style="margin-top:8px;">
            <strong>Perfil asignado:</strong> {{ strtoupper($normalizedRole ?? 'N/A') }}
        </p>
    </header>

    @if ($isUnderReview)
        <div class="notice">Estamos validando tu informacion, en cuanto sea aprobado podras subir tus facturas.</div>
    @elseif (session('status') === 'complete-profile')
        <div class="notice">Por favor completa tu perfil para habilitar la carga de facturas.</div>
    @endif

    @if(request()->boolean('upload_error') || $errors->has('upload'))
        <div class="error">
            Los archivos exceden el tamaño permitido (máximo 5 MB por archivo, Acta constitutiva hasta 20 MB). Reduce el peso e intenta nuevamente.
        </div>
    @endif

    <div id="profile-client-errors" class="error" style="display:none;"></div>

    @if($errors->any() && !$errors->has('upload'))
        <div class="error">
            @foreach($errors->all() as $message)
                <div>{{ $message }}</div>
            @endforeach
        </div>
    @endif

    <form id="send-verification" method="post" action="{{ route('verification.send') }}">
        @csrf
    </form>

    <form id="profile-update-form" method="post" action="{{ route('profile.update') }}" class="grid" style="gap:14px;" {{ $isSupplier ? 'enctype=multipart/form-data' : '' }}>
        @csrf
        @method('patch')

        <div class="field">
            <label>Nombre comercial</label>
            <input name="name" value="{{ old('name', $user->name) }}" required>
            @error('name') <small class="error" style="display:block;">{{ $message }}</small> @enderror
        </div>

        <div class="field">
            <label>Email</label>
            <input name="email" type="email"  value="{{ old('email', $user->email) }}" required readonly>
            @error('email') <small class="error" style="display:block;">{{ $message }}</small> @enderror

            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                <div style="margin-top:8px;">
                    <p class="subtle">Tu correo no está verificado.</p>
                    <button form="send-verification" class="btn btn-secondary" type="submit">Reenviar verificación</button>
                    @if (session('status') === 'verification-link-sent')
                        <div class="notice" style="margin-top:8px;">Se envió un nuevo link de verificación.</div>
                    @endif
                </div>
            @endif
        </div>

        @if($isSupplier && !$isUnderReview)
            <div class="field">
                <label>Razón social</label>
                <input name="legal_name" value="{{ old('legal_name', $company?->legal_name) }}" required>
                @error('legal_name') <small class="error" style="display:block;">{{ $message }}</small> @enderror
            </div>

            <div class="field">
                <label>RFC</label>
                <input name="rfc" value="{{ old('rfc', $company?->rfc) }}" required>
                @error('rfc') <small class="error" style="display:block;">{{ $message }}</small> @enderror
            </div>

            <div class="field">
                <label>Tipo de persona</label>
                <select id="tipo_persona" name="tipo_persona" required>
                    <option value="">-- Selecciona --</option>
                    <option value="fisica" @selected(old('tipo_persona', $company?->tipo_persona) === 'fisica')>Física</option>
                    <option value="moral" @selected(old('tipo_persona', $company?->tipo_persona) === 'moral')>Moral</option>
                </select>
                @error('tipo_persona') <small class="error" style="display:block;">{{ $message }}</small> @enderror
            </div>

            <div class="field">
                <label>Régimen fiscal</label>
                <input name="tax_regime" value="{{ old('tax_regime', $company?->tax_regime) }}" required>
                @error('tax_regime') <small class="error" style="display:block;">{{ $message }}</small> @enderror
            </div>

            <div class="field">
                <label>Uso CFDI</label>
                <input name="cfdi_use" value="{{ old('cfdi_use', $company?->cfdi_use) }}" required>
                @error('cfdi_use') <small class="error" style="display:block;">{{ $message }}</small> @enderror
            </div>

            <div class="field">
                <label>Nombre del contacto</label>
                <input name="contact_name" value="{{ old('contact_name', $company?->contact_name) }}" required>
                @error('contact_name') <small class="error" style="display:block;">{{ $message }}</small> @enderror
            </div>

            <div class="field">
                <label>Teléfono del contacto</label>
                <input name="contact_phone" value="{{ old('contact_phone', $company?->contact_phone) }}" required>
                @error('contact_phone') <small class="error" style="display:block;">{{ $message }}</small> @enderror
            </div>

            @if(!$hasAllSupplierDocs)
                <div class="field">
                    <label>Constancia de situación fiscal (PDF, máx. 5 MB)</label>
                    <input class="js-profile-file" type="file" name="csf" accept="application/pdf" data-max-mb="5" @required(!$company?->csf_path)>
                    @if($company?->csf_path)
                        <small>Archivo cargado. <a class="link" href="{{ asset('storage/'.$company->csf_path) }}" target="_blank" rel="noopener">Ver archivo actual</a></small>
                    @endif
                    @error('csf') <small class="error" style="display:block;">{{ $message }}</small> @enderror
                </div>

                <div class="field">
                    <label>Comprobante de domicilio (PDF, máx. 5 MB)</label>
                    <input class="js-profile-file" type="file" name="domicilio" accept="application/pdf" data-max-mb="5" @required(!$company?->domicilio_path)>
                    @if($company?->domicilio_path)
                        <small>Archivo cargado. <a class="link" href="{{ asset('storage/'.$company->domicilio_path) }}" target="_blank" rel="noopener">Ver archivo actual</a></small>
                    @endif
                    @error('domicilio') <small class="error" style="display:block;">{{ $message }}</small> @enderror
                </div>

                <div class="field">
                    <label>Identificación oficial del Representante legal(PDF/JPG/PNG, máx. 5 MB)</label>
                    <input class="js-profile-file" type="file" name="id_oficial" accept="application/pdf,image/jpeg,image/png" data-max-mb="5" @required(!$company?->id_oficial_path)>
                    @if($company?->id_oficial_path)
                        <small>Archivo cargado. <a class="link" href="{{ asset('storage/'.$company->id_oficial_path) }}" target="_blank" rel="noopener">Ver archivo actual</a></small>
                    @endif
                    @error('id_oficial') <small class="error" style="display:block;">{{ $message }}</small> @enderror
                </div>

                <div class="field">
                    <label>Carátula estado de cuenta (PDF, máx. 5 MB)</label>
                    <input class="js-profile-file" type="file" name="caratula" accept="application/pdf" data-max-mb="5" @required(!$company?->caratula_path)>
                    @if($company?->caratula_path)
                        <small>Archivo cargado. <a class="link" href="{{ asset('storage/'.$company->caratula_path) }}" target="_blank" rel="noopener">Ver archivo actual</a></small>
                    @endif
                    @error('caratula') <small class="error" style="display:block;">{{ $message }}</small> @enderror
                </div>

                <div class="field" id="opinion_cumplimiento_wrap" style="{{ $requiresMoralDocs ? '' : 'display:none;' }}">
                    <label>Opinión de cumplimiento positiva (PDF, máx. 5 MB)</label>
                    <input id="opinion_cumplimiento_input" class="js-profile-file" type="file" name="opinion_cumplimiento" accept="application/pdf" data-max-mb="5" @required($requiresMoralDocs && !$company?->opinion_cumplimiento_path)>
                    @if($company?->opinion_cumplimiento_path)
                        <small>Archivo cargado. <a class="link" href="{{ asset('storage/'.$company->opinion_cumplimiento_path) }}" target="_blank" rel="noopener">Ver archivo actual</a></small>
                    @endif
                    @error('opinion_cumplimiento') <small class="error" style="display:block;">{{ $message }}</small> @enderror
                </div>

                <div class="field" id="acta_constitutiva_wrap" style="{{ $requiresMoralDocs ? '' : 'display:none;' }}">
                    <label>Acta constitutiva (Caratula y poderes, PDF, máx. 20 MB)</label>
                    <input id="acta_constitutiva_input" class="js-profile-file" type="file" name="acta_constitutiva" accept="application/pdf" data-max-mb="20" @required($requiresMoralDocs && !$company?->acta_constitutiva_path)>
                    @if($company?->acta_constitutiva_path)
                        <small>Archivo cargado. <a class="link" href="{{ asset('storage/'.$company->acta_constitutiva_path) }}" target="_blank" rel="noopener">Ver archivo actual</a></small>
                    @endif
                    @error('acta_constitutiva') <small class="error" style="display:block;">{{ $message }}</small> @enderror
                </div>
            @endif
        @endif

        <div style="display:flex; gap:12px; align-items:center;">
            @if(!$isUnderReview)
                <button class="btn" type="submit">Guardar cambios</button>
            @endif
            @if (session('status') === 'profile-updated')
                <span class="badge">Guardado</span>
            @endif
        </div>
    </form>
</section>

@if($isSupplier && !$isUnderReview)
    <script>
        (function () {
            const form = document.getElementById('profile-update-form');
            const tipoPersona = document.getElementById('tipo_persona');
            const opinionWrap = document.getElementById('opinion_cumplimiento_wrap');
            const actaWrap = document.getElementById('acta_constitutiva_wrap');
            const opinionInput = document.getElementById('opinion_cumplimiento_input');
            const actaInput = document.getElementById('acta_constitutiva_input');
            const clientErrors = document.getElementById('profile-client-errors');
            const fileInputs = Array.from(document.querySelectorAll('.js-profile-file'));

            if (!form || !tipoPersona || !opinionWrap || !actaWrap || !opinionInput || !actaInput) return;

            const opinionHasFile = {{ $company?->opinion_cumplimiento_path ? 'true' : 'false' }};
            const actaHasFile = {{ $company?->acta_constitutiva_path ? 'true' : 'false' }};

            const clearFieldClientError = (input) => {
                input.style.borderColor = '';
                const existing = input.parentElement?.querySelector('[data-client-error-for="'+input.name+'"]');
                if (existing) existing.remove();
            };

            const setFieldClientError = (input, message) => {
                input.style.borderColor = '#dc2626';
                const existing = input.parentElement?.querySelector('[data-client-error-for="'+input.name+'"]');
                if (existing) existing.remove();
                const small = document.createElement('small');
                small.className = 'error';
                small.style.display = 'block';
                small.style.marginTop = '6px';
                small.dataset.clientErrorFor = input.name;
                small.textContent = message;
                input.insertAdjacentElement('afterend', small);
            };

            const validateSingleFileInput = (input) => {
                clearFieldClientError(input);
                const maxMb = Number(input.dataset.maxMb || 0);
                if (!maxMb || !input.files || input.files.length === 0) return true;

                const maxBytes = maxMb * 1024 * 1024;
                const tooLarge = Array.from(input.files).find(file => file.size > maxBytes);

                if (!tooLarge) return true;

                input.value = '';
                const label = input.closest('.field')?.querySelector('label')?.textContent?.trim() || input.name;
                setFieldClientError(input, label + ': el archivo excede el tamaño máximo permitido (' + maxMb + ' MB).');
                return false;
            };

            const showClientErrors = (messages) => {
                if (!clientErrors) return;
                if (!messages.length) {
                    clientErrors.style.display = 'none';
                    clientErrors.innerHTML = '';
                    return;
                }
                clientErrors.style.display = '';
                clientErrors.innerHTML = messages.map(msg => '<div>' + msg + '</div>').join('');
            };

            const toggleMoralDocuments = () => {
                const isMoral = tipoPersona.value === 'moral';
                opinionWrap.style.display = isMoral ? '' : 'none';
                actaWrap.style.display = isMoral ? '' : 'none';

                opinionInput.required = isMoral && !opinionHasFile;
                actaInput.required = isMoral && !actaHasFile;
            };

            fileInputs.forEach((input) => {
                input.addEventListener('change', () => {
                    validateSingleFileInput(input);
                });
            });

            form.addEventListener('submit', (event) => {
                const messages = [];
                let hasErrors = false;

                fileInputs.forEach((input) => {
                    const valid = validateSingleFileInput(input);
                    if (!valid) {
                        hasErrors = true;
                        const label = input.closest('.field')?.querySelector('label')?.textContent?.trim() || input.name;
                        messages.push(label + ': archivo demasiado grande.');
                    }
                });

                showClientErrors(messages);

                if (hasErrors) {
                    event.preventDefault();
                    clientErrors?.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            });

            tipoPersona.addEventListener('change', toggleMoralDocuments);
            toggleMoralDocuments();
        })();
    </script>
@endif