@extends('web.signup.layout')

@section('title', __('web.startup_initial_dd.title'))
@section('page_title', __('web.startup_initial_dd.page_title'))
@section('page_subtitle', '')
@section('body_class', 'has-sticky-logo')

@push('styles')
<style>
    /* ── Initial-DD portal — entry card ───────────────────────────────
       Visual language matches the create-meeting + committee-attendance
       portals (same hero icon, same step pills, same card chrome) so a
       startup founder who has used one of the other public flows already
       feels at home. Class prefix `sdd-` keeps the rules scoped. */
    .sdd-card {
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.12);
        padding: 28px;
    }
    @media (max-width: 640px) { .sdd-card { padding: 22px; border-radius: 14px; } }

    .sdd-hero {
        text-align: center; padding-bottom: 22px; margin-bottom: 22px;
        border-bottom: 1px solid var(--slate-100);
    }
    .sdd-hero__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 56px; height: 56px;
        background: var(--primary-50); color: var(--primary-600);
        border-radius: 16px; border: 1px solid var(--primary-100);
        margin-bottom: 14px;
    }
    .sdd-hero__title {
        margin: 0 0 6px;
        font-size: 26px; font-weight: 800; color: var(--slate-900);
        letter-spacing: -.015em;
    }
    @media (max-width: 640px) { .sdd-hero__title { font-size: 22px; } }
    .sdd-hero__sub { margin: 0; font-size: 14px; line-height: 1.7; color: var(--slate-500); max-width: 420px; margin-inline: auto; }
    .signup-header { margin-bottom: 18px; }

    /* Step indicator. */
    .sdd-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; }
    .sdd-step {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 999px;
        background: var(--slate-100); color: var(--slate-500);
        font-weight: 800; font-size: 12.5px; transition: all .2s;
    }
    .sdd-step--active { background: var(--primary-600); color: #fff; box-shadow: 0 0 0 4px var(--primary-100); }
    .sdd-step--done   { background: var(--success-500); color: #fff; }
    .sdd-step-line { width: 28px; height: 2px; background: var(--slate-200); border-radius: 2px; }
    .sdd-step-line--done { background: var(--success-500); }

    .sdd-field { display: grid; gap: 7px; }
    .sdd-field > label { font-size: 13px; font-weight: 700; color: var(--slate-700); }
    .sdd-field input {
        width: 100%; padding: 12px 14px; background: #fff;
        border: 1px solid var(--slate-200); border-radius: 11px;
        font: inherit; font-size: 15px; color: var(--slate-900);
        transition: border-color .15s, box-shadow .15s;
    }
    .sdd-field input:focus { outline: none; border-color: var(--primary-600); box-shadow: 0 0 0 4px var(--primary-100); }
    .sdd-field input:disabled { background: var(--slate-50); opacity: .7; }

    /* `direction: ltr` keeps column 1 (country select) on the LEFT in
       BOTH Arabic and English — CSS Grid reverses column-track order
       by default under RTL, which would drift the select to the right. */
    .sdd-phone { display: grid; grid-template-columns: 130px 1fr; gap: 8px; direction: ltr; }
    .sdd-phone select {
        padding: 12px 10px;
        border: 1px solid var(--slate-200); border-radius: 11px; background: #fff;
        font: inherit; font-size: 14px; font-weight: 700; color: var(--slate-900); cursor: pointer;
    }
    .sdd-phone input { text-align: left; direction: ltr; }

    /* ── OTP cells — same layout fix as the committee-attendance portal:
       `min-width: 0` on each cell + `width: 100%` keeps four cells in a
       single row across every viewport without the bare <input> default
       width overflowing the parent. */
    .sdd-otp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 320px; margin: 0 auto; }
    .sdd-otp input {
        width: 100%; min-width: 0; box-sizing: border-box;
        height: 56px; padding: 0; text-align: center;
        font-size: 22px; font-weight: 800; direction: ltr;
        background: #fff; color: var(--slate-900);
        border: 1px solid var(--slate-300); border-radius: var(--radius-md);
        outline: none; transition: border-color .15s, box-shadow .15s;
    }
    .sdd-otp input:hover { border-color: var(--slate-400); }
    .sdd-otp input:focus { border-color: var(--primary-600); box-shadow: 0 0 0 4px var(--primary-100); }
    .sdd-otp input:disabled { background: var(--slate-50); color: var(--slate-500); cursor: not-allowed; }
    .sdd-otp--error input { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.16); }
    @media (max-width: 420px) {
        .sdd-otp { gap: 6px; max-width: 280px; }
        .sdd-otp input { height: 48px; font-size: 19px; }
    }

    .sdd-resend { margin-top: 14px; text-align: center; font-size: 13px; color: var(--slate-500); }
    .sdd-resend button { background: 0; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--primary-600); cursor: pointer; }
    .sdd-resend button:disabled { color: var(--slate-400); cursor: not-allowed; }
    .sdd-countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--slate-700); }

    .sdd-submit {
        width: 100%; padding: 14px 22px;
        background: var(--primary-600); color: #fff;
        border: 0; border-radius: 11px;
        font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
        box-shadow: 0 1px 2px rgba(79,70,229,.2), 0 10px 22px -8px rgba(79,70,229,.4);
        transition: all .15s;
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    .sdd-submit:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
    .sdd-spinner {
        width: 18px; height: 18px;
        border: 2px solid #fff; border-top-color: transparent;
        border-radius: 999px; animation: sdd-spin .8s linear infinite;
    }
    @keyframes sdd-spin { to { transform: rotate(360deg); } }

    .sdd-alert {
        margin-top: 14px; padding: 10px 14px;
        border-radius: 10px; font-size: 13px; line-height: 1.6;
        display: flex; gap: 8px; align-items: flex-start;
    }
    .sdd-alert--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

    .sdd-back { text-align: center; margin-top: 12px; }
    .sdd-back button { background: 0; border: 0; color: var(--slate-500); font-size: 13px; cursor: pointer; }
    .sdd-back button:hover { color: var(--slate-800); }
</style>
@endpush

@section('content')
<div class="sdd-card"
     x-data="startupInitialDd({
        defaultCountry: @js($defaultCountryCode),
        sendOtpUrl:     @js(route('startup-initial-dd.send-otp')),
        verifyOtpUrl:   @js(route('startup-initial-dd.verify-otp')),
        resendOtpUrl:   @js(route('startup-initial-dd.resend-otp')),
        otpSeconds:     @js($otpLengthSeconds),
        otpLength:      @js((int) \App\Services\Booking\MeetingBookingOtpService::OTP_LENGTH),
        csrf:           @js(csrf_token()),
     })"
     x-cloak>

    <div class="sdd-hero">
        <span class="sdd-hero__icon" aria-hidden="true">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
                <line x1="16" y1="13" x2="8" y2="13"/>
                <line x1="16" y1="17" x2="8" y2="17"/>
                <polyline points="10 9 9 9 8 9"/>
            </svg>
        </span>
        <h2 class="sdd-hero__title">{{ __('web.startup_initial_dd.start.hero_title') }}</h2>
        <p class="sdd-hero__sub">{{ __('web.startup_initial_dd.start.hero_sub') }}</p>
    </div>

    {{-- Step indicator --}}
    <div class="sdd-steps" aria-hidden="true">
        <span class="sdd-step"
              :class="step === 'phone' ? 'sdd-step--active' : 'sdd-step--done'">1</span>
        <span class="sdd-step-line"
              :class="step !== 'phone' ? 'sdd-step-line--done' : ''"></span>
        <span class="sdd-step"
              :class="step === 'otp' ? 'sdd-step--active' : (step === 'redirecting' ? 'sdd-step--done' : '')">2</span>
        <span class="sdd-step-line"
              :class="step === 'redirecting' ? 'sdd-step-line--done' : ''"></span>
        <span class="sdd-step"
              :class="step === 'redirecting' ? 'sdd-step--active' : ''">3</span>
    </div>

    {{-- STEP 1: phone --}}
    <form @submit.prevent="sendOtp()" x-show="step === 'phone'" x-cloak>
        <div class="sdd-field">
            <label for="sdd-phone">{{ __('web.startup_initial_dd.start.phone_label') }}</label>
            <div class="sdd-phone">
                <select x-model="country" :disabled="busy">
                    <option value="966">SA +966</option>
                    <option value="20">EG +20</option>
                    <option value="971">AE +971</option>
                    <option value="965">KW +965</option>
                    <option value="974">QA +974</option>
                    <option value="973">BH +973</option>
                    <option value="968">OM +968</option>
                </select>
                <input id="sdd-phone" type="tel" inputmode="tel" autocomplete="tel"
                       x-model="phone"
                       :disabled="busy"
                       placeholder="{{ __('web.startup_initial_dd.start.phone_placeholder') }}">
            </div>
        </div>

        <button type="submit" class="sdd-submit" :disabled="busy" style="margin-top:18px;">
            <span x-show="!busy">{{ __('web.startup_initial_dd.start.submit') }}</span>
            <span x-show="busy" class="sdd-spinner" aria-hidden="true"></span>
            <span x-show="busy">{{ __('web.startup_initial_dd.start.sending') }}</span>
        </button>

        <div class="sdd-alert sdd-alert--error" x-show="error" x-cloak>
            <span aria-hidden="true">⚠</span>
            <span x-text="error"></span>
        </div>
    </form>

    {{-- STEP 2: OTP --}}
    <form @submit.prevent="verifyOtp()" x-show="step === 'otp'" x-cloak>
        <div style="text-align:center; margin-bottom:18px;">
            <div style="font-size:14px; color:var(--slate-600); line-height:1.7;">
                {{ __('web.startup_initial_dd.otp.hint_prefix') }} <span x-text="otpLength"></span> {{ __('web.startup_initial_dd.otp.hint_suffix') }}
                <span style="font-weight:700; color:var(--slate-800); direction:ltr; display:inline-block;" x-text="maskedPhone"></span>
            </div>
        </div>

        {{-- Reusable OTP grid. LTR-pinned so digits read 1→2→3→4 left to
             right regardless of the page's RTL direction. Mirrors the
             assembled code into `this.code` via `@otp-input`; clearing
             happens via the window-level `otp-reset` event. --}}
        <div @otp-input="code = $event.detail.code">
            <x-web.otp-input
                :length="(int) \App\Services\Booking\MeetingBookingOtpService::OTP_LENGTH"
                disabled="busy"
                error="error.length > 0"
            ></x-web.otp-input>
        </div>

        <button type="submit" class="sdd-submit" :disabled="busy || code.length < otpLength" style="margin-top:20px;">
            <span x-show="!busy">{{ __('web.startup_initial_dd.otp.submit') }}</span>
            <span x-show="busy" class="sdd-spinner" aria-hidden="true"></span>
            <span x-show="busy">{{ __('web.startup_initial_dd.otp.verifying') }}</span>
        </button>

        <div class="sdd-alert sdd-alert--error" x-show="error" x-cloak>
            <span aria-hidden="true">⚠</span>
            <span x-text="error"></span>
        </div>

        <div class="sdd-resend">
            <template x-if="countdown > 0">
                <span>{!! __('web.startup_initial_dd.otp.countdown', ['time' => '<span class="sdd-countdown" x-text="formatCountdown(countdown)"></span>']) !!}</span>
            </template>
            <template x-if="countdown === 0">
                <button type="button" @click="resendOtp()" :disabled="busy">{{ __('web.startup_initial_dd.otp.resend') }}</button>
            </template>
        </div>

        <div class="sdd-back">
            <button type="button" @click="backToPhone()">{{ __('web.startup_initial_dd.otp.change_phone') }}</button>
        </div>
    </form>

    {{-- STEP 3: redirecting --}}
    <div x-show="step === 'redirecting'" x-cloak style="text-align:center; padding:24px 0;">
        <div class="sdd-spinner" style="margin:0 auto 14px; border-color:var(--primary-200); border-top-color:var(--primary-600); width:32px; height:32px;"></div>
        <p style="color:var(--slate-700); font-weight:600;">{{ __('web.startup_initial_dd.redirecting') }}</p>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('startupInitialDd', (cfg) => ({
        step: 'phone',
        country: cfg.defaultCountry,
        phone: '',
        // `code` mirrors the assembled OTP. The OTP component owns
        // the input/paste/focus/key logic and dispatches `otp-input`
        // on every change; the host wrapper @otp-input listener
        // updates this value.
        code: '',
        otpLength: Math.max(2, Math.min(10, parseInt(cfg.otpLength, 10) || 4)),
        busy: false,
        error: '',
        maskedPhone: '',
        countdown: 0,
        countdownTimer: null,

        async sendOtp() {
            this.error = '';
            if (! this.phone) { this.error = @js(__('web.startup_initial_dd.start.phone_missing')); return; }
            this.busy = true;
            try {
                const full = '+' + this.country + this.phone.replace(/\D/g, '').replace(/^0+/, '');
                const res = await this.post(cfg.sendOtpUrl, { phone: full });
                if (! res.ok) {
                    this.error = this.errorLabel(res.body?.error);
                    this.busy = false;
                    return;
                }
                this.maskedPhone = res.body.masked_phone || '';
                this.countdown   = Math.max(30, Math.min(res.body.expires_in || cfg.otpSeconds, cfg.otpSeconds));
                this.startCountdown();
                this.step = 'otp';
                this.busy = false;
                this.error = '';
                // OTP component auto-focuses its first cell on mount.
            } catch (e) { this.error = @js(__('web.startup_initial_dd.errors.send_failed')); this.busy = false; }
        },

        async verifyOtp() {
            this.error = '';
            if (this.code.length < this.otpLength) return;
            this.busy = true;
            try {
                const res = await this.post(cfg.verifyOtpUrl, { code: this.code });
                if (! res.ok) {
                    this.busy = false;
                    this.error = this.errorLabel(res.body?.error);
                    this.clearOtpInputs();
                    return;
                }
                this.step = 'redirecting';
                this.stopCountdown();
                setTimeout(() => { window.location.href = res.body.redirect; }, 250);
            } catch (e) { this.error = @js(__('web.startup_initial_dd.errors.unexpected')); this.busy = false; }
        },

        async resendOtp() {
            if (this.busy) return;
            this.busy = true; this.error = '';
            try {
                const res = await this.post(cfg.resendOtpUrl, {});
                if (! res.ok) { this.error = this.errorLabel(res.body?.error); }
                else {
                    this.countdown = Math.max(30, Math.min(res.body.expires_in || cfg.otpSeconds, cfg.otpSeconds));
                    this.startCountdown();
                    this.clearOtpInputs();
                }
            } finally { this.busy = false; }
        },

        backToPhone() {
            this.step = 'phone'; this.error = '';
            this.clearOtpInputs(); this.stopCountdown();
        },

        // Dispatches `otp-reset` to the window — the OTP component
        // listens for it and clears its own digits + re-focuses cell 0.
        clearOtpInputs() {
            this.code = '';
            window.dispatchEvent(new CustomEvent('otp-reset'));
        },

        startCountdown() {
            this.stopCountdown();
            this.countdownTimer = setInterval(() => {
                if (this.countdown > 0) this.countdown--;
                else this.stopCountdown();
            }, 1000);
        },
        stopCountdown() {
            if (this.countdownTimer) { clearInterval(this.countdownTimer); this.countdownTimer = null; }
        },
        formatCountdown(s) {
            const m = Math.floor(s / 60);
            const r = s % 60;
            return m + ':' + String(r).padStart(2, '0');
        },

        async post(url, body) {
            const res = await fetch(url, {
                method: 'POST', credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json', 'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': cfg.csrf, 'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify(body || {}),
            });
            let data = null;
            try { data = await res.json(); } catch (_) {}
            return { ok: res.ok, body: data || {} };
        },

        errorLabel(code) {
            @php
                $sddErrors = [
                    'startup_not_found' => __('web.startup_initial_dd.errors.startup_not_found'),
                    'rate_limited'      => __('web.startup_initial_dd.errors.rate_limited'),
                    'sms_failed'        => __('web.startup_initial_dd.errors.sms_failed'),
                    'no_active_code'    => __('web.startup_initial_dd.errors.no_active_code'),
                    'expired'           => __('web.startup_initial_dd.errors.expired'),
                    'too_many_attempts' => __('web.startup_initial_dd.errors.too_many_attempts'),
                    'mismatch'          => __('web.startup_initial_dd.errors.mismatch'),
                    'no_pending_otp'    => __('web.startup_initial_dd.errors.no_pending_otp'),
                    'send_failed'       => __('web.startup_initial_dd.errors.send_failed'),
                    'startup_missing'   => __('web.startup_initial_dd.errors.startup_missing'),
                ];
            @endphp
            return (@json($sddErrors))[code] || @js(__('web.startup_initial_dd.errors.unexpected'));
        },
    }));
});
</script>
@endpush