@model Aberwyn.Models.Meal
@{
    ViewData["Title"] = Model.Id == 0 ? "Ny måltid" : Model.Name;
    var isNew = Model.Id == 0;
}

<div class="meal-details">
    <h1>@(isNew ? "Skapa ny måltid" : Model.Name)</h1>

    <form asp-action="SaveMeal" method="post" enctype="multipart/form-data">
        @if (!isNew)
        {
            <input type="hidden" name="Id" value="@Model.Id" />
        }

        <div>
            <label for="Name">Namn</label>
            <input type="text" name="Name" value="@Model.Name" required />
        </div>

        <div>
            <label for="Description">Beskrivning</label>
            <textarea name="Description">@Model.Description</textarea>
        </div>

        <div>
            <label for="ProteinType">Protein</label>
            <input type="text" name="ProteinType" value="@Model.ProteinType" />
        </div>

        <div>
            <label for="CarbType">Kolhydrat</label>
            <input type="text" name="CarbType" value="@Model.CarbType" />
        </div>

        <div>
            <label for="RecipeUrl">Receptlänk</label>
            <input type="url" name="RecipeUrl" value="@Model.RecipeUrl" />
        </div>

        <div>
            <label for="ImageFile">Bild</label>
            <div id="imageDropArea" style="border: 2px dashed #ccc; padding: 1rem; text-align: center; cursor: pointer;">
                <img id="imagePreview" src="@Model.ImageUrl" alt="Förhandsvisning" style="max-width: 100%; display: @(string.IsNullOrEmpty(Model.ImageUrl) ? "none" : "block");" />
                <span id="imagePlaceholder" style="color: #888;">Klicka här för att klistra in eller dra in en bild</span>
            </div>
            <input type="file" id="ImageFile" name="ImageFile" accept="image/*" style="display: none;" />
        </div>

        <button type="submit">Spara</button>
    </form>
</div>

<!-- Modal -->
<div id="imageModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000;">
    <div style="background: white; margin: 5% auto; padding: 2rem; max-width: 400px; border-radius: 8px; text-align: center; position: relative;">
        <h3>Klistra in eller dra in bild</h3>
        <div id="dropZone" style="border: 2px dashed #aaa; padding: 2rem; cursor: pointer;">
            <p>Släpp bild här eller klistra in (Ctrl+V)</p>
        </div>
        <button onclick="closeModal()" style="margin-top: 1rem;">Stäng</button>
    </div>
</div>

<style>
    .meal-details {
        max-width: 600px;
        margin: 2rem auto;
        background: #f9f9f9;
        padding: 2rem;
        border-radius: 8px;
    }

    .meal-details label {
        display: block;
        font-weight: bold;
        margin-top: 1rem;
    }

    .meal-details input[type=text],
    .meal-details input[type=url],
    .meal-details textarea {
        width: 100%;
        padding: 0.5rem;
        border-radius: 4px;
        border: 1px solid #ccc;
        margin-top: 0.25rem;
    }

    .meal-details button {
        margin-top: 1rem;
    }
</style>

<script>
    const imageFileInput = document.getElementById("ImageFile");
    const imageDropArea = document.getElementById("imageDropArea");
    const imagePreview = document.getElementById("imagePreview");
    const imagePlaceholder = document.getElementById("imagePlaceholder");
    const imageModal = document.getElementById("imageModal");
    const dropZone = document.getElementById("dropZone");

    imageDropArea.addEventListener("click", () => {
        imageModal.style.display = "block";
    });

    function closeModal() {
        imageModal.style.display = "none";
    }

    function handleImage(file) {
        const reader = new FileReader();
        reader.onload = e => {
            imagePreview.src = e.target.result;
            imagePreview.style.display = "block";
            imagePlaceholder.style.display = "none";

            const dt = new DataTransfer();
            dt.items.add(file);
            imageFileInput.files = dt.files;
        };
        reader.readAsDataURL(file);
    }

    dropZone.addEventListener("dragover", e => {
        e.preventDefault();
        dropZone.style.borderColor = "#4A90E2";
    });

    dropZone.addEventListener("dragleave", () => {
        dropZone.style.borderColor = "#aaa";
    });

    dropZone.addEventListener("drop", e => {
        e.preventDefault();
        dropZone.style.borderColor = "#aaa";
        const file = e.dataTransfer.files[0];
        if (file && file.type.startsWith("image/")) {
            handleImage(file);
            closeModal();
        }
    });

    document.addEventListener("paste", e => {
        if (imageModal.style.display !== "block") return;
        for (const item of e.clipboardData.items) {
            if (item.type.startsWith("image/")) {
                const file = item.getAsFile();
                handleImage(file);
                closeModal();
            }
        }
    });

    const modalImageInput = document.getElementById("modalImageInput");


</script>
