@extends('web.signup.layout')

@section('title', __('web.startup_create_meeting.title'))
@section('page_title', __('web.startup_create_meeting.page_title'))
@section('page_subtitle', '')

@push('styles')
<style>
    .cm-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) { .cm-card { padding: 22px; border-radius: 14px; } }

    /* Language switcher row above the hero. */
    .cm-lang {
        display: flex; justify-content: flex-end; gap: 6px;
        margin-bottom: 6px;
    }
    .cm-lang a {
        font-size: 12.5px; font-weight: 700; text-decoration: none;
        color: var(--slate-500);
        padding: 4px 10px; border-radius: 999px;
        border: 1px solid var(--slate-200);
        transition: all .15s;
    }
    .cm-lang a:hover { color: var(--slate-900); border-color: var(--slate-300); }
    .cm-lang a.is-active {
        color: var(--primary-700); background: var(--primary-50);
        border-color: var(--primary-200);
    }

    .cm-hero {
        text-align: center;
        padding-bottom: 22px;
        margin-bottom: 22px;
        border-bottom: 1px solid var(--slate-100);
    }
    .cm-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;
    }
    .cm-hero__icon svg { width: 26px; height: 26px; }
    .cm-hero__title {
        margin: 0 0 6px;
        font-size: 26px;
        font-weight: 800;
        color: var(--slate-900);
        letter-spacing: -.015em;
    }
    @media (max-width: 640px) { .cm-hero__title { font-size: 22px; } }
    .cm-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; }

    .cm-steps {
        display: flex; align-items: center; justify-content: center;
        gap: 8px; margin-bottom: 22px;
    }
    .cm-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;
        border: 2px solid transparent;
        transition: all .2s;
    }
    .cm-step--active { background: var(--primary-600); color: #fff; box-shadow: 0 0 0 4px var(--primary-100); }
    .cm-step--done   { background: var(--success-500); color: #fff; }
    .cm-step-line { width: 28px; height: 2px; background: var(--slate-200); border-radius: 2px; }
    .cm-step-line--done { background: var(--success-500); }

    .cm-field { display: grid; gap: 7px; }
    .cm-field > label {
        font-size: 13px; font-weight: 700; color: var(--slate-700);
    }
    .cm-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;
    }
    .cm-field input:focus {
        outline: none;
        border-color: var(--primary-600);
        box-shadow: 0 0 0 4px var(--primary-100);
    }
    .cm-field input:disabled { background: var(--slate-50); opacity: .7; }

    /* Country select on the LEFT in both LTR + RTL (direction:ltr). */
    .cm-phone {
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 8px;
        direction: ltr;
    }
    .cm-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;
    }
    .cm-phone input { text-align: left; direction: ltr; }

    .cm-otp {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        max-width: 320px;
        margin: 0 auto;
    }
    .cm-otp input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        height: 56px;
        padding: 0;
        text-align: center;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0;
        direction: ltr;
        background: #fff;
        color: var(--slate-900);
        border: 1px solid var(--slate-300);
        border-radius: var(--radius-md);
        outline: none;
        transition: border-color var(--transition), box-shadow var(--transition);
    }
    .cm-otp input:hover { border-color: var(--slate-400); }
    .cm-otp input:focus {
        border-color: var(--primary-600);
        box-shadow: 0 0 0 4px var(--primary-100);
    }
    .cm-otp input:disabled {
        background: var(--slate-50);
        color: var(--slate-500);
        cursor: not-allowed;
    }
    .cm-otp--error input {
        border-color: #f87171;
        box-shadow: 0 0 0 3px rgba(248,113,113,.16);
    }
    @media (max-width: 420px) {
        .cm-otp { gap: 6px; max-width: 280px; }
        .cm-otp input { height: 48px; font-size: 19px; }
    }
    @media (max-width: 340px) {
        .cm-otp { gap: 5px; max-width: 100%; }
        .cm-otp input { height: 44px; font-size: 18px; }
    }

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

    .cm-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;
    }
    .cm-submit:hover:not(:disabled) { background: var(--primary-700); transform: translateY(-1px); }
    .cm-submit:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
    .cm-spinner {
        width: 16px; height: 16px;
        border: 2px solid rgba(255,255,255,.4);
        border-top-color: #fff;
        border-radius: 999px;
        animation: cm-spin .8s linear infinite;
    }
    @keyframes cm-spin { to { transform: rotate(360deg); } }

    .cm-alert {
        margin-top: 14px; padding: 12px 14px;
        border-radius: 11px;
        font-size: 13.5px; line-height: 1.6;
        display: flex; align-items: flex-start; gap: 10px;
    }
    .cm-alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
    .cm-alert__icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }

    .cm-block { text-align: center; padding: 12px 4px 8px; }
    .cm-block__icon {
        width: 56px; height: 56px;
        border-radius: 16px;
        background: #fef3c7; color: #92400e;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 28px;
        margin-bottom: 12px;
    }
    .cm-block__title {
        font-size: 17px; font-weight: 800; color: var(--slate-900);
        margin-bottom: 6px;
    }
    .cm-block__sub {
        font-size: 13.5px; color: var(--slate-600); line-height: 1.7;
        margin-bottom: 16px;
    }
    .cm-block__meta {
        display: inline-flex; align-items: center; gap: 12px;
        padding: 12px 16px;
        background: var(--slate-50);
        border: 1px solid var(--slate-200);
        border-radius: 12px;
        font-size: 13.5px; color: var(--slate-700);
    }
    .cm-block__meta strong { color: var(--slate-900); font-weight: 800; }

    .cm-back {
        margin-top: 18px; text-align: center;
        font-size: 13px; color: var(--slate-500);
    }
    .cm-back button {
        background: none; border: 0; padding: 0;
        font: inherit; font-weight: 700;
        color: var(--primary-600); cursor: pointer;
    }

    .cm-phone-display {
        font-variant-numeric: tabular-nums;
        direction: ltr; display: inline-block;
        font-weight: 700; color: var(--slate-800);
    }
