<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/ShareKnowledge/ExternalRedirect.vue
//  Location: resources/js/Pages/Member/ShareKnowledge/ExternalRedirect.vue
//
//  External link warning page.
//  Every external URL shared on the platform goes through /go?url=
//  Member sees this page before being taken to the external site.
//
//  Shows:
//    - The destination domain (not full URL — privacy + clarity)
//    - A clear warning that InPractice cannot verify safety
//    - Cancel (go back) and Continue (open in new tab) buttons
// ══════════════════════════════════════════════════════════════════

import { computed }      from 'vue';
import { Head, router }  from '@inertiajs/vue3';
import { useAuthStore }  from '@/Stores/useAuthStore';
import AppLayout         from '@/Layouts/AppLayout.vue';

const props = defineProps({
    url: { type: String, required: true },
});

const authStore = useAuthStore();
const locale    = computed(() => authStore.locale);

// Extract domain only — never show full URL with paths/params
const domain = computed(() => {
    try {
        return new URL(props.url).hostname.replace('www.', '');
    } catch {
        return props.url;
    }
});

function goBack() {
    window.history.back();
}

function proceed() {
    window.open(props.url, '_blank', 'noopener,noreferrer');
    // After opening, send user back to where they came from
    window.history.back();
}
</script>

<template>
    <AppLayout :title="locale === 'ar' ? 'مغادرة InPractice' : 'Leaving InPractice'">
        <Head :title="locale === 'ar' ? 'تحذير: رابط خارجي' : 'External Link Warning'" />

        <div class="er-page">
            <div class="er-card">

                <!-- Warning icon -->
                <div class="er-icon">
                    <i class="ti ti-alert-triangle"></i>
                </div>

                <!-- Heading -->
                <h1 class="er-title">
                    {{ locale === 'ar' ? 'أنت على وشك مغادرة InPractice' : 'You are leaving InPractice' }}
                </h1>

                <!-- Domain display -->
                <div class="er-domain">
                    <i class="ti ti-world"></i>
                    <span>{{ domain }}</span>
                </div>

                <!-- Warning message -->
                <p class="er-warning">
                    {{ locale === 'ar'
                        ? 'لا تتحكم InPractice في المحتوى الخارجي ولا يمكنها ضمان أمانه. تأكد من أنك تثق في هذا الرابط قبل المتابعة.'
                        : 'InPractice does not control external content and cannot guarantee its safety. Make sure you trust this link before continuing.' }}
                </p>

                <!-- Safety tip -->
                <div class="er-tip">
                    <i class="ti ti-shield-check"></i>
                    <span>
                        {{ locale === 'ar'
                            ? 'نصيحة: إذا كنت لا تعرف المصدر أو بدا الرابط مريبًا، اضغط إلغاء.'
                            : 'Tip: If you don\'t know the source or the link looks suspicious, press Cancel.' }}
                    </span>
                </div>

                <!-- Actions -->
                <div class="er-actions">
                    <button class="er-btn-cancel" @click="goBack">
                        <i class="ti ti-arrow-left"></i>
                        {{ locale === 'ar' ? 'إلغاء، ارجع لـ InPractice' : 'Cancel, go back to InPractice' }}
                    </button>
                    <button class="er-btn-proceed" @click="proceed">
                        {{ locale === 'ar' ? 'متابعة إلى ' : 'Continue to ' }}{{ domain }}
                        <i class="ti ti-external-link"></i>
                    </button>
                </div>

            </div>
        </div>
    </AppLayout>
</template>

<style scoped>
.er-page {
    padding: 24px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
.er-card {
    width: 100%;
    max-width: 480px;
    background: var(--color-surface);
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.er-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: rgba(245, 158, 11, 0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    color: #F59E0B;
}
.er-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0;
}
.er-domain {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}
.er-domain i { color: var(--color-text-muted); }

.er-warning {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}
.er-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(29,158,117,0.07);
    border: 1px solid rgba(29,158,117,0.15);
    text-align: start;
}
.er-tip i { color: var(--color-primary); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.er-tip span { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }

.er-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}
.er-btn-cancel {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: 12px;
    border: 1.5px solid var(--color-border);
    background: transparent; color: var(--color-text-muted);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.15s; width: 100%;
}
.er-btn-cancel:hover { border-color: var(--color-primary); color: var(--color-primary); }
.er-btn-proceed {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: 12px;
    border: none;
    background: #F59E0B; color: #fff;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: opacity 0.15s; width: 100%;
}
.er-btn-proceed:hover { opacity: 0.9; }

@media (min-width: 480px) {
    .er-actions { flex-direction: row; }
    .er-btn-cancel, .er-btn-proceed { flex: 1; }
}
</style>
