@extends('layouts.admin')

@section('title', "User Profile: {$user->name}")
@section('page-title', "User Account: {$user->name}")

@section('content')
<div style="margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
  <div>
    <a href="{{ route('admin.users.index') }}" class="btn btn-outline btn-sm" style="margin-bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem;">
      <i class="fas fa-arrow-left"></i> Back to User Registry
    </a>
    <h2 style="font-size: 1.4rem; font-family: var(--font-heading); color: var(--text-heading); margin: 0;">
      {{ $user->name }}
      @if($user->registration_id)
        <code style="font-size: 0.95rem; color: var(--accent); margin-left: 0.5rem;">#{{ $user->registration_id }}</code>
      @endif
    </h2>
  </div>

  <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
    <!-- Send Direct Email -->
    <a href="{{ route('admin.mail-centre.create', ['user_id' => $user->id]) }}" class="btn btn-primary btn-sm" style="display: inline-flex; align-items: center; gap: 0.4rem;">
      <i class="fas fa-paper-plane"></i> Send Direct Email
    </a>

    <!-- Force Password Reset -->
    @if(Auth::id() !== $user->id)
      <form method="POST" action="{{ route('admin.users.force-password-reset', $user->id) }}" data-ajax="true" style="display: inline;"
            onsubmit="return confirm('Generate and email a temporary password for {{ $user->email }}?');">
        @csrf
        <button type="submit" class="btn btn-outline btn-sm" style="color: #d97706; border-color: rgba(245, 158, 11, 0.4); display: inline-flex; align-items: center; gap: 0.4rem;">
          <i class="fas fa-key"></i> Force Password Reset
        </button>
      </form>
    @endif
  </div>
</div>

@if (session('temporary_password'))
  <div style="background: rgba(16, 185, 129, 0.12); border-left: 4px solid var(--success); padding: 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
      <div>
        <strong style="color: var(--success); font-size: 1.05rem; display: block; margin-bottom: 0.25rem;">
          <i class="fas fa-check-circle"></i> Temporary Password Generated
        </strong>
        <span style="color: var(--text-body); font-size: 0.9rem;">
          The user has been flagged with mandatory password change upon login. Temporary credential:
        </span>
      </div>
      <div style="display: flex; align-items: center; gap: 0.5rem; background: var(--bg-surface); padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-light);">
        <code style="font-size: 1.15rem; font-weight: 700; color: var(--accent); letter-spacing: 1px;">{{ session('temporary_password') }}</code>
        <button type="button" onclick="navigator.clipboard.writeText('{{ session('temporary_password') }}'); alert('Copied temporary password!');"
                class="btn btn-outline btn-sm" style="padding: 0.2rem 0.6rem; font-size: 0.8rem;">
          <i class="fas fa-copy"></i> Copy
        </button>
      </div>
    </div>
  </div>
@endif

