@model Recepie.Models.Recipe

@{
    ViewData["Title"] = "Recipe Details";
}

<style>
    .step-content {
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }

    .ingredient-item {
        padding: 0.5rem;
        background-color: #f8f9fa;
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .ingredient-amount {
        font-weight: bold;
        color: #007bff;
    }
</style>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h2>@Model.Title</h2>
                </div>
                <div class="card-body">
                    <p class="lead">@Model.Description</p>

                    @* Temporarily disabled for main page performance
                    @if (Model.RecipeImage?.ImageData != null)
                    {
                        <div class="mb-4">
                            <h5><i class="fas fa-camera"></i> Recipe Image</h5>
                            <div class="text-center">
                                <img src="@Url.Action("GetImage", "Recipe", new { recipeId = Model.Id })" 
                                     class="img-fluid rounded shadow" 
                                     alt="@Model.Title" 
                                     style="max-height: 400px; object-fit: cover;" />
                            </div>
                        </div>
                    }
                    *@

                    <div class="mb-4">
                        <h5><i class="fas fa-camera"></i> Recipe Image</h5>
                        <div class="text-center">
                            <img src="@Url.Action("GetImage", "Recipe", new { recipeId = Model.Id })" 
                                 class="img-fluid rounded shadow" 
                                 alt="@Model.Title" 
                                 style="max-height: 400px; object-fit: cover;" 
                                 onerror="this.style.display='none'" />
                        </div>
                    </div>

                    @if (!string.IsNullOrEmpty(Model.Difficulty))
                    {
                        <div class="mb-3">
                            <strong>Difficulty:</strong> <span class="badge bg-info">@Model.Difficulty</span>
                        </div>
                    }

                    @if (!string.IsNullOrEmpty(Model.Time))
                    {
                        <div class="mb-3">
                            <strong>Time:</strong> @Model.Time
                        </div>
                    }

                    @if (Model.RecipeIngredients.Any())
                    {
                        <div class="mb-4">
                            <h5><i class="fas fa-list"></i> Ingredients</h5>
                            <div class="card">
                                <div class="card-body">
                                    <ul class="list-unstyled mb-0">
                                        @foreach (var recipeIngredient in Model.RecipeIngredients.OrderBy(ri =>
                                                                            ri.Ingredient.Name))
                                        {
                                            <li class="ingredient-item d-flex align-items-center">
                                                <i class="fas fa-check text-success me-2"></i>
                                                <span class="ingredient-amount me-2">
                                                    @if (!string.IsNullOrEmpty(recipeIngredient.Amount))
                                                    {
                                                        @recipeIngredient.Amount
                                                    }
                                                    @if (!string.IsNullOrEmpty(recipeIngredient.Measurement))
                                                    {
                                                        <text> @recipeIngredient.Measurement</text>
                                                    }
                                                </span>
                                                <span>@recipeIngredient.Ingredient?.Name</span>
                                            </li>
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                    }

                    @if (Model.RecipeSteps.Any())
                    {
                        <div class="mb-4">
                            <h5><i class="fas fa-clipboard-list"></i> Instructions</h5>
                            <div class="card">
                                <div class="card-body">
                                    <ol class="mb-0">
                                        @foreach (var step in Model.RecipeSteps.OrderBy(s => s.StepNumber))
                                        {
                                            <li class="mb-3">
                                                <div class="step-content">
                                                    @step.Text
                                                </div>
                                            </li>
                                        }
                                    </ol>
                                </div>
                            </div>
                        </div>
                    }

                    @if (!string.IsNullOrEmpty(Model.Url))
                    {
                        <div class="mb-3">
                            <strong>Recipe URL:</strong>
                            <a href="@Model.Url" target="_blank" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-external-link-alt"></i> View Original Recipe
                            </a>
                        </div>
                    }
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        @if (!string.IsNullOrEmpty(Model.Url))
                        {
                            <a href="@Model.Url" target="_blank" class="btn btn-success">
                                <i class="fas fa-external-link-alt"></i> View Recipe
                            </a>
                        }
                        <a href="@Url.Action("Edit", new { id = Model.Id })" class="btn btn-warning">
                            <i class="fas fa-edit"></i> Edit Recipe
                        </a>
                        <a href="@Url.Action("Delete", new { id = Model.Id })" class="btn btn-danger">
                            <i class="fas fa-trash"></i> Delete Recipe
                        </a>
                        <a href="@Url.Action("Index")" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>

            @if (Model.IngredientNames.Any())
            {
                <div class="card mt-3">
                    <div class="card-header">
                        <h6>Quick Filter by Ingredients</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-1">
                            @foreach (var ingredient in Model.IngredientNames.Take(5))
                            {
                                <a href="@Url.Action("Index", new { includeIngredients = ingredient })"
                                    class="btn btn-outline-primary btn-sm">
                                    Find recipes with @ingredient
                                </a>
                            }
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>