sexy/packages/frontend/src/routes/admin/videos/+page.svelte

<script lang="ts">
  import { invalidateAll } from "$app/navigation";
  import { toast } from "svelte-sonner";
  import { deleteVideo } from "$lib/services";
  import { getAssetUrl } from "$lib/api";
  import { Button } from "$lib/components/ui/button";
  import * as Dialog from "$lib/components/ui/dialog";
  import type { Video } from "$lib/types";

  const { data } = $props();

  let deleteTarget: Video | null = $state(null);
  let deleteOpen = $state(false);
  let deleting = $state(false);

  function confirmDelete(video: Video) {
    deleteTarget = video;
    deleteOpen = true;
  }

  async function handleDelete() {
    if (!deleteTarget) return;
    deleting = true;
    try {
      await deleteVideo(deleteTarget.id);
      toast.success("Video deleted");
      deleteOpen = false;
      deleteTarget = null;
      await invalidateAll();
    } catch {
      toast.error("Failed to delete video");
    } finally {
      deleting = false;
    }
  }
</script>

<div class="p-6">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold">Videos</h1>
    <Button href="/admin/videos/new">
      <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>New video
    </Button>
  </div>

  <div class="rounded-lg border border-border/40 overflow-hidden">
    <table class="w-full text-sm">
      <thead class="bg-muted/30">
        <tr>
          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Video</th>
          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Badges</th>
          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Plays</th>
          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Likes</th>
          <th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-border/30">
        {#each data.videos as video (video.id)}
          <tr class="hover:bg-muted/10 transition-colors">
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                {#if video.image}
                  <img
                    src={getAssetUrl(video.image, "mini")}
                    alt=""
                    class="h-10 w-16 rounded object-cover"
                  />
                {:else}
                  <div
                    class="h-10 w-16 rounded bg-muted/50 flex items-center justify-center text-muted-foreground"
                  >
                    <span class="icon-[ri--film-line] h-5 w-5"></span>
                  </div>
                {/if}
                <div>
                  <p class="font-medium">{video.title}</p>
                  <p class="text-xs text-muted-foreground">{video.slug}</p>
                </div>
              </div>
            </td>
            <td class="px-4 py-3">
              <div class="flex gap-1">
                {#if video.premium}
                  <span
                    class="px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-500/10 text-yellow-600"
                    >Premium</span
                  >
                {/if}
                {#if video.featured}
                  <span class="px-1.5 py-0.5 rounded text-xs font-medium bg-primary/10 text-primary"
                    >Featured</span
                  >
                {/if}
              </div>
            </td>
            <td class="px-4 py-3 text-muted-foreground">{video.plays_count ?? 0}</td>
            <td class="px-4 py-3 text-muted-foreground">{video.likes_count ?? 0}</td>
            <td class="px-4 py-3 text-right">
              <div class="flex items-center justify-end gap-1">
                <Button size="sm" variant="ghost" href="/admin/videos/{video.id}">
                  <span class="icon-[ri--edit-line] h-4 w-4"></span>
                </Button>
                <Button
                  size="sm"
                  variant="ghost"
                  class="text-destructive hover:text-destructive hover:bg-destructive/10"
                  onclick={() => confirmDelete(video)}
                >
                  <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
                </Button>
              </div>
            </td>
          </tr>
        {/each}

        {#if data.videos.length === 0}
          <tr>
            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">No videos yet</td>
          </tr>
        {/if}
      </tbody>
    </table>
  </div>
</div>

<Dialog.Root bind:open={deleteOpen}>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Delete video</Dialog.Title>
      <Dialog.Description>
        Permanently delete <strong>{deleteTarget?.title}</strong>? This cannot be undone.
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
      <Button variant="destructive" disabled={deleting} onclick={handleDelete}>
        {deleting ? "Deleting…" : "Delete"}
      </Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>