@model PagedResult<PowderCoating.Application.DTOs.Maintenance.MaintenanceListDto>

@{
    ViewData["Title"] = "Maintenance Records";
    ViewData["PageIcon"] = "bi-wrench";
    ViewData["PageHelpTitle"] = "Maintenance";
    ViewData["PageHelpContent"] = "Track all scheduled and completed maintenance for your shop equipment. Overdue records are those past their scheduled date without a Completed status. Recurring tasks auto-generate future occurrences based on the frequency you set. Click any row to view full details, or use Add Maintenance to schedule new service for any piece of equipment.";
    var equipmentId = ViewBag.EquipmentId as int?;
    var equipmentName = ViewBag.EquipmentName as string;
}

<div class="pcl-metric-strip">
    <div class="pcl-metric-strip-cell">
        @await Html.PartialAsync("_Metric", (Label: "TOTAL", Value: Model.TotalCount.ToString(), Delta: (string?)null, DeltaDir: (string?)null))
    </div>
    <div class="pcl-metric-strip-cell">
        @await Html.PartialAsync("_Metric", (Label: "SCHEDULED", Value: Model.Items.Count(m => m.Status == "Scheduled").ToString(), Delta: (string?)null, DeltaDir: (string?)null))
    </div>
    <div class="pcl-metric-strip-cell">
        @await Html.PartialAsync("_Metric", (Label: "IN PROGRESS", Value: Model.Items.Count(m => m.Status == "InProgress").ToString(), Delta: (string?)null, DeltaDir: (string?)null))
    </div>
    <div class="pcl-metric-strip-cell">
        @await Html.PartialAsync("_Metric", (Label: "OVERDUE", Value: Model.Items.Count(m => m.Status == "Overdue").ToString(), Delta: (string?)null, DeltaDir: (string?)null))
    </div>
</div>

@if ((bool)(ViewBag.PendingOnly ?? false))
{
    <div class="alert alert-warning alert-permanent d-flex justify-content-between align-items-center mb-3">
        <div>
            <i class="bi bi-funnel-fill me-2"></i>
            Showing <strong>@Model.TotalCount</strong> pending maintenance record@(Model.TotalCount == 1 ? "" : "s") &mdash; Scheduled, In Progress, or Overdue
        </div>
        <a href="@Url.Action("Index")" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-x me-1"></i>Show All
        </a>
    </div>
}

