<script>
    import { onMount } from 'svelte';
    import { gitService } from '../../../services/gitService';
    import { addToast as toast } from '../../../lib/toasts.js';

    let environments = [];

    onMount(async () => {
        try {
            environments = await gitService.getEnvironments();
        } catch (e) {
            toast(e.message, 'error');
        }
    });
</script>

<div class="p-6">
    <h1 class="text-2xl font-bold mb-6">Deployment Environments</h1>
    
    <div class="bg-white p-6 rounded shadow">
        <h2 class="text-xl font-semibold mb-4">Target Environments</h2>
        {#if environments.length === 0}
            <p class="text-gray-500">No deployment environments configured.</p>
        {:else}
            <ul class="divide-y">
                {#each environments as env}
                    <li class="py-3 flex justify-between items-center">
                        <div>
                            <span class="font-medium">{env.name}</span>
                            <div class="text-xs text-gray-400">{env.superset_url}</div>
                        </div>
                        <span class="px-2 py-1 text-xs rounded {env.is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
                            {env.is_active ? 'Active' : 'Inactive'}
                        </span>
                    </li>
                {/each}
            </ul>
        {/if}
    </div>
</div>