<?php
/**
 * modules/profile/index.php — Preferencias: cuenta, idioma y tema.
 */
if (!defined('IN_APP')) { die('Acceso denegado'); }

$auth   = new Auth($mysqli, $_config);
$pwError = ''; $pwOk = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['change_password'])) {
    if ($auth->changePassword($_user['id_user'], $_POST['current'] ?? '', $_POST['new'] ?? '')) {
        $pwOk = true;
    } else {
        $pwError = $auth->_error;
    }
}
// Revocar un token/app conectada.
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['revoke_token'])) {
    $auth->revokeApiKey($_user['id_user'], (int)$_POST['revoke_token']);
    App::redirect('/profile/');
}

$apiKeys = $auth->listApiKeys($_user['id_user']);
$lang       = App::locale();
$page_title = App::t('menu.preferences');
?>
<div class="space-y-6 px-4 py-6">

  <!-- Cuenta -->
  <section class="rounded-lg border border-gray-200 bg-white dark:border-ink-700 dark:bg-ink-900">
    <div class="border-b border-gray-200 px-4 py-3 dark:border-ink-700">
      <h2 class="font-medium"><?= App::e(App::t('profile.account')) ?></h2>
    </div>
    <div class="grid gap-4 px-4 py-4 sm:grid-cols-2">
      <div>
        <div class="text-xs text-gray-dark dark:text-gray-light"><?= App::e(App::t('auth.name')) ?></div>
        <div class="text-sm"><?= App::e($_user['name']) ?></div>
      </div>
      <div>
        <div class="text-xs text-gray-dark dark:text-gray-light"><?= App::e(App::t('auth.email')) ?></div>
        <div class="text-sm"><?= App::e($_user['email']) ?></div>
      </div>
    </div>
  </section>

  <!-- Cambiar contraseña -->
  <section class="rounded-lg border border-gray-200 bg-white dark:border-ink-700 dark:bg-ink-900">
    <div class="border-b border-gray-200 px-4 py-3 dark:border-ink-700">
      <h2 class="font-medium"><?= App::e(App::t('profile.password')) ?></h2>
    </div>
    <form method="post" action="/profile/" class="max-w-md space-y-4 px-4 py-4">
      <?php if ($pwOk): ?><div class="rounded-lg border border-success/30 bg-success/10 px-4 py-3 text-sm text-success"><?= App::e(App::t('profile.pw_ok')) ?></div><?php endif; ?>
      <?php if ($pwError): ?><div class="rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger"><?= App::e($pwError) ?></div><?php endif; ?>
      <div>
        <label class="mb-1 block text-sm font-medium"><?= App::e(App::t('profile.pw_current')) ?></label>
        <input type="password" name="current" required class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm dark:border-ink-700 dark:bg-ink-800">
      </div>
      <div>
        <label class="mb-1 block text-sm font-medium"><?= App::e(App::t('profile.pw_new')) ?></label>
        <div class="flex items-center gap-2">
          <input type="password" name="new" required minlength="8" data-pass-input class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm dark:border-ink-700 dark:bg-ink-800">
          <button type="button" data-genpass class="shrink-0 rounded-lg border border-gray-200 px-3 py-2 text-sm hover:bg-gray-50 dark:border-ink-700 dark:hover:bg-ink-800"><?= App::e(App::t('common.generate')) ?></button>
        </div>
      </div>
      <button name="change_password" value="1" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700"><?= App::e(App::t('profile.pw_change')) ?></button>
    </form>
  </section>

  <!-- Aplicaciones conectadas (OAuth) -->
  <section class="rounded-lg border border-gray-200 bg-white dark:border-ink-700 dark:bg-ink-900">
    <div class="border-b border-gray-200 px-4 py-3 dark:border-ink-700">
      <h2 class="font-medium"><?= App::e(App::t('oauth.apps_title')) ?></h2>
    </div>
    <div class="px-4 py-4">
      <p class="mb-3 text-sm text-gray-dark dark:text-gray-light"><?= App::e(App::t('oauth.apps_hint')) ?></p>
      <?php if (!$apiKeys): ?>
        <div class="text-sm text-gray-dark dark:text-gray-light"><?= App::e(App::t('oauth.apps_empty')) ?></div>
      <?php else: ?>
        <div class="divide-y divide-gray-200 dark:divide-ink-700">
          <?php foreach ($apiKeys as $k): ?>
            <div class="flex flex-wrap items-center gap-3 py-3">
              <div class="min-w-0 flex-1">
                <div class="text-sm font-medium"><?= App::e($k['label'] ?: App::t('oauth.manual_key')) ?></div>
                <div class="text-xs text-gray-dark dark:text-gray-light">
                  <?= App::e(App::t('api.created')) ?>: <?= App::e($k['created_at']) ?>
                  <?php if (!empty($k['last_used_at'])): ?> · <?= App::e(App::t('oauth.last_used')) ?>: <?= App::e($k['last_used_at']) ?><?php endif; ?>
                </div>
              </div>
              <form method="post" action="/profile/" onsubmit="return confirm('<?= App::e(App::t('oauth.revoke_confirm')) ?>');">
                <input type="hidden" name="revoke_token" value="<?= (int)$k['id_api_key'] ?>">
                <button class="rounded-lg border border-danger/30 px-3 py-1.5 text-sm text-danger hover:bg-danger/10"><?= App::e(App::t('oauth.revoke')) ?></button>
              </form>
            </div>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </div>
  </section>

  <!-- Idioma + tema -->
  <section class="rounded-lg border border-gray-200 bg-white dark:border-ink-700 dark:bg-ink-900">
    <div class="border-b border-gray-200 px-4 py-3 dark:border-ink-700">
      <h2 class="font-medium"><?= App::e(App::t('profile.language')) ?> · <?= App::e(App::t('profile.theme')) ?></h2>
    </div>
    <div class="flex flex-wrap items-center gap-8 px-4 py-4">
      <div class="flex items-center gap-2">
        <span class="text-sm text-gray-dark dark:text-gray-light"><?= App::e(App::t('lang.label')) ?></span>
        <?php foreach (($_config['locales'] ?? array()) as $lc): $on = ($lc === $lang); ?>
          <a href="/profile/?lang=<?= App::e($lc) ?>"
             class="rounded px-2 py-1 text-xs font-semibold <?= $on
                  ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300'
                  : 'text-gray-dark hover:bg-gray-100 dark:text-gray-light dark:hover:bg-ink-800' ?>">
            <?= strtoupper(App::e($lc)) ?>
          </a>
        <?php endforeach; ?>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-sm text-gray-dark dark:text-gray-light"><?= App::e(App::t('profile.theme')) ?></span>
        <button type="button" data-theme-toggle title="<?= App::e(App::t('theme.toggle')) ?>" aria-label="<?= App::e(App::t('theme.toggle')) ?>"
                class="flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 hover:bg-gray-50 dark:border-ink-700 dark:hover:bg-ink-800">
          <svg data-theme-dark xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"/></svg>
          <svg data-theme-light class="hidden h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
        </button>
      </div>
    </div>
  </section>
</div>
