<script setup>
import { ref } from 'vue';
import { Head, Link } from '@inertiajs/vue3';
import MobileAppLayout from '@/Layouts/MobileAppLayout.vue';
import AppCard from '@/Components/ui/AppCard.vue';
import StatusBadge from '@/Components/ui/StatusBadge.vue';

const props = defineProps({
    referral: {
        type: Object,
        required: true,
    },
    referrals: {
        type: Object,
        required: true,
    },
});

const copied = ref(false);

const copyLink = async () => {
    const link = props.referral?.link;
    if (!link) return;

    try {
        await navigator.clipboard.writeText(link);
        copied.value = true;
        setTimeout(() => (copied.value = false), 1500);
    } catch {
        copied.value = false;
    }
};
</script>

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

    <MobileAppLayout title="Referrals" subtitle="Share your code and track referral rewards">
        <div class="space-y-4">
            <section class="rounded-3xl bg-gradient-to-br from-emerald-700 via-emerald-600 to-teal-700 p-4 text-white shadow-lg">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <div class="text-xs uppercase tracking-[0.16em] text-emerald-100">Referral Program</div>
                        <div class="mt-2 text-lg font-semibold">
                            {{ referral.enabled ? 'Active' : 'Currently Disabled' }}
                        </div>
                        <div class="mt-1 text-xs text-emerald-100">
                            Default reward: NGN {{ referral.default_reward_amount || '0.00' }}
                        </div>
                    </div>
                    <span class="rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-semibold">
                        {{ referral.enabled ? 'Enabled' : 'Disabled' }}
                    </span>
                </div>

                <div class="mt-4 grid grid-cols-2 gap-2">
                    <div class="rounded-2xl bg-white/10 p-3 ring-1 ring-white/10">
                        <div class="text-[11px] uppercase tracking-wide text-emerald-100">Code</div>
                        <div class="mt-1 font-mono text-sm font-semibold">{{ referral.code }}</div>
                    </div>
                    <div class="rounded-2xl bg-white/10 p-3 ring-1 ring-white/10">
                        <div class="text-[11px] uppercase tracking-wide text-emerald-100">Reward Total</div>
                        <div class="mt-1 text-sm font-semibold">NGN {{ referral.reward_total || '0.00' }}</div>
                    </div>
                </div>
            </section>

            <AppCard title="Share Referral Link" subtitle="Send this link to friends. Their registration page will auto-fill your code.">
                <div class="space-y-3">
                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-3 text-xs break-all text-slate-700">
                        {{ referral.link }}
                    </div>
                    <div class="flex items-center justify-between gap-2">
                        <Link :href="route('register', { ref: referral.code })" class="text-xs font-medium text-slate-600 underline underline-offset-4">
                            Preview registration link
                        </Link>
                        <button
                            type="button"
                            class="rounded-xl border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 disabled:opacity-50"
                            :disabled="!referral.enabled"
                            @click="copyLink"
                        >
                            {{ copied ? 'Copied' : 'Copy Link' }}
                        </button>
                    </div>
                </div>
            </AppCard>

            <AppCard title="Referral Summary">
                <div class="grid grid-cols-2 gap-2">
                    <div class="rounded-2xl border border-slate-200 bg-white p-3">
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Total</div>
                        <div class="mt-1 text-sm font-semibold text-slate-900">{{ referral.counts?.total ?? 0 }}</div>
                    </div>
                    <div class="rounded-2xl border border-amber-200 bg-amber-50 p-3">
                        <div class="text-[11px] uppercase tracking-wide text-amber-700">Pending</div>
                        <div class="mt-1 text-sm font-semibold text-amber-900">{{ referral.counts?.pending ?? 0 }}</div>
                    </div>
                    <div class="rounded-2xl border border-emerald-200 bg-emerald-50 p-3">
                        <div class="text-[11px] uppercase tracking-wide text-emerald-700">Rewarded</div>
                        <div class="mt-1 text-sm font-semibold text-emerald-900">{{ referral.counts?.rewarded ?? 0 }}</div>
                    </div>
                    <div class="rounded-2xl border border-rose-200 bg-rose-50 p-3">
                        <div class="text-[11px] uppercase tracking-wide text-rose-700">Cancelled</div>
                        <div class="mt-1 text-sm font-semibold text-rose-900">{{ referral.counts?.cancelled ?? 0 }}</div>
                    </div>
                </div>
            </AppCard>

            <AppCard title="Referred Users">
                <div class="space-y-2">
                    <div
                        v-for="item in referrals.data"
                        :key="item.id"
                        class="rounded-2xl border border-slate-200 bg-white p-3"
                    >
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <div class="truncate text-sm font-semibold text-slate-900">{{ item.referred_user?.name || 'User' }}</div>
                                <div class="truncate text-xs text-slate-500">{{ item.referred_user?.email || '-' }}</div>
                            </div>
                            <StatusBadge :status="item.status" />
                        </div>

                        <div class="mt-2 grid grid-cols-2 gap-2 text-xs">
                            <div class="rounded-xl bg-slate-50 px-2 py-1.5">
                                <div class="text-slate-500">Joined</div>
                                <div class="truncate font-medium text-slate-700">{{ item.created_at || '-' }}</div>
                            </div>
                            <div class="rounded-xl bg-slate-50 px-2 py-1.5">
                                <div class="text-slate-500">Reward</div>
                                <div class="font-semibold text-slate-900">NGN {{ item.reward_amount || '0.00' }}</div>
                            </div>
                        </div>
                    </div>

                    <div v-if="(referrals.data || []).length === 0" class="rounded-2xl border border-dashed border-slate-300 p-4 text-sm text-slate-500">
                        No referrals yet.
                    </div>
                </div>
            </AppCard>
        </div>
    </MobileAppLayout>
</template>