</style>
@endpush

@section('content')
@php $loc = app()->getLocale(); @endphp
<div class="cm-card"
     x-data="createStartupMeeting({
        defaultCountry: @js($defaultCountryCode),
        sendOtpUrl:     @js(route('startup-create-meeting.send-otp')),
        verifyOtpUrl:   @js(route('startup-create-meeting.verify-otp')),
        resendOtpUrl:   @js(route('startup-create-meeting.resend-otp')),
        otpSeconds:     @js($otpLengthSeconds),
        otpLength:      @js((int) \App\Services\Booking\MeetingBookingOtpService::OTP_LENGTH),
        csrf:           @js(csrf_token()),
        labels:         @js([
            'enterPhone'      => __('web.startup_create_meeting.errors.enter_phone'),
            'unexpected'      => __('web.startup_create_meeting.errors.unexpected'),
            'generic'         => __('web.startup_create_meeting.errors.generic'),
            'sendFailed'      => __('web.startup_create_meeting.errors.send_failed'),
            'otpHint'         => __('web.startup_create_meeting.otp_hint'),
            'statusPending'   => __('web.startup_create_meeting.status.pending'),
            'statusConfirmed' => __('web.startup_create_meeting.status.confirmed'),
            'errors'          => __('web.startup_create_meeting.errors'),
        ]),
     })"
     x-cloak>

    {{-- ── Language switcher (default English, AR/EN persists in session) ── --}}
    <div class="cm-lang">
        <a href="{{ route('locale.switch', 'en') }}" class="{{ $loc === 'en' ? 'is-active' : '' }}">{{ __('web.startup_create_meeting.lang.en') }}</a>
        <a href="{{ route('locale.switch', 'ar') }}" class="{{ $loc === 'ar' ? 'is-active' : '' }}">{{ __('web.startup_create_meeting.lang.ar') }}</a>
    </div>

    {{-- ── In-card hero ── --}}
    <div class="cm-hero">
        <span class="cm-hero__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="4" width="18" height="18" rx="3"/>
                <line x1="16" y1="2" x2="16" y2="6"/>
                <line x1="8"  y1="2" x2="8"  y2="6"/>
                <line x1="3"  y1="10" x2="21" y2="10"/>
                <path d="m9 16 2 2 4-4"/>
            </svg>
        </span>
        <h2 class="cm-hero__title">{{ __('web.startup_create_meeting.hero_title') }}</h2>
        <p class="cm-hero__sub">{{ __('web.startup_create_meeting.hero_sub') }}</p>
    </div>

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

    {{-- ══ STEP 1: phone entry ══ --}}
    <form @submit.prevent="sendOtp()" x-show="step === 'phone'">
        <div class="cm-field">
            <label for="cm-phone">{{ __('web.startup_create_meeting.phone_label') }}</label>
            <div class="cm-phone">
                <select x-model="country" :disabled="busy" aria-label="{{ __('web.startup_create_meeting.phone_country_aria') }}">
                    <option value="966">🇸🇦 +966</option>
                    <option value="20">🇪🇬 +20</option>
                    <option value="971">🇦🇪 +971</option>
                    <option value="965">🇰🇼 +965</option>
                    <option value="973">🇧🇭 +973</option>
                    <option value="974">🇶🇦 +974</option>
                    <option value="968">🇴🇲 +968</option>
                    <option value="962">🇯🇴 +962</option>
                </select>
                <input id="cm-phone" type="tel" inputmode="numeric"
                       x-model="phone" :disabled="busy"
                       placeholder="{{ __('web.startup_create_meeting.phone_placeholder') }}"
                       autocomplete="tel-national" required>
            </div>
        </div>

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

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

    {{-- ══ STEP 2: OTP entry ══ --}}
    <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;">
                <span x-text="otpHint"></span>
                <span class="cm-phone-display" x-text="maskedPhone"></span>
            </div>
        </div>

        <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="cm-submit" :disabled="busy || code.length < otpLength" style="margin-top:20px;">
            <span x-show="!busy">{{ __('web.startup_create_meeting.verify') }}</span>
            <span x-show="busy" class="cm-spinner" aria-hidden="true"></span>
            <span x-show="busy">{{ __('web.startup_create_meeting.verifying') }}</span>
        </button>

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

        <div class="cm-resend">
            <template x-if="countdown > 0">
                <span>
                    {{ __('web.startup_create_meeting.resend_in') }}
                    <span class="cm-countdown" x-text="formatCountdown(countdown)"></span>
                </span>
            </template>
            <template x-if="countdown === 0">
                <button type="button" @click="resendOtp()" :disabled="busy">{{ __('web.startup_create_meeting.resend') }}</button>
            </template>
        </div>

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

    {{-- ══ STEP: redirecting ══ --}}
    <div x-show="step === 'redirecting'" x-cloak style="text-align:center; padding:24px 0;">
        <div class="cm-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_create_meeting.redirecting') }}</p>
    </div>

    {{-- ══ STEP: blocked ══ --}}
    <div x-show="step === 'blocked'" x-cloak class="cm-block">
        <div class="cm-block__icon" aria-hidden="true">
            <template x-if="blockedReason === 'attended'"><span>✅</span></template>
            <template x-if="blockedReason !== 'attended'"><span>📅</span></template>
        </div>

        <template x-if="blockedReason === 'attended'">
            <div>
                <div class="cm-block__title">{{ __('web.startup_create_meeting.blocked.attended_title') }}</div>
                <p class="cm-block__sub">{{ __('web.startup_create_meeting.blocked.attended_sub') }}</p>
            </div>
        </template>

        <template x-if="blockedReason !== 'attended'">
            <div>
                <div class="cm-block__title">{{ __('web.startup_create_meeting.blocked.upcoming_title') }}</div>
                <p class="cm-block__sub">{{ __('web.startup_create_meeting.blocked.upcoming_sub') }}</p>
            </div>
        </template>

        <div class="cm-block__meta" x-show="blockedMeeting">
            <span>📆 <strong x-text="blockedMeeting?.date || '—'"></strong></span>
            <span>🕒 <strong x-text="blockedMeeting?.time || '—'"></strong></span>
            <span x-show="blockedReason !== 'attended'">· <strong x-text="blockedStatusLabel"></strong></span>
        </div>
        <div class="cm-back">
            <button type="button" @click="backToPhone()">{{ __('web.startup_create_meeting.use_another_number') }}</button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('createStartupMeeting', (cfg) => ({
        step: 'phone',                  // phone | otp | redirecting | blocked
        country: cfg.defaultCountry,
        phone: '',
        code: '',
        otpLength: Math.max(2, Math.min(10, parseInt(cfg.otpLength, 10) || 4)),
        busy: false,
        error: '',
        maskedPhone: '',
        countdown: 0,
        countdownTimer: null,
        blockedMeeting: null,
        blockedReason: 'upcoming',
        labels: cfg.labels || {},

        get otpHint() {
            return (this.labels.otpHint || 'We sent a :count-digit code to').replace(':count', this.otpLength);
        },

        get blockedStatusLabel() {
            const s = this.blockedMeeting?.status;
            return ({
                pending:   this.labels.statusPending,
                confirmed: this.labels.statusConfirmed,
            })[s] || (s || '');
        },

        async sendOtp() {
            this.error = '';
            if (! this.phone) { this.error = this.labels.enterPhone; 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 = '';
            } catch (e) {
                this.error = this.labels.sendFailed;
                this.busy = false;
            }
        },

        clearOtpInputs() {
            this.code = '';
            window.dispatchEvent(new CustomEvent('otp-reset'));
        },

        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;
                    if (res.body?.error === 'has_attended_meeting' ||
                        res.body?.error === 'has_upcoming_meeting') {
                        this.blockedMeeting = res.body.blocked_meeting || null;
                        this.blockedReason  = res.body.error === 'has_attended_meeting'
                            ? 'attended'
                            : 'upcoming';
                        this.step = 'blocked';
                        this.stopCountdown();
                        return;
                    }
                    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 = this.labels.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.code = '';
            this.error = '';
            this.blockedMeeting = null;
            this.blockedReason  = 'upcoming';
            this.clearOtpInputs();
            this.stopCountdown();
        },

        startCountdown() {
            this.stopCountdown();
            this.countdownTimer = setInterval(() => {
                this.countdown = Math.max(0, this.countdown - 1);
                if (this.countdown === 0) 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) {
            return (this.labels.errors || {})[code] || this.labels.generic;
        },
    }));
});
</script>
@endpush