@page "/manager-dashboard"
@using MudBlazor

<PageTitle>Team-Dashboard | OnProf</PageTitle>

<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-8">
    <div class="d-flex justify-space-between align-center mb-6">
        <MudText Typo="Typo.h4" Class="fw-bold">Team-Dashboard</MudText>
        <MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.FileDownload">Als PDF exportieren</MudButton>
    </div>

    <MudGrid>
        <!-- Top KPI Cards -->
        <MudItem xs="12" sm="6" md="3">
            <MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-primary);">
                <MudText Typo="Typo.subtitle2" Color="Color.Secondary">Team-Stunden (Aktueller Monat)</MudText>
                <div class="d-flex align-end justify-space-between mt-2">
                    <MudText Typo="Typo.h3">850 <small style="font-size: 1rem">h</small></MudText>
                    <MudIcon Icon="@Icons.Material.Filled.Group" Color="Color.Primary" Size="Size.Large" />
                </div>
            </MudPaper>
        </MudItem>

        <MudItem xs="12" sm="6" md="3">
            <MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-success);">
                <MudText Typo="Typo.subtitle2" Color="Color.Secondary">Auslastung (Durchschnitt)</MudText>
                <MudText Typo="Typo.h3">92 <small style="font-size: 1rem">%</small></MudText>
                <MudProgressLinear Color="Color.Success" Value="92" Class="mt-2" />
            </MudPaper>
        </MudItem>

        <MudItem xs="12" sm="6" md="3">
            <MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-info);">
                <MudText Typo="Typo.subtitle2" Color="Color.Secondary">Aktive Auftragsprojekte</MudText>
                <div class="d-flex align-end justify-space-between mt-2">
                    <MudText Typo="Typo.h3">14</MudText>
                    <MudIcon Icon="@Icons.Material.Filled.Domain" Color="Color.Info" Size="Size.Large" />
                </div>
            </MudPaper>
        </MudItem>

        <MudItem xs="12" sm="6" md="3">
            <MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-warning);">
                <MudText Typo="Typo.subtitle2" Color="Color.Secondary">Überstundenkonto gesamt</MudText>
                <div class="d-flex align-end justify-space-between mt-2">
                    <MudText Typo="Typo.h3">185 <small style="font-size: 1rem">h</small></MudText>
                    <MudIcon Icon="@Icons.Material.Filled.Warning" Color="Color.Warning" Size="Size.Large" />
                </div>
            </MudPaper>
        </MudItem>

        <!-- Charts Row -->
        <MudItem xs="12" md="8">
            <MudPaper Elevation="2" Class="pa-6" Style="height: 400px; display: flex; flex-direction: column;">
                <MudText Typo="Typo.h6" Class="mb-4">Gebuchte Stunden der letzten 5 Wochen</MudText>
                <div class="flex-grow-1">
                    <MudChart T="double" ChartType="ChartType.Bar" ChartSeries="@_barSeries" XAxisLabels="@_xAxisLabels" Width="100%" Height="280px" />
                </div>
            </MudPaper>
        </MudItem>

        <MudItem xs="12" md="4">
            <MudPaper Elevation="2" Class="pa-6" Style="height: 400px; display: flex; flex-direction: column;">
                <MudText Typo="Typo.h6" Class="mb-4">Projektverteilung gesamt</MudText>
                <div class="flex-grow-1 d-flex justify-center align-center">
                    <MudChart T="double" ChartType="ChartType.Donut" InputData="@_donutData" InputLabels="@_donutLabels" Width="200px" Height="200px" />
                </div>
            </MudPaper>
        </MudItem>

        <!-- Top Mitarbeiter Table -->
        <MudItem xs="12">
            <MudPaper Elevation="2" Class="pa-6 mt-2">
                <MudText Typo="Typo.h6" Class="mb-4">Performance der Mitarbeiter im aktuellen Monat</MudText>
                <MudDataGrid T="EmployeeStat" Items="@_employees" Hover="true" Bordered="false" Striped="true" Dense="true" Elevation="0">
                    <Columns>
                        <TemplateColumn T="EmployeeStat" Title="Mitarbeiter" SortBy="@(x => x.Name)">
                            <CellTemplate>
                                <div class="d-flex align-center">
                                    <MudAvatar Size="Size.Small" Color="Color.Primary" Class="mr-3">
                                        @context.Item.Name.Substring(0, 1)
                                    </MudAvatar>
                                    <MudText Typo="Typo.body2"><b>@context.Item.Name</b></MudText>
                                </div>
                            </CellTemplate>
                        </TemplateColumn>
                        <PropertyColumn Property="x => x.Role" Title="Rolle" />
                        <PropertyColumn Property="x => x.ProjectCount" Title="Aktive Projekte" />
                        <TemplateColumn T="EmployeeStat" Title="Stunden (Monat)" SortBy="@(x => x.HoursBooked)">
                            <CellTemplate>
                                <MudText Typo="Typo.body2"><b>@context.Item.HoursBooked</b> <small class="mud-text-secondary ml-1">h</small></MudText>
                            </CellTemplate>
                        </TemplateColumn>
                        <TemplateColumn T="EmployeeStat" Title="Auslastung" SortBy="@(x => x.Utilization)">
                            <CellTemplate>
                                <div class="d-flex align-center">
                                    <MudProgressLinear Color="@GetUtilizationColor(context.Item.Utilization)" Value="@context.Item.Utilization" Class="mr-2" Style="width: 100px; min-width: 60px;" />
                                    <MudText Typo="Typo.caption" Color="@GetUtilizationColor(context.Item.Utilization)"><b>@context.Item.Utilization%</b></MudText>
                                </div>
                            </CellTemplate>
                        </TemplateColumn>
                    </Columns>
                </MudDataGrid>
            </MudPaper>
        </MudItem>

    </MudGrid>
