@extends('layouts.app')
@section('title', 'My Account — Jumia Clone')

@section('content')
<div class="max-w-4xl mx-auto px-3 md:px-6 py-4"
     x-data="{
         user: $store.app.user,
         tab: 'profile',
         profile: { first_name: '', last_name: '', phone: '', email: '' },
         loading: false,
         async init() {
             if (!$store.app.isLoggedIn) { window.location.href = '/login'; return }
             try {
                 const data = await api.get('/auth/me')
                 this.user = data.data
                 this.profile = { first_name: data.data.first_name, last_name: data.data.last_name, phone: data.data.phone, email: data.data.email }
             } catch {}
         },
         async saveProfile() {
             this.loading = true
             try {
                 await api.put('/user/profile', this.profile)
                 Alpine.store('app').toast('Profile updated!', 'success')
             } catch (e) { Alpine.store('app').toast(e.message, 'error') }
             this.loading = false
         },
     }"
     x-init="init()">

    {{-- Mobile user card --}}
    <div class="card-padded mb-4 flex items-center gap-4">
        <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
            <span class="text-orange-500 font-black text-2xl" x-text="user?.first_name?.charAt(0)"></span>
        </div>
        <div>
            <h1 class="text-base font-bold text-gray-900" x-text="`${user?.first_name} ${user?.last_name}`"></h1>
            <p class="text-sm text-gray-500" x-text="user?.email"></p>
            <span class="badge-orange mt-1" x-show="$store.app.isSeller">Seller</span>
        </div>
    </div>

    {{-- Tab navigation --}}
    <div class="flex gap-1 bg-white rounded-xl p-1 shadow-sm mb-4 overflow-x-auto scrollbar-hide">
        @foreach([
            ['key' => 'profile',       'label' => 'Profile',       'icon' => '👤'],
            ['key' => 'addresses',     'label' => 'Addresses',     'icon' => '📍'],
            ['key' => 'notifications', 'label' => 'Notifications', 'icon' => '🔔'],
            ['key' => 'security',      'label' => 'Security',      'icon' => '🔒'],
            ['key' => 'referral',      'label' => 'Referral',      'icon' => '🎁'],
        ] as $t)
        <button @click="tab = '{{ $t['key'] }}'"
                class="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium whitespace-nowrap transition-colors flex-1 justify-center"
                :class="tab === '{{ $t['key'] }}' ? 'bg-orange-500 text-white' : 'text-gray-600 hover:bg-gray-100'">
            <span>{{ $t['icon'] }}</span>
            <span class="hidden sm:block">{{ $t['label'] }}</span>
        </button>
        @endforeach
    </div>

    {{-- Profile tab --}}
    <div x-show="tab === 'profile'" class="animate-fade-in card-padded space-y-4">
        <h2 class="text-sm font-bold text-gray-900">Personal Information</h2>
        <div class="grid grid-cols-2 gap-3">
            <div>
                <label class="label">First Name</label>
                <input type="text" x-model="profile.first_name" class="input">
            </div>
            <div>
                <label class="label">Last Name</label>
                <input type="text" x-model="profile.last_name" class="input">
            </div>
        </div>
        <div>
            <label class="label">Email Address</label>
            <input type="email" x-model="profile.email" class="input" disabled
                   class="input bg-gray-50 cursor-not-allowed">
            <p class="error-msg mt-1 text-gray-400">Email cannot be changed</p>
        </div>
        <div>
            <label class="label">Phone Number</label>
            <input type="tel" x-model="profile.phone" class="input">
        </div>
        <button @click="saveProfile()" :disabled="loading" class="btn-primary">
            <span x-show="!loading">Save Changes</span>
            <span x-show="loading">Saving...</span>
        </button>
    </div>

    {{-- Addresses tab --}}
    <div x-show="tab === 'addresses'" class="animate-fade-in"
         x-data="{
             addresses: [],
             async init() {
                 const data = await api.get('/user/addresses')
                 this.addresses = data.data || []
             },
             async deleteAddress(id) {
                 if (!confirm('Delete this address?')) return
                 await api.delete('/user/addresses/' + id)
                 this.addresses = this.addresses.filter(a => a.id !== id)
             }
         }"
         x-init="init()">
        <div class="space-y-3">
            <template x-for="addr in addresses" :key="addr.id">
                <div class="card-padded">
                    <div class="flex items-start justify-between">
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <p class="text-sm font-semibold text-gray-900"
                                   x-text="`${addr.first_name} ${addr.last_name}`"></p>
                                <span x-show="addr.is_default" class="badge-orange">Default</span>
                            </div>
                            <p class="text-sm text-gray-600" x-text="addr.phone"></p>
                            <p class="text-sm text-gray-600"
                               x-text="`${addr.address_line_1}, ${addr.city}, ${addr.state}`"></p>
                        </div>
                        <div class="flex gap-2">
                            <button class="text-xs text-orange-500 hover:underline">Edit</button>
                            <button @click="deleteAddress(addr.id)"
                                    class="text-xs text-red-500 hover:underline">Delete</button>
                        </div>
                    </div>
                </div>
            </template>
            <div x-show="addresses.length === 0" class="card-padded text-center text-gray-500 text-sm py-8">
                No saved addresses yet
            </div>
            <button class="btn-secondary w-full">+ Add New Address</button>
        </div>
    </div>

    {{-- Referral tab --}}
    <div x-show="tab === 'referral'" class="animate-fade-in card-padded space-y-4">
        <h2 class="text-sm font-bold text-gray-900">Referral Program</h2>
        <div class="bg-orange-50 rounded-xl p-4 text-center">
            <p class="text-4xl mb-2">🎁</p>
            <p class="text-sm text-gray-600 mb-1">Your referral code</p>
            <p class="text-2xl font-black text-orange-500 tracking-widest" x-text="user?.referral_code"></p>
            <p class="text-xs text-gray-500 mt-2">Share this code and earn ₦500 for every friend who signs up!</p>
        </div>
        <div class="flex gap-2">
            <input type="text" :value="`${window.location.origin}/register?ref=${user?.referral_code}`"
                   class="input text-xs flex-1" readonly>
            <button @click="navigator.clipboard.writeText(`${window.location.origin}/register?ref=${user?.referral_code}`); Alpine.store('app').toast('Link copied!')"
                    class="btn-primary text-xs px-4">Copy</button>
        </div>
    </div>

    {{-- Security tab --}}
    <div x-show="tab === 'security'" class="animate-fade-in card-padded space-y-4">
        <h2 class="text-sm font-bold text-gray-900">Change Password</h2>
        <div>
            <label class="label">Current Password</label>
            <input type="password" class="input" placeholder="Enter current password">
        </div>
        <div>
            <label class="label">New Password</label>
            <input type="password" class="input" placeholder="At least 8 characters">
        </div>
        <div>
            <label class="label">Confirm New Password</label>
            <input type="password" class="input" placeholder="Repeat new password">
        </div>
        <button class="btn-primary">Update Password</button>

        <div class="pt-4 border-t border-gray-100">
            <h3 class="text-sm font-bold text-red-600 mb-2">Danger Zone</h3>
            <button class="btn-danger text-sm">Delete My Account</button>
        </div>
    </div>
</div>
@endsection