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

<script lang="ts">
  import { goto } from "$app/navigation";
  import { toast } from "svelte-sonner";
  import { updateVideo, setVideoModels, uploadFile } from "$lib/services";
  import { Button } from "$lib/components/ui/button";
  import { Input } from "$lib/components/ui/input";
  import { Label } from "$lib/components/ui/label";
  import { Textarea } from "$lib/components/ui/textarea";
  import { TagsInput } from "$lib/components/ui/tags-input";
  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
  import { getAssetUrl } from "$lib/api";

  const { data } = $props();

  let title = $state(data.video.title);
  let slug = $state(data.video.slug);
  let description = $state(data.video.description ?? "");
  let tags = $state<string[]>(data.video.tags ?? []);
  let premium = $state(data.video.premium ?? false);
  let featured = $state(data.video.featured ?? false);
  let uploadDate = $state(
    data.video.upload_date ? new Date(data.video.upload_date).toISOString().slice(0, 16) : "",
  );
  let imageId = $state<string | null>(data.video.image ?? null);
  let movieId = $state<string | null>(data.video.movie ?? null);
  let selectedModelIds = $state<string[]>(
    data.video.models?.map((m: { id: string }) => m.id) ?? [],
  );
  let saving = $state(false);

  async function handleImageUpload(files: File[]) {
    const file = files[0];
    if (!file) return;
    const fd = new FormData();
    fd.append("file", file);
    try {
      const res = await uploadFile(fd);
      imageId = res.id;
      toast.success("Cover image uploaded");
    } catch {
      toast.error("Image upload failed");
    }
  }

  async function handleVideoUpload(files: File[]) {
    const file = files[0];
    if (!file) return;
    const fd = new FormData();
    fd.append("file", file);
    try {
      const res = await uploadFile(fd);
      movieId = res.id;
      toast.success("Video uploaded");
    } catch {
      toast.error("Video upload failed");
    }
  }

  function toggleModel(id: string) {
    selectedModelIds = selectedModelIds.includes(id)
      ? selectedModelIds.filter((m) => m !== id)
      : [...selectedModelIds, id];
  }

  async function handleSubmit() {
    saving = true;
    try {
      await updateVideo({
        id: data.video.id,
        title,
        slug,
        description: description || undefined,
        imageId: imageId || undefined,
        movieId: movieId || undefined,
        tags,
        premium,
        featured,
        uploadDate: uploadDate || undefined,
      });
      await setVideoModels(data.video.id, selectedModelIds);
      toast.success("Video updated");
      goto("/admin/videos");
    } catch (e: any) {
      toast.error(e?.message ?? "Failed to update video");
    } finally {
      saving = false;
    }
  }
</script>

<div class="p-6 max-w-2xl">
  <div class="flex items-center gap-4 mb-6">
    <Button variant="ghost" href="/admin/videos" size="sm">
      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
    </Button>
    <h1 class="text-2xl font-bold">Edit video</h1>
  </div>

  <div class="space-y-5">
    <div class="grid grid-cols-2 gap-4">
      <div class="space-y-1.5">
        <Label for="title">Title *</Label>
        <Input id="title" bind:value={title} placeholder="Video title" />
      </div>
      <div class="space-y-1.5">
        <Label for="slug">Slug *</Label>
        <Input id="slug" bind:value={slug} placeholder="video-slug" />
      </div>
    </div>

    <div class="space-y-1.5">
      <Label for="description">Description</Label>
      <Textarea id="description" bind:value={description} rows={3} />
    </div>

    <div class="space-y-1.5">
      <Label>Cover image</Label>
      {#if imageId}
        <img
          src={getAssetUrl(imageId, "thumbnail")}
          alt=""
          class="h-24 rounded object-cover mb-2"
        />
      {/if}
      <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
    </div>

    <div class="space-y-1.5">
      <Label>Video file</Label>
      {#if movieId}
        <p class="text-xs text-muted-foreground mb-1">Current file: {movieId}</p>
      {/if}
      <FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
    </div>

    <div class="space-y-1.5">
      <Label>Tags</Label>
      <TagsInput bind:value={tags} />
    </div>

    <div class="space-y-1.5">
      <Label for="uploadDate">Publish date</Label>
      <Input id="uploadDate" type="datetime-local" bind:value={uploadDate} />
    </div>

    <div class="flex gap-6">
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" bind:checked={premium} class="rounded" />
        <span class="text-sm">Premium</span>
      </label>
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" bind:checked={featured} class="rounded" />
        <span class="text-sm">Featured</span>
      </label>
    </div>

    {#if data.models.length > 0}
      <div class="space-y-2">
        <Label>Models</Label>
        <div class="flex flex-wrap gap-2">
          {#each data.models as model (model.id)}
            <button
              type="button"
              class={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
                selectedModelIds.includes(model.id)
                  ? "border-primary bg-primary/10 text-primary"
                  : "border-border/40 text-muted-foreground hover:border-primary/40"
              }`}
              onclick={() => toggleModel(model.id)}
            >
              {model.artist_name || model.id}
            </button>
          {/each}
        </div>
      </div>
    {/if}

    <div class="flex gap-3 pt-2">
      <Button onclick={handleSubmit} disabled={saving}>
        {saving ? "Saving…" : "Save changes"}
      </Button>
      <Button variant="outline" href="/admin/videos">Cancel</Button>
    </div>
  </div>
</div>