<?php
// includes/header.php
if (session_status() === PHP_SESSION_NONE) { session_start(); }

if (!function_exists('h')) {
  function h($s){ return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }
}
if (!function_exists('initials2')) {
  function initials2(string $name): string {
    $name = trim($name);
    if ($name === '') return 'U';
    $parts = preg_split('/\s+/', $name);
    $a = mb_substr($parts[0] ?? 'U', 0, 1);
    $b = mb_substr($parts[count($parts)-1] ?? '', 0, 1);
    $out = mb_strtoupper($a . $b);
    return $out ?: 'U';
  }
}

$lang = $_SESSION['lang'] ?? ($_COOKIE['lang'] ?? 'tr');
$lang = in_array($lang, ['tr','en'], true) ? $lang : 'tr';

$full_name = $_SESSION['full_name'] ?? 'User';
$role      = $_SESSION['role'] ?? 'staff';
$uid       = (int)($_SESSION['user_id'] ?? 0);

$sayfa = preg_replace('/[^a-zA-Z0-9-]/', '', $_GET['sayfa'] ?? 'dashboard');

// dashboard.php hesapladıysa kullan, yoksa fallback
$sayfa_basligi = $sayfa_basligi ?? ($lang === 'tr' ? 'Panel' : 'Panel');

// role label (TR/EN)
$roleLabel = $role;
if ($lang === 'tr') {
  $roleLabel = match($role){
    'admin' => 'Admin',
    'doctor' => 'Doktor',
    'nurse' => 'Hemşire',
    default => 'Personel'
  };
} else {
  $roleLabel = match($role){
    'admin' => 'Admin',
    'doctor' => 'Doctor',
    'nurse' => 'Nurse',
    default => 'Staff'
  };
}

// Lang switch URLs
$q = $_GET;
$q['lang'] = 'tr';
$lang_tr_url = 'dashboard.php?' . http_build_query($q);
$q['lang'] = 'en';
$lang_en_url = 'dashboard.php?' . http_build_query($q);

// Flash messages
$flash_ok = $_SESSION['flash_ok'] ?? null;
$flash_er = $_SESSION['flash_er'] ?? null;
unset($_SESSION['flash_ok'], $_SESSION['flash_er']);
?>

