<script setup lang="ts">
import { Form, Head, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';

type Declaration = {
    id: number;
    title: string;
    client_name: string;
};

type Props = {
    declaration: Declaration;
    token: string;
    submitUrl: string;
};

defineProps<Props>();

const page = usePage<{ flash?: { type?: string; message?: string } }>();
const flash = computed(() => page.props.flash);
</script>

<template>
    <div class="flex min-h-svh flex-col bg-background">
        <Head :title="`Refus - ${declaration.title}`" />

        <header class="border-b border-sidebar-border/70 px-4 py-4">
            <div class="mx-auto flex max-w-2xl items-center gap-3">
                <AppLogoIcon
                    class="size-8 fill-current text-[var(--foreground)]"
                />
                <div>
                    <h1 class="font-medium">{{ declaration.title }}</h1>
                    <p class="text-sm text-muted-foreground">
                        {{ declaration.client_name }}
                    </p>
                </div>
            </div>
        </header>

        <main class="mx-auto w-full max-w-2xl flex-1 p-4">
            <div
                v-if="flash?.message"
                class="mb-4 rounded-lg bg-green-100 p-3 text-sm text-green-800 dark:bg-green-900/30 dark:text-green-300"
            >
                {{ flash.message }}
            </div>
            <div class="space-y-6">
                <div>
                    <h2 class="text-lg font-medium">Refuser la situation</h2>
                    <p class="mt-1 text-sm text-muted-foreground">
                        Vous pouvez indiquer la raison de votre refus
                        (facultatif).
                    </p>
                </div>

                <Form
                    :action="submitUrl"
                    method="post"
                    class="space-y-4"
                    v-slot="{ processing }"
                >
                    <div class="space-y-2">
                        <Label for="reason">Raison du refus (facultatif)</Label>
                        <textarea
                            id="reason"
                            name="reason"
                            rows="4"
                            placeholder="Précisez si besoin..."
                            :disabled="processing"
                            class="flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                        />
                    </div>

                    <Button
                        type="submit"
                        variant="destructive"
                        :disabled="processing"
                    >
                        <Spinner v-if="processing" class="mr-2 size-4" />
                        Confirmer le refus
                    </Button>
                </Form>
            </div>
        </main>
    </div>
</template>
