@page "/profile/personal-information"
@using System.ComponentModel.DataAnnotations
@using MudBlazor
@using Indotalent.Features.Profile.PersonalInformation
@using Indotalent.Features.Profile.PersonalInformation.Cqrs
@using Indotalent.ConfigBackEnd.Interfaces
@inject ISnackbar Snackbar
@inject PersonalInformationService PersonalInformationService
@inject ICurrentUserService CurrentUserService

<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between">
    <div>
        <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Personal Information</MudText>
        <MudText Typo="Typo.body2" Style="color: #64748b;">Manage your personal details, contact information, and how others see you.</MudText>
    </div>

    <div class="d-flex align-center gap-2">
        <MudIcon Icon="@Icons.Material.Filled.Home" Size="Size.Small" Color="Color.Default" />
        <MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
        <MudText Typo="Typo.caption" Style="color: #94a3b8;">Profile</MudText>
        <MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #1a1a1a;">Personal Information</MudText>
    </div>
</MudPaper>

<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; background-color: #ffffff;">
    <MudStack Spacing="8">
        <MudGrid>
            <MudItem xs="12" md="4">
                <MudText Typo="Typo.h6" Class="fw-bold">Basic Profile</MudText>
                <MudText Typo="Typo.body2">Your public identity and bio.</MudText>
            </MudItem>
            <MudItem xs="12" md="8">
                <MudStack Spacing="4">
                    <MudGrid Spacing="2">
                        <MudItem xs="12" sm="6">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">First Name</MudText>
                            <MudTextField @bind-Value="user.FirstName" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
                        </MudItem>
                        <MudItem xs="12" sm="6">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">Last Name</MudText>
                            <MudTextField @bind-Value="user.LastName" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
                        </MudItem>
                    </MudGrid>

                    <div>
                        <MudText Typo="Typo.subtitle2" Class="mb-2">Short Bio</MudText>
                        <MudTextField @bind-Value="user.Bio" Variant="Variant.Outlined" Lines="3" FullWidth="true" Margin="Margin.Dense" Placeholder="Tell us a little about yourself..." />
                    </div>

                    <MudGrid Spacing="2">
                        <MudItem xs="12" sm="6">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">Job Title / Position</MudText>
                            <MudTextField @bind-Value="user.JobTitle" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
                        </MudItem>
                        <MudItem xs="12" sm="6">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">Date of Birth</MudText>
                            <MudDatePicker @bind-Date="user.DateOfBirth" Variant="Variant.Outlined" Margin="Margin.Dense" Editable="true" />
                        </MudItem>
                    </MudGrid>
                </MudStack>
            </MudItem>
        </MudGrid>

        <MudDivider />

        <MudGrid>
            <MudItem xs="12" md="4">
                <MudText Typo="Typo.h6" Class="fw-bold">Contact & Location</MudText>
                <MudText Typo="Typo.body2">How we can reach you and where you're based.</MudText>
            </MudItem>
            <MudItem xs="12" md="8">
                <MudStack Spacing="4">
                    <MudGrid Spacing="2">
                        <MudItem xs="12" sm="6">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">Email Address</MudText>
                            <MudTextField @bind-Value="user.Contact.Email" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email" Disabled="true" />
                        </MudItem>
                        <MudItem xs="12" sm="6">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">Phone Number</MudText>
                            <MudTextField @bind-Value="user.Contact.Phone" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Phone" />
                        </MudItem>
                    </MudGrid>

                    <div>
                        <MudText Typo="Typo.subtitle2" Class="mb-2">Residential Address</MudText>
                        <MudTextField @bind-Value="user.Contact.Address" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Placeholder="Street name, Building, Apartment No." />
                    </div>

                    <MudGrid Spacing="2">
                        <MudItem xs="12" sm="4">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">City</MudText>
                            <MudTextField @bind-Value="user.Contact.City" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
                        </MudItem>
                        <MudItem xs="12" sm="4">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">Country</MudText>
                            <MudTextField @bind-Value="user.Contact.Country" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
                        </MudItem>
                        <MudItem xs="12" sm="4">
                            <MudText Typo="Typo.subtitle2" Class="mb-2">Postal Code</MudText>
                            <MudTextField @bind-Value="user.Contact.PostalCode" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
                        </MudItem>
                    </MudGrid>
                </MudStack>
            </MudItem>
        </MudGrid>

        <MudDivider />

        <MudGrid>
            <MudItem xs="12" md="4">
                <MudText Typo="Typo.h6" Class="fw-bold">Social Profiles</MudText>
                <MudText Typo="Typo.body2">Your professional and social networking links.</MudText>
            </MudItem>
            <MudItem xs="12" md="8">
                <MudStack Spacing="4">
                    <div>
                        <MudText Typo="Typo.subtitle2" Class="mb-2">LinkedIn Profile</MudText>
                        <MudTextField @bind-Value="user.Socials.LinkedIn" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.LinkedIn" Placeholder="https://linkedin.com/in/username" />
                    </div>

                    <div>
                        <MudText Typo="Typo.subtitle2" Class="mb-2">GitHub / Portfolio</MudText>
                        <MudTextField @bind-Value="user.Socials.GitHub" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.GitHub" Placeholder="https://github.com/username" />
                    </div>

                    <div>
                        <MudText Typo="Typo.subtitle2" Class="mb-2">Instagram</MudText>
                        <MudTextField @bind-Value="user.Socials.Instagram" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.Instagram" Placeholder="@("@username")" />
                    </div>
                </MudStack>
            </MudItem>
        </MudGrid>

        <div class="d-flex justify-end align-center gap-4 mt-4">
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveProfile" Disabled="@_isProcessing">
                @if (_isProcessing)
                {
                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
                    <MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Saving...</MudText>
                }
                else
                {
                    <MudText>Save Changes</MudText>
                }
            </MudButton>
        </div>
    </MudStack>