</MudContainer>

@code {
    public class EmployeeStat
    {
        public string Name { get; set; } = string.Empty;
        public string Role { get; set; } = string.Empty;
        public int ProjectCount { get; set; }
        public double HoursBooked { get; set; }
        public double Utilization { get; set; }
    }

    private List<EmployeeStat> _employees = new()
    {
        new EmployeeStat { Name = "Marc Mustermann", Role = "Entwickler", ProjectCount = 3, HoursBooked = 160, Utilization = 100 },
        new EmployeeStat { Name = "Anna Schmidt", Role = "Projektleiterin", ProjectCount = 5, HoursBooked = 145, Utilization = 90 },
        new EmployeeStat { Name = "John Doe", Role = "Entwickler", ProjectCount = 4, HoursBooked = 175, Utilization = 110 },
        new EmployeeStat { Name = "Maria Mayer", Role = "Testerin", ProjectCount = 2, HoursBooked = 150, Utilization = 95 },
        new EmployeeStat { Name = "Peter Parker", Role = "Designer", ProjectCount = 2, HoursBooked = 80, Utilization = 50 },
    };

    private string[] _xAxisLabels = { "KW 08", "KW 09", "KW 10", "KW 11", "KW 12" };
    
    private List<ChartSeries<double>> _barSeries = new()
    {
        new ChartSeries<double>() { Name = "Kundenaufträge", Data = new double[] { 300, 320, 280, 350, 400 } },
        new ChartSeries<double>() { Name = "Intern", Data = new double[] { 60, 40, 50, 30, 20 } },
        new ChartSeries<double>() { Name = "Gleitzeit / Urlaub", Data = new double[] { 40, 50, 60, 45, 30 } },
    };

    private double[] _donutData = { 65, 15, 20 };
    private string[] _donutLabels = { "Kundenaufträge", "Intern", "Gleitzeit / Urlaub" };

    private Color GetUtilizationColor(double utilization)
    {
        if (utilization > 105) return Color.Warning;
        if (utilization < 75) return Color.Error;
        return Color.Success;
    }
}
