<%
  const showLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const clientId = r_client && r_client.id ? String(r_client.id) : '';
  const clientBlocked = r_client && r_client.status === 'block';
  const clientActive = Boolean(r_client && r_client.active);
  const rawAvatar = r_client && typeof r_client.avatar === 'string' ? r_client.avatar.trim() : '';
  const hasUnsafeAvatarSegment = /(?:^|\/)(?:undefined|null)(?:[?#]|$)/i.test(rawAvatar);
  const avatarUrl = !hasUnsafeAvatarSegment && /^(?:https?:\/\/|\/(?!\/))/i.test(rawAvatar)
    ? rawAvatar
    : '';
  const avatarName = r_client && r_client.name ? r_client.name : (showLocale === 'ar' ? 'مستخدم' : 'User');
  const avatarInitial = avatarName
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((part) => Array.from(part)[0] || '')
    .join('') || (showLocale === 'ar' ? 'م' : 'U');
  const locationTitle = r_client && r_client.location && r_client.location.title ? r_client.location.title : '';
  const locationDescription = r_client && r_client.location && r_client.location.description ? r_client.location.description : '';
  const showCopy = showLocale === 'ar'
    ? {
        eyebrow: 'ملف العميل',
        title: 'تفاصيل المستخدم',
        subtitle: 'هوية الحساب والتواصل والحالة التشغيلية في عرض آمن.',
        cardTitle: 'ملف المستخدم',
        cardSubtitle: 'لا يتم عرض كلمة المرور أو رمز التفعيل أو بيانات الاعتماد الحساسة.',
        name: 'الاسم',
        email: 'البريد الإلكتروني',
        phone: 'رقم الجوال',
        account: 'حالة الحساب',
        activation: 'حالة التفعيل',
        balance: 'الرصيد',
        joined: 'تاريخ الانضمام',
        location: 'الموقع المسجل',
        active: 'نشط',
        inactive: 'غير نشط',
        blocked: 'محظور',
        back: 'العودة للمستخدمين',
        edit: 'تعديل المستخدم',
        noLocation: 'لا يوجد موقع مسجل'
      }
    : {
        eyebrow: 'Customer profile',
        title: 'User details',
        subtitle: 'Account identity, contact, and operational state in a safe view.',
        cardTitle: 'User profile',
        cardSubtitle: 'Passwords, activation codes, and sensitive credentials are never displayed.',
        name: 'Name',
        email: 'Email',
        phone: 'Phone',
        account: 'Account state',
        activation: 'Activation',
        balance: 'Balance',
        joined: 'Joined',
        location: 'Saved location',
        active: 'Active',
        inactive: 'Inactive',
        blocked: 'Blocked',
        back: 'Back to users',
        edit: 'Edit user',
        noLocation: 'No saved location'
      };
%>

<link rel="stylesheet" href="/admin/assets/css/pages/people-resource.css?v=2.6.5.1">

<section class="kt-people-page kt-clients-page" dir="<%= showLocale === 'ar' ? 'rtl' : 'ltr' %>">
  <div
    data-clients-contract
    data-clients-csrf-token="<%= csrfToken %>"
    hidden
  ></div>

  <div class="kt-people-container kt-people-container--detail">
    <header class="kt-people-hero">
      <div class="kt-people-hero__identity">
        <span class="kt-people-hero__icon" aria-hidden="true"><i class="ti ti-user-scan"></i></span>
        <div>
          <span class="kt-people-hero__eyebrow"><%= showCopy.eyebrow %></span>
          <h1><%= showCopy.title %></h1>
          <p><%= showCopy.subtitle %></p>
        </div>
      </div>
      <a class="kt-people-btn kt-people-btn--secondary" href="<%= referer || '/dashboard/clients/all' %>">
        <i class="ti ti-arrow-right" aria-hidden="true"></i><span><%= showCopy.back %></span>
      </a>
    </header>

    <section class="kt-people-detail-card">
      <div class="kt-people-card-heading">
        <span class="kt-people-card-heading__icon" aria-hidden="true"><i class="ti ti-id-badge"></i></span>
        <div><h2><%= showCopy.cardTitle %></h2><p><%= showCopy.cardSubtitle %></p></div>
      </div>

      <div class="kt-people-profile">
        <div class="kt-people-profile__identity">
          <span class="kt-people-profile__avatar">
            <% if (avatarUrl) { %>
              <img
                src="<%= avatarUrl %>"
                alt="<%= avatarName %>"
                data-people-image
              >
            <% } %>
            <span
              class="kt-people-avatar__fallback kt-people-avatar__fallback--large"
              data-people-avatar-fallback
              aria-hidden="true"
              <%= avatarUrl ? 'hidden' : '' %>
            ><%= avatarInitial %></span>
          </span>
          <h2><%= r_client.name || '—' %></h2>
          <p dir="ltr"><%= r_client.email || '—' %></p>
          <span class="kt-people-badge <%= clientBlocked ? 'kt-people-badge--blocked' : 'kt-people-badge--active' %>">
            <%= clientBlocked ? showCopy.blocked : showCopy.active %>
          </span>
        </div>

        <div class="kt-people-profile__details">
          <div class="kt-people-detail"><small><%= showCopy.name %></small><strong><%= r_client.name || '—' %></strong></div>
          <div class="kt-people-detail"><small><%= showCopy.email %></small><strong dir="ltr"><%= r_client.email || '—' %></strong></div>
          <div class="kt-people-detail"><small><%= showCopy.phone %></small><strong dir="ltr"><%= r_client.fullPhone || `${r_client.countryCode || ''}${r_client.phone || ''}` || '—' %></strong></div>
          <div class="kt-people-detail"><small><%= showCopy.account %></small><strong><%= clientBlocked ? showCopy.blocked : showCopy.active %></strong></div>
          <div class="kt-people-detail"><small><%= showCopy.activation %></small><strong><%= clientActive ? showCopy.active : showCopy.inactive %></strong></div>
          <div class="kt-people-detail"><small><%= showCopy.balance %></small><strong><%= Number(r_client.balance || 0).toLocaleString(showLocale) %></strong></div>
          <div class="kt-people-detail"><small><%= showCopy.joined %></small><strong><%= r_client.createdAt ? moment(r_client.createdAt).locale(showLocale).format('YYYY/MM/DD') : '—' %></strong></div>
          <div class="kt-people-detail kt-people-detail--full">
            <small><%= showCopy.location %></small>
            <strong><%= [locationTitle, locationDescription].filter(Boolean).join(' — ') || showCopy.noLocation %></strong>
          </div>
        </div>
      </div>

      <div class="kt-people-detail-actions">
        <a class="kt-people-btn kt-people-btn--soft" href="<%= referer || '/dashboard/clients/all' %>"><%= showCopy.back %></a>
        <a class="kt-people-btn kt-people-btn--primary" href="/dashboard/clients/edit/<%= clientId %>">
          <i class="ti ti-edit" aria-hidden="true"></i><span><%= showCopy.edit %></span>
        </a>
      </div>
    </section>
  </div>
</section>

<script src="/admin/assets/js/pages/clients-contract.js"></script>
<script src="/admin/assets/js/pages/people-resource.js?v=2.6.5.1" defer></script>
