@page "/"
@inject WeatherService WeatherService

<PageTitle>Memphis Weather</PageTitle>

@if (weather == null)
{
    <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
}
else
{
    <MudCard Class="mt-6" Style="max-width: 500px; margin: auto;">
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.h5">@weather.City Weather</MudText>
                <MudText Typo="Typo.body2">Current Conditions</MudText>
            </CardHeaderContent>
            <CardHeaderActions>
                <MudIconButton Icon="@Icons.Material.Filled.Refresh" Color="Color.Default" OnClick="RefreshWeather" />
            </CardHeaderActions>
        </MudCardHeader>
        <MudCardContent>
            <div class="d-flex align-center">
                <img src="@weather.Icon" alt="Weather icon" />
                <div class="ml-3">
                    <MudText Typo="Typo.h3">@weather.Temperature.ToString("F1")°F</MudText>
                    <MudText Typo="Typo.body1" Style="text-transform: capitalize;">@weather.Description</MudText>
                </div>
            </div>
            <MudDivider Class="my-4" />
            <div>
                <div class="d-flex align-center mb-2">
                    <MudIcon Icon="@Icons.Material.Filled.Opacity" Color="Color.Info" Class="mr-2" />
                    <MudText>Humidity: @weather.Humidity%</MudText>
                </div>
                <div class="d-flex align-center">
                    <MudIcon Icon="@Icons.Material.Filled.Air" Color="Color.Info" Class="mr-2" />
                    <MudText>Wind: @weather.WindSpeed mph</MudText>
                </div>
            </div>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Text" Color="Color.Primary" 
                Href="https://openweathermap.org/city/4641239" Target="_blank">
                More Details
            </MudButton>
            <MudSpacer />
            <MudButton Variant="Variant.Filled" Color="Color.Secondary"
                Href="/weather">
                View Weather History
            </MudButton>
        </MudCardActions>
    </MudCard>

    <MudCard Class="mt-4" Style="max-width: 500px; margin: auto;">
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.h5">Developer Resources</MudText>
            </CardHeaderContent>
        </MudCardHeader>
        <MudCardContent>
            <MudText>View PlayWright test report for this website.</MudText>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Filled" Color="Color.Info" 
                Href="playwright-report/index.html" Target="_blank">
                View Report
            </MudButton>
        </MudCardActions>
    </MudCard>
}

@code {
    private WeatherInfo? weather;

    protected override async Task OnInitializedAsync()
    {
        await RefreshWeather();
    }

    private async Task RefreshWeather()
    {
        weather = await WeatherService.GetWeatherAsync();
    }
}