class AuthForm extends HTMLElement {
    constructor() {
        super();
        this.mode = 'login'; // 'login' or 'register'
    }

    connectedCallback() {
        this.render();
        this.setupEventListeners();
    }

    toggleMode() {
        this.mode = this.mode === 'login' ? 'register' : 'login';
        this.render();
        this.setupEventListeners();
    }

    async handleSubmit(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData.entries());

        try {
            const endpoint = this.mode === 'login' ? '/auth/login' : '/auth/register';
            const response = await fetch(`${API_BASE_URL}${endpoint}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            });

            if (!response.ok) {
                throw new Error(await response.text());
            }

            const { token, user } = await response.json();
            localStorage.setItem('token', token);
            localStorage.setItem('user', JSON.stringify(user));

            if (user.role === 'admin') {
                redirectTo('/admin-dashboard.html');
            } else {
                redirectTo('/dashboard.html');
            }
        } catch (error) {
            showToast(error.message, 'error');
        }
    }

    setupEventListeners() {
        this.querySelector('form').addEventListener('submit', (e) => this.handleSubmit(e));
        this.querySelector('#toggleMode').addEventListener('click', () => this.toggleMode());
    }

    render() {
        this.innerHTML = `
            <style>
                .auth-form input {
                    transition: all 0.2s;
                }
                .auth-form input:focus {
                    border-color: #6366f1;
                    box-shadow: 0 0 0 1px #6366f1;
                }
            </style>
            <form class="auth-form space-y-6">
                <div class="space-y-4">
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                        <input id="email" name="email" type="email" required
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                        <input id="password" name="password" type="password" required
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
                    </div>
                    ${this.mode === 'register' ? `
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
                            <input id="name" name="name" type="text" required
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
                        </div>
                    ` : ''}
                </div>
                <div>
                    <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        ${this.mode === 'login' ? 'Sign in' : 'Create account'}
                    </button>
                </div>
                <div class="text-center text-sm text-gray-600">
                    <button id="toggleMode" type="button" class="font-medium text-purple-600 hover:text-purple-500">
                        ${this.mode === 'login' ? 'Need an account? Register' : 'Already have an account? Sign in'}
                    </button>
                </div>
            </form>
        `;
    }
}

customElements.define('auth-form', AuthForm);