<script lang="ts">
    import { onMount } from 'svelte';
    import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
    import { goto } from '$app/navigation';
    import { Phone, Plus, Search, Mail, User, ExternalLink, X } from 'lucide-svelte';
    import { load_ae_obj_li__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
    import Contact_form from './ae_comp__contact_form.svelte';

    let contact_li: any[] = $state([]);
    let loading = $state(true);
    let show_add_form = $state(false);

    async function load_contacts() {
        if (!$ae_loc.account_id) return;
        loading = true;
        contact_li = await load_ae_obj_li__contact({
            api_cfg: $ae_api,
            for_obj_id: $ae_loc.account_id,
            enabled: 'all',
            log_lvl: 1
        });
        loading = false;
    }

    onMount(() => {
        if (!$ae_loc.manager_access) {
            goto('/core');
            return;
        }
        load_contacts();
    });
</script>

<div class="container mx-auto p-4 space-y-6">
    <header class="flex justify-between items-center">
        <div class="flex items-center gap-2">
            <Phone size={24} />
            <h1 class="h2">Contact Management</h1>
        </div>
        <button class="btn variant-filled-primary" onclick={() => show_add_form = !show_add_form}>
            {#if show_add_form}
                <X size={16} class="mr-2" /> Cancel
            {:else}
                <Plus size={16} class="mr-2" /> Add Contact
            {/if}
        </button>
    </header>

    {#if show_add_form}
        <div class="mb-8">
            <Contact_form 
                onSave={(new_con) => {
                    show_add_form = false;
                    load_contacts();
                    if (new_con.contact_id_random) {
                        goto(`/core/contacts/${new_con.contact_id_random}`);
                    }
                }}
                onCancel={() => show_add_form = false}
            />
        </div>
    {/if}

    {#if loading}
        <div class="placeholder animate-pulse h-64 w-full"></div>
    {:else if contact_li.length === 0}
        <div class="card p-8 text-center variant-soft">
            <p class="opacity-60">No contacts found for this account.</p>
        </div>
    {:else}
        <div class="table-container">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {#each contact_li as con}
                        <tr>
                            <td>
                                <div class="flex items-center gap-2">
                                    <User size={14} class="opacity-60" />
                                    {con.name || '--'}
                                </div>
                            </td>
                            <td>
                                <div class="flex items-center gap-2">
                                    <Mail size={14} class="opacity-60" />
                                    {con.email || '--'}
                                </div>
                            </td>
                            <td>{con.phone || '--'}</td>
                            <td>
                                <span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'}">
                                    {con.enable ? 'Enabled' : 'Disabled'}
                                </span>
                            </td>
                            <td class="text-right">
                                <a class="btn btn-sm variant-soft-primary" href="/core/contacts/{con.contact_id_random}">
                                    Manage <ExternalLink size={12} class="ml-2" />
                                </a>
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {/if}
</div>
