<?php

require_once __DIR__ . '/includes/settings_helpers.php';

settings_require_auth();
settings_ensure_tables($conn);

$org = settings_get_current_org($conn);
$orgId = (int) ($org['id'] ?? 0);
$users = settings_get_users($conn, $orgId);
$flash = settings_flash_message();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Users | Settings</title>
  <link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
  <link rel="stylesheet" href="assets/font-inter.css">
  <link rel="stylesheet" href="orgprofile.css">
  <style>
    .settings-table{width:100%;border-collapse:collapse;margin-top:12px;}
    .settings-table th,.settings-table td{padding:18px 0;border-top:1px solid var(--border);text-align:left;vertical-align:middle;}
    .settings-table th{font-size:13px;text-transform:uppercase;color:#111827;}
    .user-cell{display:flex;align-items:center;gap:14px;}
    .user-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;overflow:hidden;}
    .user-avatar img{width:100%;height:100%;object-fit:cover;}
    .user-name{font-size:16px;font-weight:600;color:#2563eb;}
    .user-email{font-size:14px;color:#111827;margin-top:4px;}
    .status-active{color:#22c55e;font-weight:700;}
    .row-menu{width:26px;height:26px;border:1px solid var(--border);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#9ca3af;}
  </style>
</head>
<body class="orgprofile-page">
  <?php settings_render_header($_SESSION['org_name'] ?? 'demo', 'dashboard.php', 'fa-users'); ?>

  <main class="profile-layout">
    <?php settings_render_sidebar('users'); ?>

    <section class="profile-main">
      <div class="profile-head">
        <h1>Users</h1>
        <div class="toolbar-actions">
          <a class="save-btn" href="invite_user.php">Invite User</a>
        </div>
      </div>

      <div class="profile-card">
        <?php if ($flash['type'] === 'success'): ?>
          <div class="alert-ok"><?php echo htmlspecialchars($flash['message']); ?></div>
        <?php endif; ?>
        <table class="settings-table">
          <thead>
            <tr>
              <th style="width:50%;">User Details</th>
              <th>Role</th>
              <th>Status</th>
              <th style="width:60px;"></th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($users as $user): ?>
              <?php
                $name = trim((string) ($user['full_name'] ?? ''));
                $initial = $name !== '' ? strtoupper(substr($name, 0, 1)) : 'U';
                $avatarPath = trim((string) ($user['avatar_path'] ?? ''));
              ?>
              <tr>
                <td>
                  <div class="user-cell">
                    <div class="user-avatar">
                      <?php if ($avatarPath !== '' && file_exists(__DIR__ . '/' . $avatarPath)): ?>
                        <img src="<?php echo htmlspecialchars($avatarPath); ?>" alt="<?php echo htmlspecialchars($name); ?>">
                      <?php else: ?>
                        <?php echo htmlspecialchars($initial); ?>
                      <?php endif; ?>
                    </div>
                    <div>
                      <div class="user-name"><?php echo htmlspecialchars($name); ?></div>
                      <div class="user-email"><?php echo htmlspecialchars((string) ($user['email'] ?? '')); ?></div>
                    </div>
                  </div>
                </td>
                <td style="font-size:16px;"><?php echo htmlspecialchars((string) ($user['role_name'] ?? '')); ?></td>
                <td class="status-active"><?php echo htmlspecialchars((string) ($user['status'] ?? 'ACTIVE')); ?></td>
                <td><span class="row-menu"><i class="fa-solid fa-ellipsis"></i></span></td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
    </section>
  </main>
</body>
</html>
