/**
 * Alpine Component: Profile Modal
 * Hiển thị và cập nhật thông tin cá nhân
 */
import { requestJson, formatDate } from '../helpers';
import MSG from '../messages';

export function registerProfilePage(Alpine) {
  Alpine.data('profilePage', () => ({
    name: '',
    displayName: '',
    email: '',
    role: '',
    createdAt: '',

    init() {
      const root = document.getElementById('app-layout');
      if (!root) return;

      this.name = root.dataset?.userName || '';
      this.displayName = root.dataset?.userDisplayName || '';
      this.email = root.dataset?.userEmail || '';
      this.role = root.dataset?.userRole || '';
      this.createdAt = root.dataset?.userCreatedAt || '';

      this._bindForm();

      // Đăng ký global function để sidebar và các component khác có thể mở modal
      window.openProfileModal = () => this.openProfileModal();
    },

    openProfileModal() {
      // Fill dữ liệu hiện tại vào form
      const form = document.getElementById('profileForm');
      if (form) {
        const nameInput = form.querySelector('input[name="name"]');
        const displayNameInput = form.querySelector('input[name="display_name"]');
        const emailInput = form.querySelector('input[name="email"]');
        const currentPasswordInput = form.querySelector('input[name="current_password"]');
        const passwordInput = form.querySelector('input[name="password"]');
        const passwordConfirmInput = form.querySelector('input[name="password_confirmation"]');
        if (nameInput) nameInput.value = this.name;
        if (displayNameInput) displayNameInput.value = this.displayName;
        if (emailInput) emailInput.value = this.email;
        if (currentPasswordInput) currentPasswordInput.value = '';
        if (passwordInput) passwordInput.value = '';
        if (passwordConfirmInput) passwordConfirmInput.value = '';
      }
      modalOpen('profileModal');
    },

    roleLabel() {
      const labels = { owner: 'Chủ sở hữu', admin: 'Quản trị viên', staff: 'Nhân viên' };
      return labels[this.role] || this.role || 'Không xác định';
    },

    formatDate(v) {
      return formatDate(v);
    },

    async submitProfile(e) {
      e.preventDefault();
      const form = document.getElementById('profileForm');
      if (!form) return;

      const payload = Object.fromEntries(new FormData(form).entries());
      const currentPassword = (payload.current_password || '').trim();
      const password = (payload.password || '').trim();
      const passwordConfirmation = (payload.password_confirmation || '').trim();
      const wantsPasswordChange = currentPassword || password || passwordConfirmation;

      try {
        if (wantsPasswordChange) {
          if (!currentPassword || !password || !passwordConfirmation) {
            showWarning('Thiếu thông tin', 'Vui lòng nhập đầy đủ mật khẩu');
            return;
          }

          if (password !== passwordConfirmation) {
            showWarning('Không khớp', 'Mật khẩu xác nhận không khớp');
            return;
          }

          await requestJson('/profile/password', {
            method: 'PUT',
            body: JSON.stringify({
              current_password: currentPassword,
              password: password,
              password_confirmation: passwordConfirmation,
            }),
          });

          const currentPasswordInput = form.querySelector('input[name="current_password"]');
          const passwordInput = form.querySelector('input[name="password"]');
          const passwordConfirmInput = form.querySelector('input[name="password_confirmation"]');
          if (currentPasswordInput) currentPasswordInput.value = '';
          if (passwordInput) passwordInput.value = '';
          if (passwordConfirmInput) passwordConfirmInput.value = '';
        }

        delete payload.current_password;
        delete payload.password;
        delete payload.password_confirmation;

        const data = await requestJson('/profile', { method: 'PUT', body: JSON.stringify(payload) });
        if (data.success && data.user) {
          this.name = data.user.name;
          this.displayName = data.user.display_name;
          this.email = data.user.email;

          // Cập nhật hiển thị trên sidebar
          const sidebarLabel = document.querySelector('.sidebar-label-user');
          if (sidebarLabel) {
            sidebarLabel.textContent = data.user.display_name || data.user.name;
          }
        }
        modalClose('profileModal');
        showSuccess('Thành công', data.message || 'Cập nhật thông tin thành công');
      } catch (err) {
        showError('Lỗi', err.message || 'Không thể cập nhật thông tin');
      }
    },

    _bindForm() {
      const form = document.getElementById('profileForm');
      if (form) {
        // Loại bỏ listener cũ nếu có
        form.removeEventListener('submit', this._submitHandler);
        this._submitHandler = (e) => this.submitProfile(e);
        form.addEventListener('submit', this._submitHandler);
      }
    },

  }));
}