<!-- Maintenance Records Table Card -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-0 py-3">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-2">
                <span class="fw-semibold">
                    @if (equipmentId.HasValue && !string.IsNullOrEmpty(equipmentName))
                    {
                        @equipmentName
                    }
                    else
                    {
                        <span>All Maintenance Records</span>
                    }
                </span>
                <a tabindex="0" class="help-icon" role="button"
                   data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                   data-bs-title="Maintenance Records"
                   data-bs-content="Scheduled = upcoming work not yet started. In Progress = work has begun. Completed = service finished (updates Last Maintenance date on the equipment). Overdue = past the scheduled date with no completion recorded. Cancelled = task voided. Recurring tasks show a blue badge and auto-generate future occurrences when saved.">
                    <i class="bi bi-question-circle"></i>
                </a>
            </div>
            <div class="d-flex gap-2">
                @if (equipmentId.HasValue)
                {
                    <a asp-controller="Equipment" asp-action="Details" asp-route-id="@equipmentId" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>Back to Equipment
                    </a>
                    <a asp-action="Create" asp-route-equipmentId="@equipmentId" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i>Add Maintenance
                    </a>
                }
                else
                {
                    <a asp-action="Create" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i>Add Maintenance
                    </a>
                }
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        @if (!Model.Items.Any())
        {
            <div class="text-center py-5">
                <i class="bi bi-inbox" style="font-size: 4rem; color: #d1d5db;"></i>
                <h5 class="mt-3 text-muted">No maintenance records found</h5>
                <p class="text-muted mb-4">Get started by scheduling maintenance</p>
                <a asp-action="Create" asp-route-equipmentId="@equipmentId" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-2"></i>Schedule Maintenance
                </a>
            </div>
        }
        else
        {
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th class="ps-4">Equipment</th>
                            <th sortable="MaintenanceType" current-sort="@ViewBag.SortColumn" current-direction="@ViewBag.SortDirection">Type</th>
                            <th sortable="ScheduledDate" current-sort="@ViewBag.SortColumn" current-direction="@ViewBag.SortDirection">Scheduled Date</th>
                            <th sortable="Status" current-sort="@ViewBag.SortColumn" current-direction="@ViewBag.SortDirection">Status</th>
                            <th sortable="Priority" current-sort="@ViewBag.SortColumn" current-direction="@ViewBag.SortDirection">Priority</th>
                            <th sortable="Cost" current-sort="@ViewBag.SortColumn" current-direction="@ViewBag.SortDirection">Cost</th>
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var maintenance in Model.Items)
                        {
                            <tr style="cursor: pointer;" onclick="window.location.href='@Url.Action("Details", "Maintenance", new { id = maintenance.Id })'">
                                <td class="ps-4">
                                    <div class="fw-semibold">@maintenance.EquipmentName</div>
                                </td>
                                <td>
                                    @maintenance.MaintenanceType
                                    @if (maintenance.IsRecurring)
                                    {
                                        <br /><span class="badge bg-info text-dark" style="font-size:0.7em;"><i class="bi bi-arrow-repeat me-1"></i>Recurring</span>
                                    }
                                </td>
                                <td>
                                    <div>@maintenance.ScheduledDate.ToString("MMM dd, yyyy")</div>
                                    @if (maintenance.CompletedDate.HasValue)
                                    {
                                        <small class="text-muted">Completed: @maintenance.CompletedDate.Value.ToString("MMM dd, yyyy")</small>
                                    }
                                </td>
                                <td>
                                    @await Html.PartialAsync("_StatusChip", (Kind: StatusChipHelper.MaintenanceStatus(maintenance.Status), Text: maintenance.StatusDisplay))
                                </td>
                                <td>
                                    @await Html.PartialAsync("_StatusChip", (Kind: StatusChipHelper.MaintenancePriority(maintenance.Priority), Text: maintenance.PriorityDisplay))
                                </td>
                                <td>
                                    <span class="fw-semibold">@maintenance.TotalCost.ToString("C")</span>
                                </td>
                                <td class="text-end pe-4" onclick="event.stopPropagation();">
                                    <div class="btn-group btn-group-sm">
                                        <a asp-action="Details" asp-route-id="@maintenance.Id" class="btn btn-outline-primary" title="View Details">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <a asp-action="Edit" asp-route-id="@maintenance.Id" class="btn btn-outline-warning" title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <a asp-action="Delete" asp-route-id="@maintenance.Id" class="btn btn-outline-danger" title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>

            <!-- Mobile Card View -->
            <div class="mobile-card-view">
                <div class="mobile-card-list">
                    @foreach (var maintenance in Model.Items)
                    {
                        <div class="mobile-data-card"
                             data-id="@maintenance.Id"
                             onclick="window.location.href='@Url.Action("Details", new { id = maintenance.Id })'">

                            <div class="mobile-card-header">
                                <div class="mobile-card-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                                    <i class="bi bi-wrench"></i>
                                </div>
                                <div class="mobile-card-title">
                                    <h6>@maintenance.EquipmentName</h6>
                                    <small>
                                        @maintenance.MaintenanceType
                                        @if (maintenance.IsRecurring)
                                        {
                                            <span class="badge bg-info text-dark ms-1" style="font-size:0.65em;"><i class="bi bi-arrow-repeat"></i> Recurring</span>
                                        }
                                    </small>
                                </div>
                            </div>

                            <div class="mobile-card-body">
                                <div class="mobile-card-row">
                                    <span class="mobile-card-label">Scheduled</span>
                                    <span class="mobile-card-value">@maintenance.ScheduledDate.ToString("MMM dd, yyyy")</span>
                                </div>
                                @if (maintenance.CompletedDate.HasValue)
                                {
                                    <div class="mobile-card-row">
                                        <span class="mobile-card-label">Completed</span>
                                        <span class="mobile-card-value">@maintenance.CompletedDate.Value.ToString("MMM dd, yyyy")</span>
                                    </div>
                                }
                                <div class="mobile-card-row">
                                    <span class="mobile-card-label">Status</span>
                                    <span class="mobile-card-value">
                                        @await Html.PartialAsync("_StatusChip", (Kind: StatusChipHelper.MaintenanceStatus(maintenance.Status), Text: maintenance.StatusDisplay))
                                    </span>
                                </div>
                                <div class="mobile-card-row">
                                    <span class="mobile-card-label">Priority</span>
                                    <span class="mobile-card-value">
                                        @await Html.PartialAsync("_StatusChip", (Kind: StatusChipHelper.MaintenancePriority(maintenance.Priority), Text: maintenance.PriorityDisplay))
                                    </span>
                                </div>
                                <div class="mobile-card-row">
                                    <span class="mobile-card-label">Cost</span>
                                    <span class="mobile-card-value fw-semibold text-primary">@maintenance.TotalCost.ToString("C")</span>
                                </div>
                            </div>

                            <div class="mobile-card-footer">
                                <a href="@Url.Action("Details", new { id = maintenance.Id })"
                                   class="btn btn-sm btn-outline-primary"
                                   onclick="event.stopPropagation();">
                                    <i class="bi bi-eye me-1"></i>View
                                </a>
                                <a href="@Url.Action("Edit", new { id = maintenance.Id })"
                                   class="btn btn-sm btn-outline-secondary"
                                   onclick="event.stopPropagation();">
                                    <i class="bi bi-pencil me-1"></i>Edit
                                </a>
                            </div>
                        </div>
                    }
                </div>
            </div>
        }
    </div>
    @if (Model.TotalCount > 0)
    {
        @await Html.PartialAsync("_Pagination", Model)
    }
</div>