<div style="display: grid; grid-template-columns: 360px 1fr; gap: 1.5rem; align-items: start;">

  <!-- Left Column: User Overview & Status Control -->
  <div style="display: flex; flex-direction: column; gap: 1.5rem;">

    <!-- Account Details Card -->
    <div class="admin-card">
      <div style="text-align: center; margin-bottom: 1.25rem;">
        <div style="width: 72px; height: 72px; border-radius: 50%; background: var(--bg-surface); border: 2px solid var(--border-light); display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; color: var(--accent); margin-bottom: 0.75rem;">
          {{ strtoupper(substr($user->name, 0, 1)) }}
        </div>
        <h3 style="font-size: 1.15rem; margin: 0; color: var(--text-heading);">{{ $user->name }}</h3>
        <span style="font-size: 0.85rem; color: var(--text-light);">{{ $user->email }}</span>
      </div>

      <div style="border-top: 1px solid var(--border-light); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.88rem;">
        <div style="display: flex; justify-content: space-between;">
          <span style="color: var(--text-light);">Role:</span>
          <span style="font-weight: 600; text-transform: uppercase;">{{ str_replace('_', ' ', $user->role) }}</span>
        </div>

        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="color: var(--text-light);">Account Status:</span>
          @if($user->status === 'active')
            <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600;">Active</span>
          @elseif($user->status === 'suspended')
            <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; font-weight: 600;">Suspended</span>
          @else
            <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #d97706; font-weight: 600;">{{ ucfirst(str_replace('_', ' ', $user->status)) }}</span>
          @endif
        </div>

        @if($user->status_reason)
          <div style="padding: 0.6rem; background: var(--bg-surface); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--text-light);">
            <strong>Reason:</strong> {{ $user->status_reason }}
          </div>
        @endif

        <div style="display: flex; justify-content: space-between;">
          <span style="color: var(--text-light);">Phone:</span>
          <span style="font-weight: 500;">{{ $user->phone ?: 'Not provided' }}</span>
        </div>

        <div style="display: flex; justify-content: space-between;">
          <span style="color: var(--text-light);">District:</span>
          <span style="font-weight: 500;">{{ $user->assigned_district ?: ($user->jobseekerProfile?->district ?: ($user->employerProfile?->district ?: 'Not assigned')) }}</span>
        </div>

        <div style="display: flex; justify-content: space-between;">
          <span style="color: var(--text-light);">Email Verified:</span>
          <span style="font-weight: 500;">{{ $user->email_verified_at ? $user->email_verified_at->format('d M Y') : 'Pending' }}</span>
        </div>

        <div style="display: flex; justify-content: space-between;">
          <span style="color: var(--text-light);">Must Change Password:</span>
          <span style="font-weight: 600; color: {{ $user->must_change_password ? '#d97706' : 'var(--success)' }};">
            {{ $user->must_change_password ? 'YES (Forced Reset Active)' : 'NO' }}
          </span>
        </div>

        <div style="display: flex; justify-content: space-between;">
          <span style="color: var(--text-light);">Registered On:</span>
          <span style="font-weight: 500;">{{ $user->created_at ? $user->created_at->format('d M Y, h:i A') : '—' }}</span>
        </div>
      </div>
    </div>

    <!-- Status Modification Card -->
    @if(Auth::id() !== $user->id)
      <div class="admin-card">
        <h4 style="font-size: 1rem; margin-top: 0; margin-bottom: 0.75rem; color: var(--text-heading); display: flex; align-items: center; gap: 0.4rem;">
          <i class="fas fa-user-edit"></i> Modify Account Status
        </h4>

        <form method="POST" action="{{ route('admin.users.status', $user->id) }}" data-ajax="true">
          @csrf

          <div style="margin-bottom: 0.85rem;">
            <label style="display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-heading);">Select Status</label>
            <select name="status" class="filter-select" style="width: 100%; height: 38px;">
              <option value="active" {{ $user->status === 'active' ? 'selected' : '' }}>Active</option>
              <option value="suspended" {{ $user->status === 'suspended' ? 'selected' : '' }}>Suspended</option>
              <option value="pending_verification" {{ $user->status === 'pending_verification' ? 'selected' : '' }}>Pending Verification</option>
            </select>
          </div>

          <div style="margin-bottom: 1rem;">
            <label style="display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-heading);">Audit Reason / Note</label>
            <input type="text" name="reason" value="{{ old('reason', $user->status_reason) }}" placeholder="e.g. Document discrepancy or statutory request"
                   class="filter-select" style="width: 100%; height: 38px; font-size: 0.85rem;">
          </div>

          <button type="submit" class="btn btn-primary btn-sm" style="width: 100%; height: 38px; justify-content: center;">
            <i class="fas fa-save"></i> Save Status Change
          </button>
        </form>
      </div>
    @endif

    <!-- Linked Role Snapshot -->
    @if($user->jobseekerProfile)
      <div class="admin-card">
        <h4 style="font-size: 1rem; margin-top: 0; margin-bottom: 0.75rem; color: var(--text-heading); display: flex; align-items: center; gap: 0.4rem;">
          <i class="fas fa-id-card"></i> Candidate Profile Snapshot
        </h4>
        <div style="font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.5rem;">
          <div><strong>Aadhaar KYC:</strong> {{ $user->jobseekerProfile->is_aadhaar_verified ? 'Verified' : 'Pending' }}</div>
          <div><strong>Profile Completion:</strong> {{ $user->profile_completion }}%</div>
          <div><strong>Searchable:</strong> {{ $user->jobseekerProfile->is_searchable ? 'Yes' : 'No' }}</div>
          <div><strong>Mask Contact:</strong> {{ $user->jobseekerProfile->hide_contact_info ? 'Yes (Protected)' : 'No' }}</div>
          <div style="margin-top: 0.5rem;">
            <a href="{{ route('admin.jobseekers.show', $user->id) }}" class="btn btn-outline btn-sm" style="width: 100%; justify-content: center;">
              Full Candidate Dossier &rarr;
            </a>
          </div>
        </div>
      </div>
    @elseif($user->employerProfile)
      <div class="admin-card">
        <h4 style="font-size: 1rem; margin-top: 0; margin-bottom: 0.75rem; color: var(--text-heading); display: flex; align-items: center; gap: 0.4rem;">
          <i class="fas fa-building"></i> Employer Profile Snapshot
        </h4>
        <div style="font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.5rem;">
          <div><strong>Company:</strong> {{ $user->employerProfile->company_name }}</div>
          <div><strong>GSTIN:</strong> <code>{{ $user->employerProfile->gstin ?: 'N/A' }}</code></div>
          <div><strong>PAN:</strong> <code>{{ $user->employerProfile->pan_number ?: 'N/A' }}</code></div>
          <div><strong>Verification:</strong> {{ ucfirst($user->employerProfile->verification_status) }}</div>
          <div style="margin-top: 0.5rem;">
            <a href="{{ route('admin.employers.show', $user->employerProfile->id) }}" class="btn btn-outline btn-sm" style="width: 100%; justify-content: center;">
              Full Statutory Verification &rarr;
            </a>
          </div>
        </div>
      </div>
    @endif

  </div>

  <!-- Right Column: Inline User Activity Log -->
  <div class="admin-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
      <div>
        <h3 style="font-size: 1.15rem; font-family: var(--font-heading); color: var(--text-heading); margin: 0; display: flex; align-items: center; gap: 0.5rem;">
          <i class="fas fa-history" style="color: var(--accent);"></i> Inline User Audit Trail & Activity Log
        </h3>
        <p style="color: var(--text-light); font-size: 0.82rem; margin: 0.25rem 0 0 0;">
          All administrative, authentication, and statutory actions performed by or targeting this account.
        </p>
      </div>
      <a href="{{ route('admin.activity-logs.index', ['user_id' => $user->id]) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem;">
        Full System Log
      </a>
    </div>

    <div style="overflow-x: auto;">
      <table class="table" style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">
        <thead>
          <tr style="border-bottom: 2px solid var(--border-light); text-align: left;">
            <th style="padding: 0.65rem 0.5rem; text-transform: uppercase; color: var(--text-light); font-size: 0.75rem;">Timestamp</th>
            <th style="padding: 0.65rem 0.5rem; text-transform: uppercase; color: var(--text-light); font-size: 0.75rem;">Action</th>
            <th style="padding: 0.65rem 0.5rem; text-transform: uppercase; color: var(--text-light); font-size: 0.75rem;">Description</th>
            <th style="padding: 0.65rem 0.5rem; text-transform: uppercase; color: var(--text-light); font-size: 0.75rem;">Actor</th>
            <th style="padding: 0.65rem 0.5rem; text-transform: uppercase; color: var(--text-light); font-size: 0.75rem;">IP Address</th>
          </tr>
        </thead>
        <tbody>
          @forelse($activityLogs as $log)
            <tr style="border-bottom: 1px solid var(--border-light);">
              <td style="padding: 0.65rem 0.5rem; white-space: nowrap; color: var(--text-light);">
                {{ $log->created_at ? $log->created_at->format('d M Y, H:i') : '—' }}
              </td>
              <td style="padding: 0.65rem 0.5rem; white-space: nowrap;">
                <span class="badge" style="background: var(--bg-surface); border: 1px solid var(--border-light); color: var(--accent); font-size: 0.75rem; padding: 0.15rem 0.45rem; border-radius: var(--radius-sm);">
                  {{ $log->action }}
                </span>
              </td>
              <td style="padding: 0.65rem 0.5rem; color: var(--text-body);">
                {{ $log->description }}
              </td>
              <td style="padding: 0.65rem 0.5rem; white-space: nowrap; color: var(--text-light);">
                {{ $log->user ? $log->user->name : 'System' }}
              </td>
              <td style="padding: 0.65rem 0.5rem; white-space: nowrap; font-family: monospace; color: var(--text-light); font-size: 0.8rem;">
                {{ $log->ip_address ?: '—' }}
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="5" style="padding: 2.5rem; text-align: center; color: var(--text-light);">
                <i class="fas fa-info-circle" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block; opacity: 0.5;"></i>
                No activity logs recorded for this user yet.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <!-- Activity Log Pagination -->
    @if($activityLogs->hasPages())
      <div style="margin-top: 1rem; display: flex; justify-content: center;">
        {{ $activityLogs->links() }}
      </div>
    @endif

  </div>

</div>
@endsection