<script lang="ts">
  import { untrack } from "svelte";
  import { goto } from "$app/navigation";
  import { toast } from "svelte-sonner";
  import { _ } from "svelte-i18n";
  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";
  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
  import { DatePicker } from "$lib/components/ui/date-picker";

  const { data } = $props();

  let title = $state(untrack(() => data.video.title));
  let slug = $state(untrack(() => data.video.slug));
  let description = $state(untrack(() => data.video.description ?? ""));
  let tags = $state<string[]>(untrack(() => data.video.tags ?? []));
  let premium = $state(untrack(() => data.video.premium ?? false));
  let featured = $state(untrack(() => data.video.featured ?? false));
  let uploadDate = $state(
    untrack(() => data.video.upload_date ? new Date(data.video.upload_date).toISOString().slice(0, 16) : ""),
  );
  let imageId = $state<string | null>(untrack(() => data.video.image ?? null));
  let movieId = $state<string | null>(untrack(() => data.video.movie ?? null));
  let selectedModelIds = $state<string[]>(
    untrack(() => data.video.models?.map((m: { id: string }) => m.id) ?? []),
  );
  $effect(() => {
    title = data.video.title;
    slug = data.video.slug;
    description = data.video.description ?? "";
    tags = data.video.tags ?? [];
    premium = data.video.premium ?? false;
    featured = data.video.featured ?? false;
    uploadDate = data.video.upload_date
      ? new Date(data.video.upload_date).toISOString().slice(0, 16)
      : "";
    imageId = data.video.image ?? null;
    movieId = data.video.movie ?? null;
    selectedModelIds = 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($_("admin.video_form.cover_uploaded"));
    } catch {
      toast.error($_("admin.common.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($_("admin.video_form.video_uploaded"));
    } catch {
      toast.error($_("admin.video_form.video_upload_failed"));
    }
  }

  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($_("admin.video_form.update_success"));
      goto("/admin/videos");
    } catch (e) {
      toast.error((e instanceof Error ? e.message : null) ?? $_("admin.video_form.update_error"));
    } finally {
      saving = false;
    }
  }
</script>

<div class="p-3 sm: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>{$_("common.back")}
    </Button>
    <h1 class="text-2xl font-bold">{$_("admin.video_form.edit_title")}</h1>
  </div>

  <div class="space-y-5">
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div class="space-y-1.5">
        <Label for="title">{$_("admin.common.title_field")}</Label>
        <Input
          id="title"
          bind:value={title}
          placeholder={$_("admin.video_form.title_placeholder")}
        />
      </div>
      <div class="space-y-1.5">
        <Label for="slug">{$_("admin.common.slug_field")}</Label>
        <Input id="slug" bind:value={slug} placeholder={$_("admin.video_form.slug_placeholder")} />
      </div>
    </div>

    <div class="space-y-1.5">
      <Label for="description">{$_("admin.video_form.description")}</Label>
      <Textarea
        id="description"
        bind:value={description}
        placeholder={$_("admin.video_form.description_placeholder")}
        rows={3}
      />
    </div>

    <div class="space-y-1.5">
      <Label>{$_("admin.common.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>{$_("admin.video_form.video_file")}</Label>
      {#if movieId}
        <video
          src={getAssetUrl(movieId)}
          poster={imageId ? (getAssetUrl(imageId, "preview") ?? undefined) : undefined}
          controls
          class="w-full rounded-lg bg-black max-h-72 mb-2"
        >
          <track kind="captions" />
        </video>
      {/if}
      <FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
    </div>

    <div class="space-y-1.5">
      <Label>{$_("admin.common.tags")}</Label>
      <TagsInput bind:value={tags} />
    </div>

    <div class="space-y-1.5">
      <Label>{$_("admin.common.publish_date")}</Label>
      <DatePicker
        bind:value={uploadDate}
        placeholder={$_("admin.common.publish_date")}
        showTime={false}
      />
    </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">{$_("admin.common.premium")}</span>
      </label>
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" bind:checked={featured} class="rounded" />
        <span class="text-sm">{$_("admin.common.featured")}</span>
      </label>
    </div>

    {#if data.models.length > 0}
      <div class="space-y-1.5">
        <Label>{$_("admin.video_form.models")}</Label>
        <Select type="multiple" bind:value={selectedModelIds}>
          <SelectTrigger class="w-full">
            {#if selectedModelIds.length}
              {$_("admin.video_form.models_selected", {
                values: { count: selectedModelIds.length },
              })}
            {:else}
              <span class="text-muted-foreground">{$_("admin.video_form.no_models")}</span>
            {/if}
          </SelectTrigger>
          <SelectContent>
            {#each data.models as model (model.id)}
              <SelectItem value={model.id}>
                {#if model.avatar}
                  <img
                    src={getAssetUrl(model.avatar, "mini")}
                    alt=""
                    class="h-5 w-5 rounded-full object-cover shrink-0"
                  />
                {/if}
                {model.artist_name}
              </SelectItem>
            {/each}
          </SelectContent>
        </Select>
      </div>
    {/if}

    <div class="flex gap-3 pt-2">
      <Button
        onclick={handleSubmit}
        disabled={saving}
        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
      >
        {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
      </Button>
      <Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
    </div>
  </div>
</div>
