@extends('layouts.app')
@section('title', $user->name . ' 的個人主頁')

@push('styles')
<style>
.uprofile-page { max-width: 640px; margin: 0 auto; padding: 32px 16px 60px; }

.uprofile-header {
  background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  border-radius: 16px;
  padding: 28px 24px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,99,235,.35);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.uprofile-avatar-wrap { position: relative; flex-shrink: 0; }
.uprofile-avatar, .uprofile-avatar-fallback {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
}
.uprofile-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.45);
  font-size: 2rem; font-weight: 700;
}
.uprofile-avatar-wrap .status-dot { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; border-width: 3px; }
.uprofile-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.uprofile-status { font-size: .8rem; opacity: .9; margin-bottom: 6px; }
.uprofile-meta { font-size: .82rem; opacity: .85; line-height: 1.6; }

.uprofile-section-title { font-size: .95rem; font-weight: 700; color: #374151; margin: 28px 0 12px; }

.uprofile-upload {
  background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.uprofile-card {
  background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.uprofile-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.uprofile-card-head img, .uprofile-card-head .uprofile-mini-fallback {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
}
.uprofile-mini-fallback {
  display: flex; align-items: center; justify-content: center;
  background: #6c757d; color: #fff; font-size: .8rem; font-weight: 700;
}
.uprofile-card-time { font-size: .72rem; color: #9ca3af; }
.uprofile-caption { font-size: .88rem; margin-bottom: 10px; white-space: pre-wrap; }

.uprofile-media-grid {
  display: grid; gap: 6px; margin-bottom: 10px; border-radius: 8px; overflow: hidden;
}
.uprofile-media-grid[data-count="1"] { grid-template-columns: 1fr; }
.uprofile-media-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.uprofile-media-grid:not([data-count="1"]):not([data-count="2"]) { grid-template-columns: repeat(3, 1fr); }
.uprofile-media-item { position: relative; aspect-ratio: 1 / 1; background: #000; }
.uprofile-media-grid[data-count="1"] .uprofile-media-item { aspect-ratio: 4 / 3; }
.uprofile-media-item img, .uprofile-media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.uprofile-media-item .bi-play-circle-fill {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: 1.8rem; opacity: .9; pointer-events: none;
}

.uprofile-card-actions { display: flex; align-items: center; gap: 14px; padding-top: 6px; border-top: 1px solid #f1f3f5; }
.uprofile-like-btn { border: none; background: none; padding: 4px 0; font-size: .85rem; color: #6b7280; cursor: pointer; }
.uprofile-like-btn.liked { color: #e11d48; }
.uprofile-post-delete { border: none; background: none; font-size: .8rem; color: #9ca3af; cursor: pointer; margin-left: auto; }

.uprofile-comments { margin-top: 10px; }
.uprofile-comment { display: flex; gap: 8px; font-size: .82rem; margin-bottom: 6px; align-items: flex-start; }
.uprofile-comment img, .uprofile-comment .uprofile-mini-fallback { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.uprofile-comment-body { flex-grow: 1; }
.uprofile-comment-delete { border: none; background: none; color: #9ca3af; font-size: .75rem; cursor: pointer; }
.uprofile-comment-form { display: flex; gap: 6px; margin-top: 8px; }
.uprofile-comment-form input { flex-grow: 1; font-size: .82rem; }

.uprofile-empty { color: #9ca3af; font-size: .85rem; text-align: center; padding: 30px 0; }
</style>
@endpush

@section('content')
<div class="uprofile-page">

  <div class="uprofile-header">
    <div class="uprofile-avatar-wrap">
      @if ($user->avatarUrl())
        <img src="{{ $user->avatarUrl() }}" alt="" class="uprofile-avatar">
      @else
        <div class="uprofile-avatar-fallback">{{ mb_substr($user->name, 0, 1) }}</div>
      @endif
      <span class="status-dot" id="uprofileStatusDot"></span>
    </div>
    <div>
      <div class="uprofile-name">{{ $user->name }}</div>
      <div class="uprofile-status" id="uprofileStatusLabel">—</div>
      <div class="uprofile-meta">
        <div><i class="bi bi-envelope"></i> {{ $user->email }}</div>
        @if ($user->department || $user->position)
          <div><i class="bi bi-briefcase"></i> {{ trim(($user->department ?? '') . ' ' . ($user->position ?? '')) }}</div>
        @endif
        @if ($user->phone)
          <div><i class="bi bi-phone"></i> <a href="tel:{{ $user->phone }}" class="text-reset text-decoration-none">{{ $user->phone }}</a></div>
        @endif
        @if ($user->birthday)
          <div><i class="bi bi-cake2"></i> {{ $user->birthday->format('m/d') }}</div>
        @endif
        @if ($user->seat)
          <div><i class="bi bi-geo-alt"></i> 座位 {{ $user->seat }}</div>
        @endif
      </div>
    </div>
  </div>

  <div class="uprofile-section-title"><i class="bi bi-collection-play"></i> 動態</div>

  @if ($isOwn)
    <div class="uprofile-upload">
      <form method="POST" action="{{ route('profile.posts.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="mb-2">
          <input type="file" name="media[]" accept="image/*,video/*" class="form-control form-control-sm" multiple required>
        </div>
        <div class="d-flex gap-2">
          <input type="text" name="caption" maxlength="500" class="form-control form-control-sm" placeholder="說點什麼（選填）">
          <button type="submit" class="btn btn-sm btn-primary flex-shrink-0">發布動態</button>
        </div>
      </form>
      @error('media')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
      @foreach ((array) $errors->get('media.*') as $msgs)
        @foreach ($msgs as $m)<div class="text-danger small mt-1">{{ $m }}</div>@endforeach
      @endforeach
    </div>
  @endif

  @if ($posts->isEmpty())
    <div class="uprofile-empty">還沒有任何動態</div>
  @else
    @foreach ($posts as $post)
      @php $canManagePost = $isOwn || $me->isAdmin(); @endphp
      <div class="uprofile-card" data-post-id="{{ $post->id }}">
        <div class="uprofile-card-head">
          @if ($post->user?->avatarUrl())
            <img src="{{ $post->user->avatarUrl() }}" alt="">
          @else
            <div class="uprofile-mini-fallback">{{ mb_substr($post->user->name ?? '?', 0, 1) }}</div>
          @endif
          <div>
            <div class="fw-semibold small">{{ $post->user->name ?? '' }}</div>
            <div class="uprofile-card-time">{{ $post->created_at->format('Y-m-d H:i') }}</div>
          </div>
          @if ($canManagePost)
            <form method="POST" action="{{ route('profile.posts.destroy', $post) }}" onsubmit="return confirm('確定要刪除這則動態嗎？');" class="ms-auto">
              @csrf
              @method('DELETE')
              <button type="submit" class="uprofile-post-delete" title="刪除"><i class="bi bi-trash"></i></button>
            </form>
          @endif
        </div>

        @if ($post->caption)
          <div class="uprofile-caption">{{ $post->caption }}</div>
        @endif

        @if ($post->media->isNotEmpty())
          <div class="uprofile-media-grid" data-count="{{ min($post->media->count(), 3) }}">
            @foreach ($post->media as $media)
              <div class="uprofile-media-item">
                @if ($media->type === 'video')
                  <video src="{{ $media->url() }}" preload="metadata" muted controls></video>
                @else
                  <img src="{{ $media->url() }}" alt="" loading="lazy">
                @endif
              </div>
            @endforeach
          </div>
        @endif

        <div class="uprofile-card-actions">
          <button type="button" class="uprofile-like-btn {{ $post->isLikedBy($me) ? 'liked' : '' }}" data-action="toggle-like">
            <i class="bi {{ $post->isLikedBy($me) ? 'bi-heart-fill' : 'bi-heart' }}"></i>
            <span class="uprofile-like-count">{{ $post->likes->count() }}</span>
          </button>
          <span class="small text-muted"><i class="bi bi-chat"></i> <span class="uprofile-comment-count">{{ $post->comments->count() }}</span></span>
        </div>

        <div class="uprofile-comments">
          @foreach ($post->comments as $comment)
            <div class="uprofile-comment" data-comment-id="{{ $comment->id }}">
              @if ($comment->user?->avatarUrl())
                <img src="{{ $comment->user->avatarUrl() }}" alt="">
              @else
                <div class="uprofile-mini-fallback">{{ mb_substr($comment->user->name ?? '?', 0, 1) }}</div>
              @endif
              <div class="uprofile-comment-body">
                <span class="fw-semibold">{{ $comment->user->name ?? '' }}</span> {{ $comment->body }}
              </div>
              @if ($comment->user_id === $me->id || $me->isAdmin())
                <button type="button" class="uprofile-comment-delete" data-action="delete-comment" title="刪除留言"><i class="bi bi-x"></i></button>
              @endif
            </div>
          @endforeach
        </div>

        <form class="uprofile-comment-form" data-action="add-comment">
          <input type="text" name="body" maxlength="1000" class="form-control form-control-sm" placeholder="留言…" required>
          <button type="submit" class="btn btn-sm btn-outline-secondary">送出</button>
        </form>
      </div>
    @endforeach
    <div class="mt-3">{{ $posts->links() }}</div>
  @endif

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const M = window.Messaging;
  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
  const meId = {{ $me->id }};
  const meIsAdmin = {{ $me->isAdmin() ? 'true' : 'false' }};

  if (M) {
    const dot = document.getElementById('uprofileStatusDot');
    const label = document.getElementById('uprofileStatusLabel');
    const labels = { online: '上線', idle: '閒置', dnd: '勿擾', offline: '離線' };
    function refreshPresence() {
      const status = M.presence.getStatus({{ $user->id }});
      dot.className = 'status-dot status-' + status;
      label.textContent = labels[status] || '離線';
    }
    refreshPresence();
    M.presence.onChange(refreshPresence);
  }

  function escapeHtml(s) {
    return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
  }

  document.querySelectorAll('.uprofile-card').forEach((card) => {
    const postId = card.dataset.postId;

    card.querySelector('[data-action="toggle-like"]').addEventListener('click', async (e) => {
      const btn = e.currentTarget;
      try {
        const res = await fetch(`/profile/posts/${postId}/like`, {
          method: 'POST',
          headers: { 'X-CSRF-TOKEN': csrfToken, Accept: 'application/json' },
        });
        if (!res.ok) throw new Error();
        const data = await res.json();
        btn.classList.toggle('liked', data.liked);
        btn.querySelector('i').className = 'bi ' + (data.liked ? 'bi-heart-fill' : 'bi-heart');
        card.querySelector('.uprofile-like-count').textContent = data.likes_count;
      } catch (err) {
        alert('操作失敗，請稍後再試');
      }
    });

    card.querySelectorAll('[data-action="delete-comment"]').forEach((btn) => {
      btn.addEventListener('click', async (e) => {
        if (!confirm('確定要刪除這則留言嗎？')) return;
        const row = e.currentTarget.closest('[data-comment-id]');
        try {
          const res = await fetch(`/profile/posts/comments/${row.dataset.commentId}`, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': csrfToken, Accept: 'application/json' },
          });
          if (!res.ok) throw new Error();
          row.remove();
          const countEl = card.querySelector('.uprofile-comment-count');
          countEl.textContent = Math.max(0, parseInt(countEl.textContent, 10) - 1);
        } catch (err) {
          alert('刪除失敗，請稍後再試');
        }
      });
    });

    card.querySelector('[data-action="add-comment"]').addEventListener('submit', async (e) => {
      e.preventDefault();
      const form = e.currentTarget;
      const input = form.querySelector('input[name="body"]');
      const body = input.value.trim();
      if (!body) return;
      try {
        const res = await fetch(`/profile/posts/${postId}/comments`, {
          method: 'POST',
          headers: { 'X-CSRF-TOKEN': csrfToken, Accept: 'application/json', 'Content-Type': 'application/json' },
          body: JSON.stringify({ body }),
        });
        if (!res.ok) throw new Error();
        const c = await res.json();
        const canDelete = c.user_id === meId || meIsAdmin;
        const list = card.querySelector('.uprofile-comments');
        list.insertAdjacentHTML('beforeend', `
          <div class="uprofile-comment" data-comment-id="${c.id}">
            ${c.user_avatar_url ? `<img src="${escapeHtml(c.user_avatar_url)}" alt="">` : `<div class="uprofile-mini-fallback">${escapeHtml((c.user_name || '?').charAt(0))}</div>`}
            <div class="uprofile-comment-body"><span class="fw-semibold">${escapeHtml(c.user_name)}</span> ${escapeHtml(c.body)}</div>
            ${canDelete ? '<button type="button" class="uprofile-comment-delete" data-action="delete-comment" title="刪除留言"><i class="bi bi-x"></i></button>' : ''}
          </div>
        `);
        if (canDelete) {
          list.lastElementChild.querySelector('[data-action="delete-comment"]').addEventListener('click', async (e2) => {
            if (!confirm('確定要刪除這則留言嗎？')) return;
            const row = e2.currentTarget.closest('[data-comment-id]');
            const res2 = await fetch(`/profile/posts/comments/${row.dataset.commentId}`, {
              method: 'DELETE',
              headers: { 'X-CSRF-TOKEN': csrfToken, Accept: 'application/json' },
            });
            if (res2.ok) {
              row.remove();
              const countEl = card.querySelector('.uprofile-comment-count');
              countEl.textContent = Math.max(0, parseInt(countEl.textContent, 10) - 1);
            }
          });
        }
        const countEl = card.querySelector('.uprofile-comment-count');
        countEl.textContent = parseInt(countEl.textContent, 10) + 1;
        input.value = '';
      } catch (err) {
        alert('留言失敗，請稍後再試');
      }
    });
  });
});
</script>
@endpush