Memento/src/lib/components/editor.svelte

<script lang="ts">
    import {
        CalendarDate,
        today,
        getLocalTimeZone,
    } from "@internationalized/date";
    import { onMount } from "svelte";
    import { formatDate } from "$lib/date";
    import { createEntry, updateEntry, deleteEntry } from "$lib/upload";
    import Button from "$lib/components/ui/button/button.svelte";
    import { Textarea } from "$lib/components/ui/textarea";
    import { Upload, X } from "@lucide/svelte";
    import { marked } from "marked";

    let { dateValue = $bindable<CalendarDate>(today(getLocalTimeZone())) } =
        $props();

    let edit = $state<boolean>(false);
    let isLoading = $state<boolean>(false);
    let error = $state<string>("");
    let previewImage = $state<string | null>(null);
    let fileInput = $state<HTMLInputElement | undefined>(undefined);

    let entry = $state({
        id: "",
        date: dateValue.toString(),
        image: "",
        content: "",
    });

    let editingEntry = $state({
        id: "",
        date: dateValue.toString(),
        image: "",
        content: "",
    });

    onMount(async () => {
        await loadEntry();
    });

    async function loadEntry() {
        try {
            error = "";
            const res = await fetch(`/api/entry?date=${dateValue.toString()}`);
            const data = await res.json();
            if (data && data.length > 0) {
                entry = { ...data[0], date: dateValue.toString() };
                previewImage = entry.image || null;
            } else {
                entry = {
                    id: "",
                    date: dateValue.toString(),
                    image: "",
                    content: "",
                };
                previewImage = null;
            }
        } catch (err) {
            error = "Failed to load entry";
            console.error(err);
        }
    }

    function startEdit() {
        editingEntry = { ...entry };
        previewImage = entry.image || null;
        edit = true;
    }

    function cancelEdit() {
        edit = false;
        error = "";
        previewImage = entry.image || null;
    }

    function handleImageSelect(e: Event) {
        const target = e.target as HTMLInputElement;
        const files = target.files;

        if (files && files.length > 0) {
            const file = files[0];

            // Validate file type
            if (!file.type.startsWith("image/")) {
                error = "Please select a valid image file";
                return;
            }

            // Validate file size (5MB max)
            if (file.size > 5 * 1024 * 1024) {
                error = "Image must be smaller than 5MB";
                return;
            }

            const reader = new FileReader();
            reader.onload = (event) => {
                const result = event.target?.result as string;
                editingEntry.image = result;
                previewImage = result;
                error = "";
            };
            reader.onerror = () => {
                error = "Failed to read image file";
            };
            reader.readAsDataURL(file);
        }
    }

    function removeImage() {
        editingEntry.image = "";
        previewImage = null;
        if (fileInput) {
            fileInput.value = "";
        }
    }

    async function handleSave() {
        try {
            isLoading = true;
            error = "";

            editingEntry.date = dateValue.toString();

            if (entry.id) {
                editingEntry.id = entry.id;
                await updateEntry(editingEntry);
            } else {
                delete editingEntry.id;
                await createEntry(editingEntry);
            }

            // Reload the entry to get updated data
            await loadEntry();
            edit = false;
        } catch (err) {
            error = "Failed to save entry. Please try again.";
            console.error(err);
        } finally {
            isLoading = false;
        }
    }

    async function handleDelete() {
        if (!confirm("Are you sure you want to delete this entry?")) {
            return;
        }

        try {
            isLoading = true;
            error = "";
            await deleteEntry(entry);
            await loadEntry();
            edit = false;
        } catch (err) {
            error = "Failed to delete entry. Please try again.";
            console.error(err);
        } finally {
            isLoading = false;
        }
    }
</script>

