<script setup lang="ts">
import InputError from "@/components/InputError.vue";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, router, useForm } from "@inertiajs/vue3";

const props = defineProps<{
    application: Record<string, any>;
    environment: Record<string, any>;
    schedulerModes: string[];
    buildStrategies: string[];
}>();

const buildConfig = props.environment.build_config ?? {};

const form = useForm({
    name: props.environment.name,
    branch: props.environment.branch,
    status: props.environment.status,
    scheduler_enabled: Boolean(props.environment.scheduler_enabled),
    scheduler_target_service_id: props.environment.scheduler_target_service_id ?? "",
    scheduler_mode: props.environment.scheduler_mode ?? "single",
    build_strategy: buildConfig.build_strategy ?? "target_server",
    php_version: buildConfig.php_version ?? "8.4",
    document_root: buildConfig.document_root ?? "public",
    health_path: buildConfig.health_path ?? "/up",
    js_package_manager: buildConfig.js_package_manager ?? "bun",
    js_build_command: buildConfig.js_build_command ?? "",
});

const destroyEnvironment = (): void => {
    if (!window.confirm(`Delete ${props.environment.name}?`)) {
        return;
    }

    router.delete(
        route("environments.destroy", {
            organisation: props.application.organisation_id,
            application: props.application.id,
            environment: props.environment.id,
        }),
    );
};
</script>

<template>
    <Head :title="`Edit ${environment.name}`" />

    <AppLayout
        :breadcrumbs="[
            {
                title: application.name,
                href: route('applications.show', {
                    organisation: $page.props.organisation.id,
                    application: application.id,
                }),
            },
            {
                title: environment.name,
                href: route('environments.show', {
                    organisation: $page.props.organisation.id,
                    application: application.id,
                    environment: environment.id,
                }),
            },
            { title: 'Edit' },
        ]"
    >
        <form
            class="flex h-full max-w-4xl flex-1 flex-col gap-5 p-4"
            @submit.prevent="
                form.put(
                    route('environments.update', {
                        organisation: $page.props.organisation.id,
                        application: application.id,
                        environment: environment.id,
                    }),
                )
            "
        >
            <div>
                <h2 class="text-3xl font-bold tracking-tight">Environment Settings</h2>
                <p class="mt-1 text-sm text-muted-foreground">
                    Branch, scheduler, build strategy, and health check configuration.
                </p>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Overview</CardTitle>
                </CardHeader>
                <CardContent class="grid gap-4 md:grid-cols-3">
                    <div class="grid gap-2">
                        <Label for="name">Name</Label>
                        <Input id="name" v-model="form.name" required />
                        <InputError :message="form.errors.name" />
                    </div>
                    <div class="grid gap-2">
                        <Label for="branch">Branch</Label>
                        <Input id="branch" v-model="form.branch" required />
                        <InputError :message="form.errors.branch" />
                    </div>
                    <div class="grid gap-2">
                        <Label for="status">Status</Label>
                        <Input id="status" v-model="form.status" required />
                        <InputError :message="form.errors.status" />
                    </div>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Scheduler</CardTitle>
                    <CardDescription>Choose where scheduled commands should run.</CardDescription>
                </CardHeader>
                <CardContent class="grid gap-4 md:grid-cols-3">
                    <label class="flex items-center gap-2 text-sm">
                        <input v-model="form.scheduler_enabled" type="checkbox" class="size-4" />
                        Enabled
                    </label>
                    <div class="grid gap-2">
                        <Label for="scheduler_target_service_id">Target service</Label>
                        <Select v-model="form.scheduler_target_service_id">
                            <SelectTrigger id="scheduler_target_service_id">
                                <SelectValue placeholder="No target" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem
                                    v-for="service in environment.services"
                                    :key="service.id"
                                    :value="String(service.id)"
                                >
                                    {{ service.name }}
                                </SelectItem>
                            </SelectContent>
                        </Select>
                        <InputError :message="form.errors.scheduler_target_service_id" />
                    </div>
                    <div class="grid gap-2">
                        <Label for="scheduler_mode">Mode</Label>
                        <Select v-model="form.scheduler_mode">
                            <SelectTrigger id="scheduler_mode">
                                <SelectValue placeholder="Select mode" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem
                                    v-for="mode in schedulerModes"
                                    :key="mode"
                                    :value="mode"
                                >
                                    {{ mode.replace("_", " ") }}
                                </SelectItem>
                            </SelectContent>
                        </Select>
                        <InputError :message="form.errors.scheduler_mode" />
                    </div>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Build & Health</CardTitle>
                    <CardDescription
                        >Defaults used by deploy planning and runtime checks.</CardDescription
                    >
                </CardHeader>
                <CardContent class="grid gap-4 md:grid-cols-2">
                    <div class="grid gap-2">
                        <Label for="build_strategy">Build strategy</Label>
                        <Select v-model="form.build_strategy">
                            <SelectTrigger id="build_strategy">
                                <SelectValue placeholder="Select strategy" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem
                                    v-for="strategy in buildStrategies"
                                    :key="strategy"
                                    :value="strategy"
                                >
                                    {{ strategy.replace("_", " ") }}
                                </SelectItem>
                            </SelectContent>
                        </Select>
                        <InputError :message="form.errors.build_strategy" />
                    </div>
                    <div class="grid gap-2">
                        <Label for="php_version">PHP version</Label>
                        <Input id="php_version" v-model="form.php_version" />
                        <InputError :message="form.errors.php_version" />
                    </div>
                    <div class="grid gap-2">
                        <Label for="document_root">Document root</Label>
                        <Input id="document_root" v-model="form.document_root" />
                        <InputError :message="form.errors.document_root" />
                    </div>
                    <div class="grid gap-2">
                        <Label for="health_path">Health path</Label>
                        <Input id="health_path" v-model="form.health_path" />
                        <InputError :message="form.errors.health_path" />
                    </div>
                    <div class="grid gap-2">
                        <Label for="js_package_manager">JS package manager</Label>
                        <Input id="js_package_manager" v-model="form.js_package_manager" />
                        <InputError :message="form.errors.js_package_manager" />
                    </div>
                    <div class="grid gap-2">
                        <Label for="js_build_command">JS build command</Label>
                        <Input id="js_build_command" v-model="form.js_build_command" />
                        <InputError :message="form.errors.js_build_command" />
                    </div>
                </CardContent>
            </Card>

            <div class="flex flex-wrap justify-between gap-2">
                <Button type="button" variant="destructive" @click="destroyEnvironment">
                    Delete environment
                </Button>
                <Button type="submit" :disabled="form.processing">Save settings</Button>
            </div>
        </form>
    </AppLayout>
</template>
