<script setup>
import { computed, ref } from 'vue'
import { Head, router, usePage } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'

defineOptions({ layout: AppLayout })

const props = defineProps({
  hasDisclaimer: Boolean,
})

const page = usePage()

const disclaimerAgreed = ref(false)

const isAuthenticated = computed(() => {
  return page.props.auth?.user != null
})

const canContinue = computed(() => {
  return !props.hasDisclaimer || disclaimerAgreed.value
})

const userInfo = computed(() => {
  const user = page.props.auth?.user
  if (!user) return null

  const parts = []
  if (user.job_title) parts.push(user.job_title)
  if (user.company_name) {
    if (parts.length > 0) {
      parts.push('at', user.company_name)
    } else {
      parts.push(user.company_name)
    }
  }

  return parts.length > 0 ? parts.join(' ') : null
})

const handleContinue = () => {
  router.post('/screening')
}
</script>

<template>
    <Head title="Welcome" />

    <div class="flex items-center justify-center py-16">
        <div class="text-center max-w-2xl mx-auto px-4">
            <h1 class="text-4xl font-bold text-white mb-4">Go / No Go</h1>
            <p v-if="userInfo" class="text-gray-400 mb-4">
                {{ userInfo }}
            </p>
            <p class="text-gray-400 mb-4 text-lg">
                Baker Tilly International Go/No Go Checklist
            </p>
            <p class="text-gray-400 mb-8">
                This tool helps you evaluate business opportunities through a structured assessment process.
                You will first complete a short pre-screening questionnaire, followed by a detailed category-specific checklist
                to determine whether to pursue (Go), decline (No Go), or escalate (Consult Leadership) an opportunity.
            </p>

            <!-- Disclaimer checkbox — only shown when authenticated and a disclaimer exists -->
            <div v-if="isAuthenticated && hasDisclaimer" class="flex items-start justify-center gap-3 mb-6">
                <label class="flex items-start gap-3 cursor-pointer select-none group">
                    <!-- Hidden native checkbox -->
                    <input
                        v-model="disclaimerAgreed"
                        type="checkbox"
                        class="sr-only peer"
                    />
                    <!-- Custom checkbox -->
                    <span
                        class="
                            mt-0.5 flex-shrink-0
                            w-5 h-5 rounded
                            border-2 border-gray-500
                            bg-transparent
                            flex items-center justify-center
                            transition-all duration-200
                            peer-checked:bg-primary peer-checked:border-primary
                            group-hover:border-gray-300
                        "
                        aria-hidden="true"
                    >
                        <!-- Checkmark — visible when checked via peer -->
                        <svg
                            class="w-3 h-3 text-gray-900 opacity-0 transition-opacity duration-200 peer-checked:opacity-100"
                            :class="{ 'opacity-100': disclaimerAgreed }"
                            viewBox="0 0 12 12"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M2 6l3 3 5-5"
                                stroke="currentColor"
                                stroke-width="1.8"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                    </span>
                    <!-- Label text -->
                    <span class="text-sm text-gray-400 text-left leading-relaxed">
                        I have read and agree to the
                        <a
                            href="/disclaimer"
                            class="text-primary underline underline-offset-2 hover:text-primary-dark transition-colors duration-150"
                        >
                            disclaimer
                        </a>
                    </span>
                </label>
            </div>

            <AppButton
                v-if="isAuthenticated"
                size="lg"
                :disabled="!canContinue"
                @click="handleContinue"
                data-cy="start-screening"
            >
                Continue
            </AppButton>
            <AppButton v-else size="lg" href="/login" external>
                Log in
            </AppButton>
        </div>
    </div>
</template>
