@extends('layouts.messaging')
@section('title', '個人設定')

@section('content')
<div class="container py-4" style="max-width:820px">
  <h4 class="mb-3"><i class="bi bi-person-gear me-2"></i>個人設定</h4>

  <form method="POST" action="{{ route('profile.avatar.update') }}" enctype="multipart/form-data" class="card shadow-sm mb-4">
    @csrf
    <div class="card-header fw-semibold"><i class="bi bi-person-badge-fill me-1"></i>大頭貼</div>
    <div class="card-body">
      <p class="small text-muted">顯示在訊息功能的對話列表與訊息裡</p>
      <div class="d-flex align-items-center gap-3 flex-wrap">
        @if ($user->avatarUrl())
          <img src="{{ $user->avatarUrl() }}" alt="大頭貼" style="width:64px;height:64px;border-radius:50%;object-fit:cover;">
        @else
          <div style="width:64px;height:64px;border-radius:50%;background:#6c757d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;">
            {{ mb_substr($user->name, 0, 1) }}
          </div>
        @endif
        <input type="file" name="avatar" accept="image/*" class="form-control" style="max-width:280px;" required>
        <button type="submit" class="btn btn-outline-primary">上傳</button>
      </div>
      @error('avatar')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
    </div>
  </form>

  <div class="card shadow-sm" id="devices">
    <div class="card-header fw-semibold"><i class="bi bi-laptop me-1"></i>已連結裝置</div>
    <div class="card-body">
      <p class="small text-muted">
        訊息功能的加密金鑰只存在瀏覽器裡，換瀏覽器/裝置會被當成新裝置，
        要在這裡由現有裝置核准後，新裝置才能讀取歷史加密訊息。
      </p>
      <div class="alert alert-warning small d-none" id="deviceSelfWarning"></div>
      <ul class="list-unstyled mb-0" id="deviceList">
        <li class="text-muted small py-2">載入中…</li>
      </ul>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
