@model Aberwyn.Models.Meal
@{
    ViewData["Title"] = Model.Name;
    bool isEditing = (bool)(ViewData["IsEditing"] ?? false);
    var imageUrl = string.IsNullOrEmpty(Model.ImageUrl) ? "/images/placeholder-meal.jpg" : Model.ImageUrl;
}

<div class="meal-container">
    <div class="meal-header">
        <img src="@imageUrl" alt="@Model.Name" class="meal-image" />
        <div class="meal-meta">
            <h1 class="meal-title">@Model.Name</h1>
            <p class="description">@Model.Description</p>
        </div>
    </div>

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

            <div class="form-group">
                <label for="ImageFile">Bild</label>
                <input type="file" name="ImageFile" accept="image/*" value="@Model.ImageUrl" class="form-control" />
            </div>

            <div class="form-group">
                <label for="Name">Namn</label>
                <input type="text" name="Name" value="@Model.Name" class="form-control" required />
            </div>

            <div class="form-group">
                <label for="Description">Beskrivning</label>
                <textarea name="Description" class="form-control">@Model.Description</textarea>
            </div>

            <div class="form-group">
                <label for="ProteinType">Protein</label>
                <input type="text" name="ProteinType" value="@Model.ProteinType" class="form-control" />
            </div>

            <div class="form-group">
                <label for="CarbType">Kolhydrat</label>
                <input type="text" name="CarbType" value="@Model.CarbType" class="form-control" />
            </div>

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

            <div class="buttons">
                <button type="submit" class="btn">Spara</button>
                <button type="submit" formaction="@Url.Action("DeleteMeal", new { id = Model.Id })" formmethod="post" onclick="return confirm('Vill du verkligen ta bort denna måltid?');" class="btn-outline">Ta bort</button>
                <a href="@Url.Action("View", new { id = Model.Id, edit = false })" class="btn-outline">Avbryt</a>
            </div>
        </form>
    }
    else
    {
        <div class="meal-details">
            @if (!string.IsNullOrEmpty(Model.ProteinType))
            {
                <p><span class="label">Protein:</span> @Model.ProteinType</p>
            }
            @if (!string.IsNullOrEmpty(Model.CarbType))
            {
                <p><span class="label">Kolhydrat:</span> @Model.CarbType</p>
            }
        </div>

        @if (!string.IsNullOrEmpty(Model.RecipeUrl))
        {
            <p><a href="@Model.RecipeUrl" class="recipe-link" target="_blank">Visa Recept</a></p>
        }

        <div class="buttons">
            <button type="button" class="btn-outline" onclick="toggleRecipe()">Visa Tillagning</button>
            <a class="btn-outline" href="@Url.Action("View", new { id = Model.Id, edit = true })">Redigera</a>
        </div>
    }

    <div id="recipe-section" style="display:none; margin-top:1.5rem;">
        <h2>Så här gör du</h2>
        <p class="placeholder">(Tillagningsinstruktioner kommer snart...)</p>

        @if (!string.IsNullOrEmpty(Model.RecipeUrl))
        {
            <p><a href="@Model.RecipeUrl" class="recipe-link" target="_blank">Gå till fullständigt recept</a></p>
        }
    </div>
</div>

<script>
function toggleRecipe() {
    const section = document.getElementById('recipe-section');
    section.style.display = section.style.display === 'none' ? 'block' : 'none';
}
</script>

<style>
    .meal-container {
        max-width: 900px;
        margin: 2rem auto;
        background: #fff;
        padding: 2rem;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        font-family: 'Segoe UI', sans-serif;
    }
    .meal-header {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        align-items: center;
    }
    .meal-meta {
        flex: 1;
    }
    .meal-title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
        color: #333;
    }
    .meal-image {
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid #ccc;
    }
    .description {
        font-size: 1.1rem;
        color: #555;
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .meal-details p {
        font-size: 1rem;
        color: #333;
        margin: 0.3rem 0;
    }
    .label {
        font-weight: bold;
        color: #6a0dad;
    }
    .form-group {
        margin-bottom: 1rem;
    }
    .form-group label {
        font-weight: 600;
        margin-bottom: 0.3rem;
        display: block;
    }
    .form-control {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 1rem;
    }
    .buttons {
        margin-top: 1.5rem;
    }
    .btn,
    .btn-outline {
        background-color: #6a0dad;
        color: white;
        border: none;
        padding: 0.6rem 1.4rem;
        border-radius: 6px;
        margin: 0.4rem;
        cursor: pointer;
        font-size: 1rem;
        text-decoration: none;
    }
    .btn-outline {
        background-color: transparent;
        border: 2px solid #6a0dad;
        color: #6a0dad;
    }
    .recipe-link {
        color: #6a0dad;
        text-decoration: underline;
        font-weight: 500;
    }
    .placeholder {
        color: #999;
        font-style: italic;
    }
</style>
