<?php

use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules\Password;

new class extends Component
{
    use WithFileUploads;

    public $name = '';
    public $email = '';
    public $avatar;
    public $current_password = '';
    public $new_password = '';
    public $confirm_password = '';

    public function render()
    {
        return $this->view()->layout('layouts::auth');
    }

    public function mount()
    {
        $user = auth()->user();
        $this->name = $user->name;
        $this->email = $user->email;
    }

    public function updateProfile()
    {
        $user = auth()->user();

        $this->validate([
            'name' => 'required|min:3',
            'email' => 'required|email|unique:users,email,' . $user->id,
            'avatar' => 'nullable|image|max:2048',
        ]);

        $data = [
            'name' => $this->name,
            'email' => $this->email,
        ];

        if ($this->avatar) {
            $data['avatar'] = $this->avatar->store('avatars', 'public');
        }

        $user->update($data);

        session()->flash('profile_message', 'Profile updated successfully.');
    }

    public function updatePassword()
    {
        $this->validate([
            'current_password' => 'required|current_password',
            'new_password' => ['required', Password::defaults()],
            'confirm_password' => 'required|same:new_password',
        ]);

        auth()->user()->update([
            'password' => Hash::make($this->new_password),
        ]);

        $this->reset(['current_password', 'new_password', 'confirm_password']);

        session()->flash('password_message', 'Password updated successfully.');
    }
};
?>

<div class="max-content">
    <header class="mb-10">
        <h1 class="text-2xl font-semibold tracking-tight">Account Settings</h1>
        <p class="text-sm text-gray-500 mt-1">Manage your profile information and security preferences.</p>
    </header>

    <div class="space-y-8">
        <!-- Profile Information -->
        <section class="card p-8">
            <div class="border-b border-gray-100 pb-6 mb-8">
                <h2 class="text-base font-semibold">Profile Information</h2>
                <p class="text-xs text-gray-400 mt-1">Update your account's profile information and email address.</p>
            </div>

            @if (session()->has('profile_message'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded relative mb-6 text-sm" role="alert">
                    <span>{{ session('profile_message') }}</span>
                </div>
            @endif

            <form wire:submit.prevent="updateProfile" class="space-y-6">
                <div class="flex items-center gap-8 mb-8">
                    <div class="relative group">
                        <div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-2xl font-bold border border-gray-200 overflow-hidden">
                            @if($avatar)
                                <img src="{{ $avatar->temporaryUrl() }}" class="w-full h-full object-cover">
                            @elseif(auth()->user()->avatar)
                                <img src="{{ asset('storage/' . auth()->user()->avatar) }}" class="w-full h-full object-cover">
                            @else
                                {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
                            @endif
                        </div>
                        <label class="absolute inset-0 flex items-center justify-center bg-black/40 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity text-[10px] font-bold uppercase cursor-pointer">
                            <span>Change</span>
                            <input type="file" wire:model="avatar" class="hidden">
                        </label>
                    </div>
                    <div>
                        <h3 class="font-medium text-sm">Profile Photo</h3>
                        <p class="text-xs text-gray-400 mt-1">PNG, JPG up to 2MB. Recommended 400x400.</p>
                        <div wire:loading wire:target="avatar" class="text-xs text-gray-500 mt-1">Uploading...</div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Full Name</label>
                        <input type="text" wire:model="name" class="input-field w-full" required>
                        @error('name') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Email Address</label>
                        <input type="email" wire:model="email" class="input-field w-full" required>
                        @error('email') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="flex justify-end pt-4">
                    <button type="submit" wire:loading.attr="disabled" class="btn-primary px-8" style="background-color: #99BC85;">
                        <span wire:loading.remove wire:target="updateProfile">Save Profile</span>
                        <span wire:loading wire:target="updateProfile">Saving...</span>
                    </button>
                </div>
            </form>
        </section>

        <!-- Change Password -->
        <section class="card p-8">
            <div class="border-b border-gray-100 pb-6 mb-8">
                <h2 class="text-base font-semibold">Security Settings</h2>
                <p class="text-xs text-gray-400 mt-1">Ensure your account is using a long, random password to stay secure.</p>
            </div>

            @if (session()->has('password_message'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded relative mb-6 text-sm" role="alert">
                    <span>{{ session('password_message') }}</span>
                </div>
            @endif

            <form wire:submit.prevent="updatePassword" class="space-y-6">
                <div class="max-w-[400px] space-y-6">
                    <div>
                        <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Current Password</label>
                        <input type="password" wire:model="current_password" class="input-field w-full" placeholder="••••••••">
                        @error('current_password') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">New Password</label>
                        <input type="password" wire:model="new_password" class="input-field w-full" placeholder="••••••••">
                        @error('new_password') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Confirm New Password</label>
                        <input type="password" wire:model="confirm_password" class="input-field w-full" placeholder="••••••••">
                        @error('confirm_password') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="flex justify-end pt-4 border-t border-gray-50 mt-8">
                    <button type="submit" wire:loading.attr="disabled" class="btn-primary px-8" style="background-color: #99BC85;">
                        <span wire:loading.remove wire:target="updatePassword">Update Password</span>
                        <span wire:loading wire:target="updatePassword">Updating...</span>
                    </button>
                </div>
            </form>
        </section>
    </div>
</div>