// ── 已連結裝置（多裝置連結）──────────────────────────────
// 等 DOMContentLoaded 才能安全拿到 window.Messaging／window.MessagingCrypto，
// 這兩個是 layout 裡另外用 <script src> 載入的，跟訊息主頁同一個理由。
document.addEventListener('DOMContentLoaded', () => {
  const deviceList = document.getElementById('deviceList');
  const cfg = window.MessagingConfig;
  const MC = window.MessagingCrypto;
  const M = window.Messaging;
  if (!deviceList || !cfg || !MC || !M) return;

  function fmtDeviceTime(iso) {
    if (!iso) return '從未使用';
    return new Date(iso).toLocaleString('zh-TW', { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });
  }

  function deviceStatusBadge(status) {
    if (status === 'active') return '<span class="badge bg-success">使用中</span>';
    if (status === 'pending') return '<span class="badge bg-warning text-dark">待核准</span>';
    return '<span class="badge bg-secondary">已撤銷</span>';
  }

  const deviceSelfWarning = document.getElementById('deviceSelfWarning');

  async function loadDevices() {
    // 先確保這台瀏覽器自己也註冊好，才知道「哪一筆是（此裝置）」，
    // 核准新裝置時也才知道自己是誰在核准。
    try { await MC.ensureReady(cfg.routes, cfg.csrfToken); } catch (e) {}
    const myDeviceId = MC.getDeviceId();

    deviceList.innerHTML = '<li class="text-muted small py-2">載入中…</li>';
    let devices;
    try {
      const res = await fetch(cfg.routes.devicesIndex, { headers: { Accept: 'application/json' } });
      devices = await res.json();
    } catch (e) {
      deviceList.innerHTML = '<li class="text-danger small py-2">載入失敗</li>';
      return;
    }

    if (!devices.length) {
      deviceList.innerHTML = '<li class="text-muted small py-2">目前沒有任何裝置</li>';
      return;
    }

    // 核准新裝置一定要用「目前已經是使用中」的裝置來按——如果現在瀏覽
    // 這個頁面的裝置本身是待核准或已撤銷，按核准會被後端拒絕（因為
    // 這台自己都還沒有權限），畫面上卻看起來像是「按了沒反應」。這裡
    // 先偵測出來明確告知，不要讓使用者自己去猜。
    const myDevice = devices.find((d) => d.id === myDeviceId);
    const myDeviceIsActive = myDevice ? myDevice.status === 'active' : false;
    if (myDevice && !myDeviceIsActive) {
      deviceSelfWarning.textContent = myDevice.status === 'pending'
        ? '你目前用來瀏覽這個頁面的裝置本身還是「待核准」狀態，沒有權限核准其他裝置——請改用你另一台已經顯示「使用中」的裝置來核准。'
        : '你目前用來瀏覽這個頁面的裝置本身已經被撤銷，沒有權限核准其他裝置——請改用你另一台已經顯示「使用中」的裝置來核准，或先重新申請這台裝置。';
      deviceSelfWarning.classList.remove('d-none');
    } else {
      deviceSelfWarning.classList.add('d-none');
    }

    deviceList.innerHTML = devices.map((d) => {
      const isMe = d.id === myDeviceId;
      const canRevoke = d.status === 'active' && !isMe;
      const actions = [];
      if (d.status === 'pending') {
        actions.push(`<button type="button" class="btn btn-sm btn-success" data-approve="${d.id}" ${myDeviceIsActive ? '' : 'disabled title="這台裝置本身還沒有核准權限"'}>核准</button>`);
        actions.push(`<button type="button" class="btn btn-sm btn-outline-danger" data-deny="${d.id}">拒絕</button>`);
      }
      if (canRevoke) {
        actions.push(`<button type="button" class="btn btn-sm btn-outline-secondary" data-revoke="${d.id}">撤銷</button>`);
      }
      if (d.status === 'revoked') {
        // 已撤銷的裝置：可以重新申請核准（走一次 pending → 核准流程，
        // 不是直接恢復），或是真的刪除這筆紀錄。
        actions.push(`<button type="button" class="btn btn-sm btn-outline-success" data-reactivate="${d.id}">重新申請</button>`);
        actions.push(`<button type="button" class="btn btn-sm btn-outline-danger" data-delete="${d.id}">刪除</button>`);
      }
      const locationLine = d.location_label ? `<div class="small text-muted">位置：${escapeHtmlDevice(d.location_label)}</div>` : '';
      return `<li class="d-flex align-items-center gap-2 py-2 border-bottom" data-device-row="${d.id}" data-public-key="${d.public_key_jwk ? encodeURIComponent(d.public_key_jwk) : ''}">
        <div class="flex-grow-1" style="min-width:0;">
          <div class="text-truncate">${escapeHtmlDevice(d.device_label || '未命名裝置')}${isMe ? '（此裝置）' : ''} ${deviceStatusBadge(d.status)}</div>
          <div class="small text-muted">最後使用：${fmtDeviceTime(d.last_seen_at)}</div>
          ${locationLine}
        </div>
        <div class="d-flex gap-1 flex-shrink-0">${actions.join('')}</div>
      </li>`;
    }).join('');
  }

  function escapeHtmlDevice(s) {
    const div = document.createElement('div');
    div.textContent = s == null ? '' : s;
    return div.innerHTML;
  }

  deviceList.addEventListener('click', async (e) => {
    const approveBtn = e.target.closest('[data-approve]');
    const denyBtn = e.target.closest('[data-deny]');
    const revokeBtn = e.target.closest('[data-revoke]');
    const reactivateBtn = e.target.closest('[data-reactivate]');
    const deleteBtn = e.target.closest('[data-delete]');

    if (approveBtn) {
      const deviceId = parseInt(approveBtn.dataset.approve, 10);
      const row = approveBtn.closest('[data-device-row]');
      const publicKeyJwk = decodeURIComponent(row.dataset.publicKey || '');
      if (!publicKeyJwk) { alert('這台裝置沒有公鑰資料，無法核准'); return; }
      approveBtn.disabled = true;
      approveBtn.textContent = '核准中…';
      try {
        const conversations = await M.api.listConversations();
        const conversationIds = conversations.map((c) => c.id);
        await MC.approveDevice(cfg.routes, cfg.csrfToken, { id: deviceId, public_key_jwk: publicKeyJwk }, conversationIds);
        await loadDevices();
      } catch (err) {
        console.error('核准裝置失敗', err);
        alert('核准失敗：' + (err?.message || '未知錯誤，請打開瀏覽器主控台查看詳細訊息'));
        approveBtn.disabled = false;
        approveBtn.textContent = '核准';
      }
      return;
    }

    if (denyBtn) {
      if (!confirm('確定要拒絕這台裝置嗎？')) return;
      const deviceId = parseInt(denyBtn.dataset.deny, 10);
      await fetch(cfg.routes.devicesDeny.replace('__DEVICE__', deviceId), {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
      });
      loadDevices();
      return;
    }

    if (revokeBtn) {
      if (!confirm('確定要撤銷這台裝置嗎？撤銷後這台裝置將無法再收發加密訊息。')) return;
      const deviceId = parseInt(revokeBtn.dataset.revoke, 10);
      await fetch(cfg.routes.devicesDestroy.replace('__DEVICE__', deviceId), {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
      });
      loadDevices();
      return;
    }

    if (deleteBtn) {
      if (!confirm('確定要永久刪除這台裝置的紀錄嗎？這個動作無法復原。')) return;
      const deviceId = parseInt(deleteBtn.dataset.delete, 10);
      // 這筆已經是 revoked 狀態，後端再收到一次 destroy 就會真的刪除。
      await fetch(cfg.routes.devicesDestroy.replace('__DEVICE__', deviceId), {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
      });
      loadDevices();
      return;
    }

    if (reactivateBtn) {
      if (!confirm('要重新申請核准這台裝置嗎？需要你其他裝置再次核准後才能使用。')) return;
      const deviceId = parseInt(reactivateBtn.dataset.reactivate, 10);
      await fetch(cfg.routes.devicesReactivate.replace('__DEVICE__', deviceId), {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
      });
      loadDevices();
      return;
    }
  });

  loadDevices();
});
</script>
@endpush