@extends('layouts.app')

@section('title', 'Badilisha Neno la Siri')
@section('page-title', 'Badilisha Neno la Siri')

@push('styles')
<style>
    .strength-meter {
        height: 6px;
        background: #e5e7eb;
        border-radius: 3px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .strength-bar {
        height: 100%;
        width: 0%;
        transition: all 0.5s ease;
        border-radius: 3px;
    }
    
    .strength-weak { background: linear-gradient(90deg, #ef4444, #dc2626); }
    .strength-medium { background: linear-gradient(90deg, #f59e0b, #d97706); }
    .strength-strong { background: linear-gradient(90deg, #3b82f6, #2563eb); }
    .strength-very_strong { background: linear-gradient(90deg, #10b981, #059669); }
    
    .password-option {
        font-family: 'Courier New', monospace;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .password-option:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .feedback-item {
        animation: slideInLeft 0.3s ease;
    }
    
    @keyframes slideInLeft {
        from { transform: translateX(-20px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    .generated-password {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        animation: fadeInUp 0.4s ease;
    }
    
    @keyframes fadeInUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
</style>
@endpush

@section('content')
<div class="max-w-12xl mx-auto" x-data="passwordManager()">
    <!-- Header -->
    <div class="mb-8">
        <div class="glass-card rounded-2xl p-6 shadow-modern">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 accent-gradient rounded-xl flex items-center justify-center shadow-lg">
                    <span class="material-icons text-white text-xl">lock</span>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Badilisha Neno la Siri</h1>
                    <p class="text-gray-600 dark:text-gray-400">Badilisha neno lako la siri kwa usalama zaidi</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Password Change Form -->
        <div class="glass-card rounded-2xl p-6 shadow-modern">
            <div class="mb-6">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Fomu ya Kubadilisha</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">Ingiza neno la siri la sasa na jipya</p>
            </div>

            <form @submit.prevent="submitForm" class="space-y-6">
                <!-- Current Password -->
                <div>
                    <label for="current_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Neno la Siri la Sasa
                    </label>
                    <div class="relative">
                        <input 
                            type="password" 
                            id="current_password"
                            x-model="form.current_password"
                            class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all"
                            placeholder="Ingiza neno la siri la sasa"
                            required>
                        <button 
                            type="button"
                            @click="togglePassword('current')"
                            class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
                            <span class="material-icons text-xl" x-text="showCurrent ? 'visibility_off' : 'visibility'"></span>
                        </button>
                    </div>
                </div>

                <!-- New Password -->
                <div>
                    <label for="new_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Neno la Siri Jipya
                    </label>
                    <div class="relative">
                        <input 
                            type="password" 
                            id="new_password"
                            x-model="form.new_password"
                            @input="checkPasswordStrength"
                            class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all"
                            placeholder="Ingiza neno la siri jipya"
                            required>
                        <button 
                            type="button"
                            @click="togglePassword('new')"
                            class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
                            <span class="material-icons text-xl" x-text="showNew ? 'visibility_off' : 'visibility'"></span>
                        </button>
                    </div>
                    
                    <!-- Password Strength Meter -->
                    <div class="mt-3" x-show="form.new_password.length > 0">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Nguvu ya Neno la Siri:</span>
                            <span class="text-sm font-medium" 
                                  :class="{
                                      'text-red-600': strength.strength === 'weak',
                                      'text-yellow-600': strength.strength === 'medium', 
                                      'text-blue-600': strength.strength === 'strong',
                                      'text-green-600': strength.strength === 'very_strong'
                                  }"
                                  x-text="getStrengthText(strength.strength)"></span>
                        </div>
                        <div class="strength-meter">
                            <div class="strength-bar" 
                                 :class="`strength-${strength.strength}`"
                                 :style="`width: ${strength.score}%`"></div>
                        </div>
                        
                        <!-- Feedback -->
                        <div class="mt-3" x-show="strength.feedback && strength.feedback.length > 0">
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Mapendekezo:</p>
                            <ul class="space-y-1">
                                <template x-for="feedback in strength.feedback" :key="feedback">
                                    <li class="feedback-item text-sm text-orange-600 dark:text-orange-400 flex items-center space-x-2">
                                        <span class="material-icons text-sm">info</span>
                                        <span x-text="feedback"></span>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Confirm Password -->
                <div>
                    <label for="new_password_confirmation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Thibitisha Neno la Siri
                    </label>
                    <div class="relative">
                        <input 
                            type="password" 
                            id="new_password_confirmation"
                            x-model="form.new_password_confirmation"
                            class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all"
                            placeholder="Rudia neno la siri jipya"
                            required>
                        <button 
                            type="button"
                            @click="togglePassword('confirm')"
                            class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
                            <span class="material-icons text-xl" x-text="showConfirm ? 'visibility_off' : 'visibility'"></span>
                        </button>
                    </div>
                    
                    <!-- Password Match Indicator -->
                    <div class="mt-2" x-show="form.new_password_confirmation.length > 0">
                        <div class="flex items-center space-x-2">
                            <span class="material-icons text-sm" 
                                  :class="form.new_password === form.new_password_confirmation ? 'text-green-600' : 'text-red-600'">
                                <span x-show="form.new_password === form.new_password_confirmation">check_circle</span>
                                <span x-show="form.new_password !== form.new_password_confirmation">cancel</span>
                            </span>
                            <span class="text-sm" 
                                  :class="form.new_password === form.new_password_confirmation ? 'text-green-600' : 'text-red-600'"
                                  x-text="form.new_password === form.new_password_confirmation ? 'Neno la siri linalingana' : 'Neno la siri halilingani'"></span>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="pt-4">
                    <button 
                        type="submit"
                        :disabled="loading || !isFormValid()"
                        class="w-full btn-primary px-6 py-3 rounded-xl font-medium text-white transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 flex items-center justify-center space-x-2">
                        <span x-show="!loading">
                            <span class="material-icons">lock_reset</span>
                            <span>Badilisha Neno la Siri</span>
                        </span>
                        <span x-show="loading" class="flex items-center space-x-2">
                            <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                            <span>Inabadilisha...</span>
                        </span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Password Generator -->
        <div class="glass-card rounded-2xl p-6 shadow-modern">
            <div class="mb-6">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Tengeneza Neno la Siri</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">Chagua neno la siri linalozalishwa kiotomatiki</p>
            </div>

            <!-- Generate Button -->
            <button 
                @click="generatePasswords"
                :disabled="generatingPasswords"
                class="w-full mb-6 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white px-6 py-3 rounded-xl font-medium transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 flex items-center justify-center space-x-2">
                <span x-show="!generatingPasswords">
                    <span class="material-icons">auto_fix_high</span>
                    <span>Tengeneza Maneno ya Siri</span>
                </span>
                <span x-show="generatingPasswords" class="flex items-center space-x-2">
                    <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    <span>Inatengeneza...</span>
                </span>
            </button>

            <!-- Generated Passwords -->
            <div x-show="generatedPasswords.length > 0" class="space-y-3">
                <template x-for="(password, index) in generatedPasswords" :key="index">
                    <div class="generated-password rounded-xl p-4 text-white cursor-pointer hover:scale-105 transition-all"
                         @click="selectPassword(password)">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <div class="font-mono text-lg tracking-wide break-all" x-text="password"></div>
                                <div class="text-xs opacity-75 mt-1">Klik ili uchague</div>
                            </div>
                            <div class="ml-4">
                                <span class="material-icons">content_copy</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Password Requirements -->
            <div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
                <h3 class="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-3 flex items-center">
                    <span class="material-icons text-sm mr-2">security</span>
                    Mahitaji ya Neno la Siri
                </h3>
                <ul class="text-xs text-blue-800 dark:text-blue-200 space-y-1">
                    <li class="flex items-center space-x-2">
                        <span class="material-icons text-xs">check</span>
                        <span>Angalau herufi 8</span>
                    </li>
                    <li class="flex items-center space-x-2">
                        <span class="material-icons text-xs">check</span>
                        <span>Herufi kubwa na ndogo</span>
                    </li>
                    <li class="flex items-center space-x-2">
                        <span class="material-icons text-xs">check</span>
                        <span>Nambari na alama maalum</span>
                    </li>
                    <li class="flex items-center space-x-2">
                        <span class="material-icons text-xs">check</span>
                        <span>Tofauti na neno la siri la zamani</span>
                    </li>
                    <li class="flex items-center space-x-2">
                        <span class="material-icons text-xs">check</span>
                        <span>Bila taarifa zako binafsi</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function passwordManager() {
    return {
        form: {
            current_password: '',
            new_password: '',
            new_password_confirmation: ''
        },
        strength: {
            score: 0,
            strength: 'weak',
            feedback: []
        },
        generatedPasswords: [],
        loading: false,
        generatingPasswords: false,
        showCurrent: false,
        showNew: false,
        showConfirm: false,
        strengthCheckTimeout: null,

        togglePassword(field) {
            if (field === 'current') {
                this.showCurrent = !this.showCurrent;
                const input = document.getElementById('current_password');
                input.type = this.showCurrent ? 'text' : 'password';
            } else if (field === 'new') {
                this.showNew = !this.showNew;
                const input = document.getElementById('new_password');
                input.type = this.showNew ? 'text' : 'password';
            } else if (field === 'confirm') {
                this.showConfirm = !this.showConfirm;
                const input = document.getElementById('new_password_confirmation');
                input.type = this.showConfirm ? 'text' : 'password';
            }
        },

        async checkPasswordStrength() {
            if (this.strengthCheckTimeout) {
                clearTimeout(this.strengthCheckTimeout);
            }

            this.strengthCheckTimeout = setTimeout(async () => {
                if (this.form.new_password.length === 0) {
                    this.strength = { score: 0, strength: 'weak', feedback: [] };
                    return;
                }

                try {
                    const response = await axios.post('/password/check-strength', {
                        password: this.form.new_password
                    });
                    this.strength = response.data;
                } catch (error) {
                    console.error('Error checking password strength:', error);
                }
            }, 300);
        },

        async generatePasswords() {
            this.generatingPasswords = true;
            try {
                const response = await axios.post('/password/generate');
                this.generatedPasswords = response.data.passwords;
            } catch (error) {
                console.error('Error generating passwords:', error);
                showToast('Hitilafu imetokea wakati wa kutengeneza maneno ya siri', 'error');
            } finally {
                this.generatingPasswords = false;
            }
        },

        selectPassword(password) {
            this.form.new_password = password;
            this.form.new_password_confirmation = password;
            this.checkPasswordStrength();
            showToast('Neno la siri limechaguliwa!', 'success');
        },

        getStrengthText(strength) {
            const texts = {
                weak: 'Dhaifu',
                medium: 'Wastani', 
                strong: 'Imara',
                very_strong: 'Imara Sana'
            };
            return texts[strength] || 'Dhaifu';
        },

        isFormValid() {
            return this.form.current_password.length > 0 &&
                   this.form.new_password.length >= 8 &&
                   this.form.new_password === this.form.new_password_confirmation &&
                   this.strength.strength !== 'weak';
        },

        async submitForm() {
            if (!this.isFormValid()) {
                showToast('Tafadhali jaza fomu kwa usahihi', 'warning');
                return;
            }

            this.loading = true;
            try {
                const response = await axios.post('/password/update', this.form);
                
                if (response.data.success) {
                    showToast(response.data.message, 'success');
                    
                    // Reset form
                    this.form = {
                        current_password: '',
                        new_password: '',
                        new_password_confirmation: ''
                    };
                    this.strength = { score: 0, strength: 'weak', feedback: [] };
                    this.generatedPasswords = [];
                    
                    // Hide passwords
                    this.showCurrent = false;
                    this.showNew = false;
                    this.showConfirm = false;
                    
                    // Update input types
                    document.getElementById('current_password').type = 'password';
                    document.getElementById('new_password').type = 'password';
                    document.getElementById('new_password_confirmation').type = 'password';
                }
            } catch (error) {
                console.error('Error updating password:', error);
                
                if (error.response && error.response.data.errors) {
                    const errors = error.response.data.errors;
                    Object.keys(errors).forEach(field => {
                        errors[field].forEach(message => {
                            showToast(message, 'error');
                        });
                    });
                } else {
                    showToast('Hitilafu imetokea wakati wa kubadilisha neno la siri', 'error');
                }
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>
@endpush