<script lang="ts">
    import { goto } from "$app/navigation";
    import Icon from "$lib/components/atoms/icon.svelte";
    import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
    import { Button } from "$lib/components/ui/button";
    import { buttonVariants } from "$lib/components/ui/button";
    import * as Card from "$lib/components/ui/card";
    import { Input } from "$lib/components/ui/input";
    import * as Table from "$lib/components/ui/table";
    import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
    import { mainNavTree } from "$lib/core/constants";
    import { filesVM } from "$lib/domains/files/files.vm.svelte";
    import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
    import { breadcrumbs } from "$lib/global.stores";
    import Smartphone from "@lucide/svelte/icons/smartphone";
    import RefreshCw from "@lucide/svelte/icons/refresh-cw";
    import Search from "@lucide/svelte/icons/search";
    import Trash2 from "@lucide/svelte/icons/trash-2";
    import { onDestroy, onMount } from "svelte";

    breadcrumbs.set([mainNavTree[0]]);

    onMount(async () => {
        await mobileVM.refreshDevices();
        mobileVM.startDevicesPolling(5000);
    });

    onDestroy(() => {
        mobileVM.stopDevicesPolling();
    });
</script>

<MaxWidthWrapper cls="space-y-4">
    <Card.Root>
        <Card.Header>
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-2">
                    <Icon icon={Smartphone} cls="h-5 w-5 text-primary" />
                    <Card.Title>Devices</Card.Title>
                    <span class="text-muted-foreground text-xs">
                        {mobileVM.devicesTotal} total
                    </span>
                </div>
                <div class="grid grid-cols-2 gap-2 sm:flex sm:items-center">
                    <Button
                        variant="outline"
                        size="sm"
                        onclick={() => void filesVM.cleanupDanglingFiles()}
                        disabled={filesVM.cleanupLoading}
                        class="col-span-1"
                    >
                        <Icon
                            icon={Trash2}
                            cls={`h-4 w-4 mr-2 ${filesVM.cleanupLoading ? "animate-spin" : ""}`}
                        />
                        <span class="truncate">Cleanup Storage</span>
                    </Button>
                    <Button
                        variant="outline"
                        size="sm"
                        onclick={() => void mobileVM.refreshDevices()}
                        disabled={mobileVM.devicesLoading}
                        class="col-span-1"
                    >
                        <Icon
                            icon={RefreshCw}
                            cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
                        />
                        <span class="hidden sm:inline">Refresh</span>
                    </Button>
                </div>
            </div>

            <div class="relative mt-2 w-full sm:max-w-sm">
                <Icon
                    icon={Search}
                    cls="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
                />
                <Input
                    class="pl-10"
                    placeholder="Search device name/id/model..."
                    bind:value={mobileVM.devicesSearch}
                    oninput={() => {
                        mobileVM.devicesPage = 1;
                        void mobileVM.refreshDevices();
                    }}
                />
            </div>
        </Card.Header>

        <Card.Content>
            {#if !mobileVM.devicesLoading && mobileVM.devices.length === 0}
                <div class="py-10 text-center text-sm text-muted-foreground">
                    No devices registered yet.
                </div>
            {:else}
                <div class="space-y-3 md:hidden">
                    {#each mobileVM.devices as device (device.id)}
                        <div
                            class="rounded-lg border bg-background p-3"
                            role="button"
                            tabindex="0"
                            onclick={() => goto(`/devices/${device.id}`)}
                            onkeydown={(e) => {
                                if (e.key === "Enter" || e.key === " ") {
                                    e.preventDefault();
                                    void goto(`/devices/${device.id}`);
                                }
                            }}
                        >
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-medium">{device.name}</p>
                                    <p class="text-muted-foreground truncate text-xs">
                                        {device.externalDeviceId}
                                    </p>
                                </div>
                                <AlertDialog.Root>
                                    <AlertDialog.Trigger
                                        class={buttonVariants({
                                            variant: "destructive",
                                            size: "sm",
                                        })}
                                        disabled={mobileVM.deletingDeviceId === device.id}
                                        onclick={(e) => e.stopPropagation()}
                                    >
                                        <Icon icon={Trash2} cls="h-4 w-4" />
                                    </AlertDialog.Trigger>
                                    <AlertDialog.Content>
                                        <AlertDialog.Header>
                                            <AlertDialog.Title>
                                                Delete device?
                                            </AlertDialog.Title>
                                            <AlertDialog.Description>
                                                This deletes the device and all related SMS/media data.
                                                Files in storage linked to this device are also removed.
                                            </AlertDialog.Description>
                                        </AlertDialog.Header>
                                        <AlertDialog.Footer>
                                            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
                                            <AlertDialog.Action
                                                onclick={async (e) => {
                                                    e.stopPropagation();
                                                    await mobileVM.deleteDevice(device.id);
                                                }}
                                            >
                                                Delete
                                            </AlertDialog.Action>
                                        </AlertDialog.Footer>
                                    </AlertDialog.Content>
                                </AlertDialog.Root>
                            </div>

                            <div class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
                                <div>
                                    <p class="text-muted-foreground">Manufacturer / Model</p>
                                    <p class="truncate">{device.manufacturer} / {device.model}</p>
                                </div>
                                <div>
                                    <p class="text-muted-foreground">Android</p>
                                    <p>{device.androidVersion}</p>
                                </div>
                                <div>
                                    <p class="text-muted-foreground">Created</p>
                                    <p class="truncate">
                                        {new Date(device.createdAt).toLocaleString()}
                                    </p>
                                </div>
                                <div>
                                    <p class="text-muted-foreground">Last Ping</p>
                                    <p class="truncate">
                                        {mobileVM.formatLastPing(device.lastPingAt)}
                                    </p>
                                </div>
                            </div>
                        </div>
                    {/each}
                </div>

                <div class="hidden md:block">
                    <Table.Root>
                        <Table.Header>
                            <Table.Row>
                                <Table.Head>Device</Table.Head>
                                <Table.Head>Manufacturer / Model</Table.Head>
                                <Table.Head>Android</Table.Head>
                                <Table.Head>Created</Table.Head>
                                <Table.Head>Last Ping</Table.Head>
                                <Table.Head>Actions</Table.Head>
                            </Table.Row>
                        </Table.Header>
                        <Table.Body>
                            {#each mobileVM.devices as device (device.id)}
                                <Table.Row
                                    class="cursor-pointer"
                                    onclick={() => goto(`/devices/${device.id}`)}
                                >
                                    <Table.Cell>
                                        <div class="font-medium">{device.name}</div>
                                        <div class="text-muted-foreground text-xs">
                                            {device.externalDeviceId}
                                        </div>
                                    </Table.Cell>
                                    <Table.Cell>
                                        {device.manufacturer} / {device.model}
                                    </Table.Cell>
                                    <Table.Cell>{device.androidVersion}</Table.Cell>
                                    <Table.Cell>
                                        {new Date(device.createdAt).toLocaleString()}
                                    </Table.Cell>
                                    <Table.Cell>
                                        {mobileVM.formatLastPing(device.lastPingAt)}
                                    </Table.Cell>
                                    <Table.Cell>
                                        <AlertDialog.Root>
                                            <AlertDialog.Trigger
                                                class={buttonVariants({
                                                    variant: "destructive",
                                                    size: "sm",
                                                })}
                                                disabled={mobileVM.deletingDeviceId ===
                                                    device.id}
                                                onclick={(e) => e.stopPropagation()}
                                            >
                                                <Icon
                                                    icon={Trash2}
                                                    cls="h-4 w-4"
                                                />
                                                Delete
                                            </AlertDialog.Trigger>
                                            <AlertDialog.Content>
                                                <AlertDialog.Header>
                                                    <AlertDialog.Title>
                                                        Delete device?
                                                    </AlertDialog.Title>
                                                    <AlertDialog.Description>
                                                        This deletes the device and all related SMS/media data.
                                                        Files in storage linked to this device are also removed.
                                                    </AlertDialog.Description>
                                                </AlertDialog.Header>
                                                <AlertDialog.Footer>
                                                    <AlertDialog.Cancel>
                                                        Cancel
                                                    </AlertDialog.Cancel>
                                                    <AlertDialog.Action
                                                        onclick={async (e) => {
                                                            e.stopPropagation();
                                                            await mobileVM.deleteDevice(
                                                                device.id,
                                                            );
                                                        }}
                                                    >
                                                        Delete
                                                    </AlertDialog.Action>
                                                </AlertDialog.Footer>
                                            </AlertDialog.Content>
                                        </AlertDialog.Root>
                                    </Table.Cell>
                                </Table.Row>
                            {/each}
                        </Table.Body>
                    </Table.Root>
                </div>
            {/if}
        </Card.Content>
    </Card.Root>
</MaxWidthWrapper>