<style>
.top-bar{
  height: var(--header-h, 70px);
  background:#fff;
  border-bottom:1px solid var(--border, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 900;
  overflow: visible;
}
.top-bar-inner{
  height: 100%;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.h-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.burger-btn{
  background:#fff;
  border: 1px solid var(--border, #e2e8f0);
  color:#64748b;
  cursor:pointer;
  padding: 8px 12px;
  border-radius: 12px;
  transition: .15s;
}
.burger-btn:hover{ background:#eff6ff; color: var(--accent, #4361ee); }
.h-title{ min-width:0; }
.h-title .big{
  font-weight: 1000;
  color:#0f172a;
  font-size: .98rem;
  line-height: 1.1;
}
.h-title .small{
  margin-top: 4px;
  font-weight: 900;
  color:#94a3b8;
  font-size: .78rem;
}
.h-right{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}

/* Language */
.lang-wrap{ position: relative; flex: 0 0 auto; }
.lang-btn{
  display:flex; align-items:center; gap: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid var(--border, #e2e8f0);
  background:#fff;
  cursor:pointer;
  transition: .15s;
  font-weight: 1000;
  color:#0f172a;
}
.lang-btn:hover{ background:#f8fafc; border-color:#dbeafe; }
.lang-ico{
  width: 28px; height: 28px;
  border-radius: 10px;
  background:#eff6ff;
  border:1px solid #dbeafe;
  display:flex; align-items:center; justify-content:center;
  color: var(--accent, #4361ee);
  font-size: 1rem;
}
.lang-pill{ font-weight: 1100; }
.lang-caret{ color:#94a3b8; }

.dd{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 260px;
  background:#fff;
  border:1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15,23,42,.12);
  padding: 10px;
  display:none;
}
.dd.show{ display:block; }
.dd a{
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: .12s;
}
.dd a:hover{ background:#f8fafc; border-color:#f1f5f9; }
.dd .l{ display:flex; align-items:center; gap: 12px; min-width:0; }
.dd .code{
  width: 38px; height: 28px;
  border-radius: 10px;
  background:#f8fafc;
  border:1px solid #f1f5f9;
  display:flex; align-items:center; justify-content:center;
  font-weight: 1100; color:#0f172a;
}
.dd .name{ font-weight: 1100; color:#0f172a; }

/* User */
.user-wrap{ position: relative; min-width:0; }
.user-btn{
  display:flex; align-items:center; gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid var(--border, #e2e8f0);
  background:#fff;
  cursor:pointer;
  transition:.15s;
  min-width:0;
  max-width: 360px;
}
.user-btn:hover{ background:#f8fafc; border-color:#dbeafe; }
.u-ava{
  width: 34px; height: 34px;
  border-radius: 14px;
  background:#f1f5f9;
  border: 1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center;
  font-weight: 1100; color:#0f172a;
  flex: 0 0 auto;
}
.u-info{ min-width:0; line-height: 1.05; }
.u-name{
  font-weight: 1100;
  color:#0f172a;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.u-role{ font-weight: 900; color:#94a3b8; font-size: .75rem; }
.u-caret{ color:#94a3b8; flex: 0 0 auto; }

.user-dd{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 230px;
  background:#fff;
  border:1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15,23,42,.12);
  padding: 10px;
  display:none;
}
.user-dd.show{ display:block; }

.user-dd button, .user-dd a{
  width:100%;
  text-align:left;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid transparent;
  background:#fff;
  cursor:pointer;
  transition:.12s;
  font-weight: 1000;
  color:#0f172a;
}
.user-dd button:hover, .user-dd a:hover{ background:#f8fafc; border-color:#f1f5f9; }
.user-dd a.danger{ color:#ef4444; }

/* Modal */
.nl-modal{
  position: fixed; inset: 0;
  display:none; align-items:center; justify-content:center;
  padding: 18px; z-index: 2000;
}
.nl-modal.show{ display:flex; }
.nl-modal .backdrop{
  position:absolute; inset:0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
}
.nl-modal .panel{
  position:relative;
  width: 100%;
  max-width: 520px;
  border-radius: 18px;
  background:#fff;
  border:1px solid var(--border, #e2e8f0);
  box-shadow: 0 24px 70px rgba(15,23,42,.18);
  overflow:hidden;
}
.nl-modal .ph{
  padding: 14px 16px;
  border-bottom:1px solid #f1f5f9;
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
}
.nl-modal .ph .ttl{ font-weight: 1100; color:#0f172a; }
.nl-modal .ph .x{
  border:1px solid #f1f5f9;
  background:#fff;
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  color:#64748b;
}
.nl-modal .pb{ padding: 16px; }
.nl-field{ display:flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.nl-field label{ font-weight: 1000; color:#64748b; font-size: .78rem; }
.nl-field input{
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--border, #e2e8f0);
  outline: none;
  font-weight: 900;
}
.nl-field input:focus{
  border-color: var(--accent, #4361ee);
  box-shadow: 0 0 0 4px rgba(67,97,238,.12);
}
.nl-actions{
  display:flex; align-items:center; justify-content:flex-end;
  gap: 10px; margin-top: 14px;
}
.nl-btn{
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 1100;
  cursor:pointer;
  border:1px solid var(--border, #e2e8f0);
  background:#fff; color:#0f172a;
}
.nl-btn.primary{
  background: var(--accent, #4361ee);
  border-color: var(--accent, #4361ee);
  color:#fff;
}
.nl-flash{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #f1f5f9;
  font-weight: 1000;
}
.nl-flash.ok{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.nl-flash.er{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

@media (max-width: 768px){
  .top-bar-inner{ padding: 0 12px; }
  .u-name{ max-width: 120px; }
  .dd{ width: 230px; }
  .user-btn{ max-width: 260px; }
}
@media (max-width: 520px){
  .h-title .small{ display:none; }
  .u-role{ display:none; }
  .u-name{ max-width: 90px; }
}
</style>

<header class="top-bar">
  <div class="top-bar-inner">

    <div class="h-left">
      <button class="burger-btn" onclick="toggleSidebar()" aria-label="Menu">
        <i class="bi bi-list"></i>
      </button>

      <div class="h-title">
        <div class="big"><?= h($sayfa_basligi) ?></div>
        <div class="small"><?= h($sayfa) ?></div>
      </div>
    </div>

    <div class="h-right">

      <div class="lang-wrap" id="langWrap">
        <button class="lang-btn" id="langBtn" type="button">
          <span class="lang-ico"><i class="bi bi-translate"></i></span>
          <span class="lang-pill"><?= strtoupper(h($lang)) ?></span>
          <i class="bi bi-chevron-down lang-caret"></i>
        </button>

        <div class="dd" id="langDD">
          <a href="<?= h($lang_tr_url) ?>">
            <div class="l">
              <div class="code">TR</div>
              <div class="name"><?= h(t('lang_tr')) ?></div>
            </div>
            <?php if ($lang === 'tr'): ?><i class="bi bi-check2" style="color:var(--accent);"></i><?php endif; ?>
          </a>

          <a href="<?= h($lang_en_url) ?>">
            <div class="l">
              <div class="code">EN</div>
              <div class="name"><?= h(t('lang_en')) ?></div>
            </div>
            <?php if ($lang === 'en'): ?><i class="bi bi-check2" style="color:var(--accent);"></i><?php endif; ?>
          </a>
        </div>
      </div>

      <div class="user-wrap" id="userWrap">
        <button class="user-btn" id="userBtn" type="button">
          <div class="u-ava"><?= h(initials2($full_name)) ?></div>
          <div class="u-info">
            <div class="u-name"><?= h($full_name) ?></div>
            <div class="u-role"><?= h($roleLabel) ?></div>
          </div>
          <i class="bi bi-chevron-down u-caret"></i>
        </button>

        <div class="user-dd" id="userDD">
          <button type="button" onclick="openPassModal()">
            <i class="bi bi-shield-lock"></i> <?= h(t('change_pass')) ?>
          </button>
          <a class="danger" href="logout.php">
            <i class="bi bi-power"></i> <?= h(t('logout')) ?>
          </a>
        </div>
      </div>

    </div>
  </div>
</header>

<div class="nl-modal" id="passModal">
  <div class="backdrop" onclick="closePassModal()"></div>
  <div class="panel">
    <div class="ph">
      <div class="ttl"><?= h(t('change_pass')) ?></div>
      <button class="x" type="button" onclick="closePassModal()"><i class="bi bi-x-lg"></i></button>
    </div>

    <div class="pb">
      <?php if ($flash_ok): ?><div class="nl-flash ok"><?= h($flash_ok) ?></div><?php endif; ?>
      <?php if ($flash_er): ?><div class="nl-flash er"><?= h($flash_er) ?></div><?php endif; ?>

      <form method="post" action="dashboard.php?<?= h(http_build_query($_GET)) ?>">
        <input type="hidden" name="action" value="change_password">
        <input type="hidden" name="user_id" value="<?= (int)$uid ?>">

        <div class="nl-field">
          <label><?= h(t('current_pass')) ?></label>
          <input type="password" name="current_password" required autocomplete="current-password">
        </div>

        <div class="nl-field">
          <label><?= h(t('new_pass')) ?></label>
          <input type="password" name="new_password" required autocomplete="new-password" minlength="8">
        </div>

        <div class="nl-field">
          <label><?= h(t('new_pass2')) ?></label>
          <input type="password" name="new_password2" required autocomplete="new-password" minlength="8">
        </div>

        <div class="nl-actions">
          <button class="nl-btn" type="button" onclick="closePassModal()"><?= h(t('cancel')) ?></button>
          <button class="nl-btn primary" type="submit"><?= h(t('save')) ?></button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
(function(){
  const langBtn = document.getElementById('langBtn');
  const langDD  = document.getElementById('langDD');
  const userBtn = document.getElementById('userBtn');
  const userDD  = document.getElementById('userDD');

  function closeAll(){
    langDD?.classList.remove('show');
    userDD?.classList.remove('show');
  }

  langBtn?.addEventListener('click', (e) => {
    e.stopPropagation();
    const open = langDD.classList.toggle('show');
    userDD?.classList.remove('show');
  });

  userBtn?.addEventListener('click', (e) => {
    e.stopPropagation();
    const open = userDD.classList.toggle('show');
    langDD?.classList.remove('show');
  });

  document.addEventListener('click', () => closeAll());
  window.addEventListener('resize', () => closeAll());
})();

function openPassModal(){
  document.getElementById('passModal')?.classList.add('show');
}
function closePassModal(){
  document.getElementById('passModal')?.classList.remove('show');
}

<?php if ($flash_ok || $flash_er): ?>
openPassModal();
<?php endif; ?>
</script>
