class CustomAuthModal extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .modal-overlay {
                    background-color: rgba(0, 0, 0, 0.5);
                    backdrop-filter: blur(5px);
                }
                .modal-content {
                    transform: translateY(-20px);
                    opacity: 0;
                    transition: all 0.3s ease;
                }
                .modal-active {
                    transform: translateY(0);
                    opacity: 1;
                }
                .tab-button {
                    transition: all 0.2s ease;
                }
                .tab-button.active {
                    border-bottom: 2px solid #0D47A1;
                    color: #0D47A1;
                }
                .input-field:focus {
                    border-color: #1976D2;
                    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
                }
            </style>
            <div id="modal" class="fixed inset-0 z-50 hidden">
                <div class="modal-overlay absolute inset-0 flex items-center justify-center p-4">
                    <div class="modal-content bg-white rounded-xl shadow-xl w-full max-w-md">
                        <!-- Tabs -->
                        <div class="flex border-b border-gray-200">
                            <button id="loginTab" class="tab-button flex-1 py-4 font-medium text-gray-500 active">Login</button>
                            <button id="forgotTab" class="tab-button flex-1 py-4 font-medium text-gray-500">Reset Password</button>
                            <button id="closeModal" class="px-4 text-gray-400 hover:text-gray-600">
                                <i data-feather="x"></i>
                            </button>
                        </div>
                        
                        <!-- Login Form -->
                        <form id="loginForm" class="p-6">
                            <div class="mb-4">
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email or Phone</label>
                                <input type="text" id="email" name="email" required
                                    class="input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none">
                            </div>
                            <div class="mb-4">
                                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                                <input type="password" id="password" name="password" required
                                    class="input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none">
                            </div>
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center">
                                    <input type="checkbox" id="remember" name="remember"
                                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                    <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
                                </div>
                                <button type="button" onclick="this.closest('custom-auth-modal').switchTab('forgot')"
                                    class="text-sm text-primary hover:text-secondary">
                                    Forgot password?
                                </button>
                            </div>
                            <button type="submit" 
                                class="w-full bg-primary hover:bg-secondary text-white py-2 px-4 rounded-lg font-medium transition-all">
                                Sign In
                            </button>
                        </form>
                        
                        <!-- Forgot Password Form -->
                        <form id="forgotForm" class="p-6 hidden">
                            <div class="mb-6">
                                <p class="text-gray-600 mb-4">Enter your email address and we'll send you a link to reset your password.</p>
                                <label for="resetEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                <input type="email" id="resetEmail" name="email" required
                                    class="input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none">
                            </div>
                            <button type="submit" 
                                class="w-full bg-primary hover:bg-secondary text-white py-2 px-4 rounded-lg font-medium transition-all">
                                Send Reset Link
                            </button>
                            <div class="mt-4 text-center">
                                <button type="button" onclick="this.closest('custom-auth-modal').switchTab('login')"
                                    class="text-sm text-primary hover:text-secondary">
                                    Back to login
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        `;
    }

    connectedCallback() {
        this.modal = this.shadowRoot.getElementById('modal');
        this.loginTab = this.shadowRoot.getElementById('loginTab');
        this.forgotTab = this.shadowRoot.getElementById('forgotTab');
        this.loginForm = this.shadowRoot.getElementById('loginForm');
        this.forgotForm = this.shadowRoot.getElementById('forgotForm');
        this.closeButton = this.shadowRoot.getElementById('closeModal');

        // Tab switching
        this.loginTab.addEventListener('click', () => this.switchTab('login'));
        this.forgotTab.addEventListener('click', () => this.switchTab('forgot'));
        this.closeButton.addEventListener('click', () => this.hideModal());

        // Close modal when clicking outside
        this.shadowRoot.querySelector('.modal-overlay').addEventListener('click', (e) => {
            if (e.target === e.currentTarget) {
                this.hideModal();
            }
        });
    }

    showModal(tab = 'login') {
        this.modal.classList.remove('hidden');
        setTimeout(() => {
            this.shadowRoot.querySelector('.modal-content').classList.add('modal-active');
        }, 10);
        this.switchTab(tab);
        feather.replace();
    }

    hideModal() {
        this.shadowRoot.querySelector('.modal-content').classList.remove('modal-active');
        setTimeout(() => {
            this.modal.classList.add('hidden');
        }, 300);
    }

    switchTab(tab) {
        if (tab === 'login') {
            this.loginTab.classList.add('active');
            this.forgotTab.classList.remove('active');
            this.loginForm.classList.remove('hidden');
            this.forgotForm.classList.add('hidden');
        } else {
            this.loginTab.classList.remove('active');
            this.forgotTab.classList.add('active');
            this.loginForm.classList.add('hidden');
            this