</MudPaper>

@code {
    private bool _isProcessing = false;
    private UserProfileModel user = new();

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

    private async Task LoadProfile()
    {
        var userId = CurrentUserService.UserId;
        if (string.IsNullOrEmpty(userId)) return;

        _isProcessing = true;

        var response = await PersonalInformationService.GetPersonalInformationByIdAsync(userId);
        
        if (response != null && response.IsSuccess && response.Value != null)
        {
            var profile = response.Value;

            user = new UserProfileModel
            {
                FirstName = profile.FirstName ?? string.Empty,
                LastName = profile.LastName ?? string.Empty,
                Bio = profile.ShortBio ?? string.Empty,
                JobTitle = profile.JobTitle ?? string.Empty,
                DateOfBirth = profile.DateOfBirth,
                Contact = new ContactModel
                {
                    Email = profile.Email ?? string.Empty,
                    Phone = profile.PhoneNumber ?? string.Empty,
                    Address = profile.StreetAddress ?? string.Empty,
                    City = profile.City ?? string.Empty,
                    Country = profile.Country ?? string.Empty,
                    PostalCode = profile.ZipCode ?? string.Empty
                },
                Socials = new UserSocialModel
                {
                    LinkedIn = profile.SocialMediaLinkedIn ?? string.Empty,
                    Instagram = profile.SocialMediaInstagram ?? string.Empty,
                    GitHub = profile.SocialMediaX ?? string.Empty
                }
            };
        }
        _isProcessing = false;
    }

    private async Task SaveProfile()
    {
        var userId = CurrentUserService.UserId;
        if (string.IsNullOrEmpty(userId))
        {
            Snackbar.Add("User session not found.", Severity.Error);
            return;
        }

        _isProcessing = true;

        var updateRequest = new UpdateProfileRequest
        {
            Id = userId,
            FirstName = user.FirstName,
            LastName = user.LastName,
            ShortBio = user.Bio,
            JobTitle = user.JobTitle,
            DateOfBirth = user.DateOfBirth,
            PhoneNumber = user.Contact.Phone,
            StreetAddress = user.Contact.Address,
            City = user.Contact.City,
            Country = user.Contact.Country,
            ZipCode = user.Contact.PostalCode,
            SocialMediaLinkedIn = user.Socials.LinkedIn,
            SocialMediaInstagram = user.Socials.Instagram,
            SocialMediaX = user.Socials.GitHub
        };

        var result = await PersonalInformationService.UpdatePersonalInformationAsync(updateRequest);
        await Task.Delay(500);

        if (result != null && result.IsSuccess)
        {
            Snackbar.Add("Profile updated! Please re-login to see all changes in the session.", Severity.Success, config =>
            {
                config.VisibleStateDuration = 5000;
            });

        }
        else
        {
            Snackbar.Add(result?.Message ?? "Update failed", Severity.Error);
        }

        _isProcessing = false;
    }

    public class UserProfileModel
    {
        public string FirstName { get; set; } = string.Empty;
        public string LastName { get; set; } = string.Empty;
        public string Bio { get; set; } = string.Empty;
        public string JobTitle { get; set; } = string.Empty;
        public DateTime? DateOfBirth { get; set; }
        public ContactModel Contact { get; set; } = new();
        public UserSocialModel Socials { get; set; } = new();
    }

    public class ContactModel
    {
        public string Email { get; set; } = string.Empty;
        public string Phone { get; set; } = string.Empty;
        public string Address { get; set; } = string.Empty;
        public string City { get; set; } = string.Empty;
        public string Country { get; set; } = string.Empty;
        public string PostalCode { get; set; } = string.Empty;
    }

    public class UserSocialModel
    {
        public string LinkedIn { get; set; } = string.Empty;
        public string GitHub { get; set; } = string.Empty;
        public string Instagram { get; set; } = string.Empty;
    }
}