<div class="w-full max-w-2xl">
    <!-- Header -->
    <div class="flex flex-row items-center justify-between mb-6">
        <h1 class="text-3xl font-bold">{formatDate(entry.date)}</h1>

        <div class="flex gap-2">
            {#if !edit}
                <Button variant="secondary" onclick={startEdit}>Edit</Button>
            {:else}
                <Button
                    variant="destructive"
                    onclick={handleDelete}
                    disabled={isLoading}
                >
                    Delete
                </Button>
                <Button
                    variant="default"
                    onclick={handleSave}
                    disabled={isLoading}
                >
                    {isLoading ? "Saving..." : "Save"}
                </Button>
                <Button
                    variant="outline"
                    onclick={cancelEdit}
                    disabled={isLoading}
                >
                    Cancel
                </Button>
            {/if}
        </div>
    </div>

    <!-- Error Message -->
    {#if error}
        <div
            class="mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm"
        >
            {error}
        </div>
    {/if}

    <!-- View Mode -->
    {#if !edit}
        <div class="space-y-4">
            <!-- Image Display -->
            {#if entry.image}
                <div class="rounded-lg overflow-hidden border border-input">
                    <img
                        src={entry.image}
                        alt="Entry"
                        class="w-full h-auto max-h-128 object-cover"
                    />
                </div>
            {:else}
                <div
                    class="rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 h-48 flex items-center justify-center text-muted-foreground text-sm"
                >
                    No image
                </div>
            {/if}

            <!-- Content Display -->
            {#if entry.content}
                <div class="rounded-lg border border-input bg-muted/30 p-4">
                    <div class="text-base whitespace-pre-wrap text-foreground">
                        {@html marked(entry.content)}
                    </div>
                </div>
            {:else}
                <div
                    class="rounded-lg border border-dashed border-muted-foreground/25 bg-muted/50 p-4 text-muted-foreground text-sm text-center"
                >
                    No content yet
                </div>
            {/if}
        </div>

        <!-- Edit Mode -->
    {:else}
        <div class="space-y-6">
            <!-- Image Picker -->
            <div class="space-y-3">
                <!-- <label for="image-input" class="text-sm font-medium">
                    Image
                </label> -->

                {#if previewImage}
                    <div
                        class="relative rounded-lg overflow-hidden border border-input"
                    >
                        <img
                            src={previewImage}
                            alt="Preview"
                            class="w-full h-auto max-h-128 object-cover"
                        />
                        <button
                            type="button"
                            onclick={removeImage}
                            class="absolute top-2 right-2 p-2 bg-destructive text-white rounded-md hover:bg-destructive/90 transition-colors"
                            title="Remove image"
                        >
                            <X size={20} />
                        </button>
                    </div>
                {:else}
                    <div
                        class="rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-8 flex flex-col items-center justify-center gap-3 cursor-pointer hover:border-muted-foreground/50 transition-colors"
                        role="button"
                        tabindex={0}
                        onkeydown={(e) => {
                            if (e.key === "Enter" || e.key === " ") {
                                fileInput?.click();
                            }
                        }}
                        onclick={() => fileInput?.click()}
                    >
                        <Upload size={32} class="text-muted-foreground" />
                        <p class="text-sm font-medium text-muted-foreground">
                            Click to upload or drag and drop
                        </p>
                        <p class="text-xs text-muted-foreground">
                            PNG, JPG, GIF up to 5MB
                        </p>
                    </div>
                {/if}

                <input
                    bind:this={fileInput}
                    id="image-input"
                    type="file"
                    accept="image/*"
                    onchange={handleImageSelect}
                    class="hidden"
                />
            </div>

            <!-- Content Editor -->
            <div class="space-y-3">
                <!-- <label for="content-input" class="text-sm font-medium">
                    Content
                </label> -->
                <Textarea
                    id="content-input"
                    bind:value={editingEntry.content}
                    placeholder="How was your day?"
                    class="min-h-64"
                />
                <p class="text-xs text-muted-foreground">
                    {editingEntry.content.length} characters
                </p>
            </div>
        </div>
    {/if}
</div>