<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, Link, router } from "@inertiajs/vue3";
import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-vue-next";

defineProps<{
    sourceProviders: Record<string, any>[];
}>();

const destroySourceProvider = (sourceProvider: Record<string, any>): void => {
    if (!window.confirm(`Delete ${sourceProvider.name}?`)) {
        return;
    }

    router.delete(
        route("source-providers.destroy", {
            organisation: route().params.organisation,
            source_provider: sourceProvider.id,
        }),
    );
};
</script>

<template>
    <Head title="Source Providers" />

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Organisation',
                href: route('organisations.show', { organisation: $page.props.organisation.id }),
            },
            { title: 'Source Providers' },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 p-4">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 class="text-3xl font-bold tracking-tight">Source Providers</h2>
                    <p class="mt-1 text-sm text-muted-foreground">
                        Git hosts used to classify application repository access.
                    </p>
                </div>
                <Button
                    :as="Link"
                    :href="
                        route('source-providers.create', {
                            organisation: $page.props.organisation.id,
                        })
                    "
                >
                    <PlusIcon class="size-4" />
                    Add source provider
                </Button>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Configured Source Providers</CardTitle>
                    <CardDescription>{{ sourceProviders.length }} providers</CardDescription>
                </CardHeader>
                <CardContent class="grid gap-2">
                    <div
                        v-for="sourceProvider in sourceProviders"
                        :key="sourceProvider.id"
                        class="flex flex-wrap items-center justify-between gap-3 rounded-md border p-3 text-sm"
                    >
                        <div>
                            <div class="flex flex-wrap items-center gap-2">
                                <span class="font-medium">{{ sourceProvider.name }}</span>
                                <Badge variant="outline">{{
                                    sourceProvider.type?.replace("_", " ")
                                }}</Badge>
                            </div>
                            <div class="mt-1 text-muted-foreground">
                                {{ sourceProvider.url ?? "No base URL configured" }}
                            </div>
                        </div>
                        <div class="flex gap-1">
                            <Button
                                :as="Link"
                                size="iconxs"
                                variant="ghost"
                                :href="
                                    route('source-providers.edit', {
                                        organisation: $page.props.organisation.id,
                                        source_provider: sourceProvider.id,
                                    })
                                "
                            >
                                <PencilIcon class="size-3" />
                            </Button>
                            <Button
                                size="iconxs"
                                variant="ghost"
                                @click="destroySourceProvider(sourceProvider)"
                            >
                                <Trash2Icon class="size-3" />
                            </Button>
                        </div>
                    </div>
                    <div
                        v-if="sourceProviders.length === 0"
                        class="rounded-md border border-dashed p-4 text-sm text-muted-foreground"
                    >
                        No source providers configured.
                    </div>
                </CardContent>
            </Card>
        </div>
    </AppLayout>
</template>
