<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import { Plus } from '@lucide/vue';
import Heading from '@/components/Heading.vue';
import InputError from '@/components/InputError.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

interface Platform {
    id: number;
    name: string;
    slug: string;
    ad_type: string;
    countries: string | null;
    is_active: boolean;
    sort_order: number;
}

interface AdTypeOption { value: string; label: string; active: boolean; }

const props = defineProps<{
    platforms: Platform[];
    adTypes: AdTypeOption[];
}>();

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Ad Platform', href: '/ad-platforms' },
        ] as BreadcrumbItem[],
    },
});

const adTypeLabels: Record<string, string> = Object.fromEntries(props.adTypes.map((t) => [t.value, t.label]));

const form = useForm({
    name: '',
    ad_type: 'affiliate',
    countries: '',
    is_active: true,
    sort_order: 0,
});

const submit = () => {
    form.post('/ad-platforms', {
        onSuccess: () => form.reset(),
    });
};

const toggleActive = (platform: Platform) => {
    const toggleForm = useForm({
        name: platform.name,
        ad_type: platform.ad_type,
        countries: platform.countries ?? '',
        is_active: !platform.is_active,
        sort_order: platform.sort_order,
    });
    toggleForm.put(`/ad-platforms/${platform.id}`);
};
</script>

<template>
    <Head title="Ad Platform" />

    <div class="flex flex-col space-y-6">
        <div class="flex items-center justify-between gap-4">
            <Heading title="Ad Platform" description="Kelola platform/marketplace iklan" />
            <Dialog>
                <DialogTrigger as-child>
                    <Button>
                        <Plus class="size-4" />
                        Tambah Platform
                    </Button>
                </DialogTrigger>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Platform Baru</DialogTitle>
                        <DialogDescription>Buat platform/marketplace iklan.</DialogDescription>
                    </DialogHeader>
                    <form @submit.prevent="submit" class="space-y-4">
                        <div class="grid gap-2">
                            <Label for="name">Nama Platform <span class="text-destructive">*</span></Label>
                            <Input id="name" v-model="form.name" required />
                            <InputError :message="form.errors.name" />
                        </div>
                        <div class="grid gap-2">
                            <Label for="ad_type">Jenis Iklan <span class="text-destructive">*</span></Label>
                            <select id="ad_type" v-model="form.ad_type" class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                                <option v-for="t in props.adTypes" :key="t.value" :value="t.value">{{ t.label }}</option>
                            </select>
                            <InputError :message="form.errors.ad_type" />
                        </div>
                        <div class="grid gap-2">
                            <Label for="countries">Negara (pisah koma, mis. ID,MY,PH)</Label>
                            <Input id="countries" v-model="form.countries" placeholder="ID" />
                            <InputError :message="form.errors.countries" />
                        </div>
                        <DialogFooter>
                            <Button type="submit" :disabled="form.processing">Simpan</Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </div>

        <div class="overflow-hidden rounded-xl border">
            <table class="w-full text-sm">
                <thead class="bg-muted/50 text-left text-xs uppercase text-muted-foreground">
                    <tr>
                        <th class="px-4 py-3 font-medium">Nama</th>
                        <th class="px-4 py-3 font-medium">Jenis</th>
                        <th class="px-4 py-3 font-medium">Negara</th>
                        <th class="px-4 py-3 font-medium text-center">Status</th>
                        <th class="px-4 py-3 font-medium text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    <tr v-for="p in props.platforms" :key="p.id" class="hover:bg-muted/30">
                        <td class="px-4 py-3 font-medium">{{ p.name }}</td>
                        <td class="px-4 py-3 text-muted-foreground">{{ adTypeLabels[p.ad_type] ?? p.ad_type }}</td>
                        <td class="px-4 py-3 font-mono text-xs text-muted-foreground">{{ p.countries ?? '—' }}</td>
                        <td class="px-4 py-3 text-center">
                            <Badge :variant="p.is_active ? 'default' : 'outline'">
                                {{ p.is_active ? 'Aktif' : 'Coming Soon' }}
                            </Badge>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <Button variant="ghost" size="sm" @click="toggleActive(p)">
                                {{ p.is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                            </Button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
