@model PowderCoating.Application.DTOs.BugReport.CreateBugReportDto
@using PowderCoating.Core.Enums
@{
    ViewData["Title"] = "Report a Bug";
    ViewData["PageIcon"] = "bi-bug";
}

<div class="container-fluid">
    <div class="d-flex justify-content-end align-items-center mb-4">
        <a asp-controller="Tools" asp-action="Index" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to Tools
        </a>
    </div>

    @if (TempData["SuccessMessage"] != null)
    {
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle"></i> @TempData["SuccessMessage"]
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    }
    @if (TempData["ErrorMessage"] != null)
    {
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle"></i> @TempData["ErrorMessage"]
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    }

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-pencil-square"></i> Bug Report Details</h5>
                </div>
                <div class="card-body">
                    <form asp-action="Submit" method="post" enctype="multipart/form-data">
                        <div asp-validation-summary="ModelOnly" class="alert alert-danger alert-permanent" role="alert"></div>

                        <div class="mb-3">
                            <label asp-for="Title" class="form-label fw-semibold">
                                Title <span class="text-danger">*</span>
                            </label>
                            <input asp-for="Title" class="form-control" placeholder="Brief summary of the issue" maxlength="200" />
                            <span asp-validation-for="Title" class="text-danger small"></span>
                            <div class="form-text">Provide a short, descriptive title (e.g., "Invoice PDF fails to generate").</div>
                        </div>

                        <div class="mb-3">
                            <label asp-for="Description" class="form-label fw-semibold">
                                Description <span class="text-danger">*</span>
                            </label>
                            <textarea asp-for="Description" class="form-control" rows="7"
                                      placeholder="Describe what happened, what you expected to happen, and any steps to reproduce the issue..." maxlength="4000"></textarea>
                            <span asp-validation-for="Description" class="text-danger small"></span>
                            <div class="form-text">Include steps to reproduce, what you expected, and what actually happened.</div>
                        </div>

                        <div class="mb-4">
                            <label asp-for="Priority" class="form-label fw-semibold">Priority</label>
                            <select asp-for="Priority" class="form-select">
                                <option value="@((int)BugReportPriority.Low)">Low &ndash; Minor inconvenience, workaround exists</option>
                                <option value="@((int)BugReportPriority.Normal)" selected>Normal &ndash; Affects workflow but not critical</option>
                                <option value="@((int)BugReportPriority.High)">High &ndash; Significantly impacts operations</option>
                                <option value="@((int)BugReportPriority.Critical)">Critical &ndash; System unusable or data loss risk</option>
                            </select>
                            <span asp-validation-for="Priority" class="text-danger small"></span>
                        </div>

                        <div class="mb-4">
                            <label for="attachments" class="form-label fw-semibold">
                                <i class="bi bi-paperclip"></i> Attachments <span class="text-muted fw-normal">(optional)</span>
                            </label>
                            <input type="file" id="attachments" name="attachments" class="form-control"
                                   multiple accept=".jpg,.jpeg,.png,.gif,.webp,.mp4,.mov,.avi,.mkv,.webm"
                                   onchange="updateFileList(this)" />
                            <div class="form-text">Photos or videos up to 100 MB each. Accepted: JPG, PNG, GIF, WEBP, MP4, MOV, AVI, MKV, WEBM.</div>
                            <ul id="fileList" class="list-unstyled mt-2 small text-muted"></ul>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-send"></i> Submit Report
                            </button>
                            <a asp-controller="Tools" asp-action="Index" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        function updateFileList(input) {
            const list = document.getElementById('fileList');
            list.innerHTML = '';
            const maxBytes = 100 * 1024 * 1024;
            Array.from(input.files).forEach(f => {
                const li = document.createElement('li');
                const sizeMb = (f.size / 1024 / 1024).toFixed(1);
                if (f.size > maxBytes) {
                    li.innerHTML = `<i class="bi bi-exclamation-triangle text-danger"></i> ${f.name} (${sizeMb} MB) &mdash; exceeds 100 MB limit`;
                } else {
                    li.innerHTML = `<i class="bi bi-file-earmark text-secondary"></i> ${f.name} (${sizeMb} MB)`;
                }
                list.appendChild(li);
            });
        }
    </script>
}