@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Header Banner -->
  <header class="page-header" style="padding: 3rem 0 2rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);">
    <div class="container">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem;" class="reveal">
        <div>
          <nav class="breadcrumbs" aria-label="Breadcrumb" style="margin-bottom: 0.5rem;">
            <a href="{{ route('home') }}">Home</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <a href="{{ route('jobseeker.dashboard') }}">Candidate Portal</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <a href="{{ route('jobseeker.applications.index') }}">Applications</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <span>#ZH-APP-{{ $application->id }}</span>
          </nav>
          <h1 style="font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.35rem;">
            Recruitment Status Timeline
          </h1>
          <p style="color: var(--text-light); font-size: 0.95rem; margin: 0;">
            Application Reference: <strong style="color: var(--accent);">#ZH-APP-{{ $application->id }}</strong>
            <span style="margin: 0 0.5rem; color: var(--border-light);">|</span>
            Role: <strong>{{ $application->applied_role }}</strong>
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center;">
          @if($application->canWithdraw())
            <button type="button" class="btn btn-outline" style="color: #ef4444; border-color: rgba(239, 68, 68, 0.3);" onclick="document.getElementById('withdrawModal').style.display='flex'">
              <i class="fas fa-times-circle"></i> Withdraw Application
            </button>
          @endif
          <a href="{{ route('jobseeker.applications.index') }}" class="btn btn-outline">
            <i class="fas fa-arrow-left"></i> Back to Applications
          </a>
        </div>
      </div>
    </div>
  </header>

  <!-- Status Timeline & Details -->
  <section class="section" style="padding: 2.5rem 0;">
    <div class="container">
      
      @if(session('success'))
        <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); color: var(--success); padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
          <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
      @endif

      @if(session('error'))
        <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
          <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
      @endif

      @php
        $statusOrder = [
          'applied' => 1,
          'viewed' => 2,
          'shortlisted' => 3,
          'interview_scheduled' => 4,
          'offered' => 5,
          'joined' => 6,
        ];
        $currentStep = $statusOrder[$application->status] ?? ($application->status === 'rejected' || $application->status === 'withdrawn' ? 5 : 1);
        $isTerminalNegative = in_array($application->status, ['rejected', 'withdrawn']);
      @endphp

      <!-- Visual Milestone Stepper Card -->
      <div class="card reveal" style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 2rem; margin-bottom: 2.5rem;">
        <h3 style="font-size: 1.2rem; margin-bottom: 1.5rem; color: var(--text-heading); display: flex; align-items: center; justify-content: space-between;">
          <span><i class="fas fa-tasks" style="color: var(--accent); margin-right: 0.5rem;"></i> Recruitment Milestone Progress</span>
          <span class="badge {{ $application->statusBadgeClass() }}" style="font-size: 0.85rem; padding: 0.4rem 0.9rem;">
            Current: {{ $application->statusLabel() }}
          </span>
        </h3>

        <!-- Responsive Stepper Bar -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; position: relative;">
          
          <!-- Step 1: Applied -->
          <div style="text-align: center;">
            <div style="width: 44px; height: 44px; border-radius: 50%; background: var(--success); color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);">
              <i class="fas fa-check"></i>
            </div>
            <strong style="display: block; font-size: 0.88rem; color: var(--text-heading);">Applied</strong>
            <span style="font-size: 0.75rem; color: var(--text-light);">{{ $application->created_at->format('d M Y') }}</span>
          </div>

          <!-- Step 2: Under Review / Viewed -->
          <div style="text-align: center;">
            <div style="width: 44px; height: 44px; border-radius: 50%; background: {{ $currentStep >= 2 ? 'var(--success)' : 'var(--bg-card)' }}; color: {{ $currentStep >= 2 ? 'white' : 'var(--text-light)' }}; border: 2px solid {{ $currentStep >= 2 ? 'var(--success)' : 'var(--border-light)' }}; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; font-size: 1.1rem;">
              <i class="fas fa-eye"></i>
            </div>
            <strong style="display: block; font-size: 0.88rem; color: {{ $currentStep >= 2 ? 'var(--text-heading)' : 'var(--text-light)' }};">Review</strong>
            <span style="font-size: 0.75rem; color: var(--text-light);">Profile Screened</span>
          </div>

          <!-- Step 3: Shortlisted -->
          <div style="text-align: center;">
            <div style="width: 44px; height: 44px; border-radius: 50%; background: {{ $currentStep >= 3 ? 'var(--success)' : 'var(--bg-card)' }}; color: {{ $currentStep >= 3 ? 'white' : 'var(--text-light)' }}; border: 2px solid {{ $currentStep >= 3 ? 'var(--success)' : 'var(--border-light)' }}; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; font-size: 1.1rem;">
              <i class="fas fa-user-check"></i>
            </div>
            <strong style="display: block; font-size: 0.88rem; color: {{ $currentStep >= 3 ? 'var(--text-heading)' : 'var(--text-light)' }};">Shortlisted</strong>
            <span style="font-size: 0.75rem; color: var(--text-light);">Selected for Round</span>
          </div>

          <!-- Step 4: Interview -->
          <div style="text-align: center;">
            <div style="width: 44px; height: 44px; border-radius: 50%; background: {{ $currentStep >= 4 ? 'var(--accent)' : 'var(--bg-card)' }}; color: {{ $currentStep >= 4 ? 'white' : 'var(--text-light)' }}; border: 2px solid {{ $currentStep >= 4 ? 'var(--accent)' : 'var(--border-light)' }}; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; font-size: 1.1rem;">
              <i class="fas fa-calendar-alt"></i>
            </div>
            <strong style="display: block; font-size: 0.88rem; color: {{ $currentStep >= 4 ? 'var(--text-heading)' : 'var(--text-light)' }};">Interview</strong>
            <span style="font-size: 0.75rem; color: var(--text-light);">
              {{ $application->interview_scheduled_at ? $application->interview_scheduled_at->format('d M') : 'Pending' }}
            </span>
          </div>

          <!-- Step 5: Final Decision -->
          <div style="text-align: center;">
            <div style="width: 44px; height: 44px; border-radius: 50%; background: {{ $application->status === 'offered' || $application->status === 'joined' ? 'var(--success)' : ($isTerminalNegative ? '#ef4444' : 'var(--bg-card)') }}; color: {{ in_array($application->status, ['offered', 'joined', 'rejected', 'withdrawn']) ? 'white' : 'var(--text-light)' }}; border: 2px solid {{ in_array($application->status, ['offered', 'joined', 'rejected', 'withdrawn']) ? 'transparent' : 'var(--border-light)' }}; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; font-size: 1.1rem;">
              @if($application->status === 'offered' || $application->status === 'joined')
                <i class="fas fa-trophy"></i>
              @elseif($isTerminalNegative)
                <i class="fas fa-times"></i>
              @else
                <i class="fas fa-flag-checkered"></i>
              @endif
            </div>
            <strong style="display: block; font-size: 0.88rem; color: var(--text-heading);">
              {{ $isTerminalNegative ? ucfirst($application->status) : ($application->status === 'joined' ? 'Joined' : 'Offer') }}
            </strong>
            <span style="font-size: 0.75rem; color: var(--text-light);">Final Milestone</span>
          </div>

        </div>
      </div>

      <!-- Interview Invitation Notice Banner (if scheduled) -->
      @if($application->status === 'interview_scheduled' && $application->interview_scheduled_at)
        <div class="reveal" style="background: rgba(0, 102, 255, 0.08); border: 1px solid var(--accent); border-radius: var(--radius-xl); padding: 1.75rem; margin-bottom: 2.5rem;">
          <div style="display: flex; gap: 1.25rem; align-items: flex-start;">
            <div style="width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;">
              <i class="fas fa-calendar-check"></i>
            </div>
            <div>
              <h4 style="font-size: 1.15rem; font-weight: 700; color: var(--text-heading); margin-bottom: 0.4rem;">
                Interview Appointment Scheduled!
              </h4>
              <p style="font-size: 0.95rem; color: var(--text-body); margin-bottom: 0.75rem;">
                The employer has invited you for a recruitment interview round. Please make note of the appointment schedule:
              </p>
              <div style="display: flex; flex-wrap: wrap; gap: 2rem; font-size: 0.9rem;">
                <div>
                  <span style="color: var(--text-light); display: block;">Date &amp; Time:</span>
                  <strong style="color: var(--accent); font-size: 1.05rem;">
                    {{ $application->interview_scheduled_at->format('l, d F Y - h:i A') }}
                  </strong>
                </div>
                <div>
                  <span style="color: var(--text-light); display: block;">Venue / Video Link:</span>
                  <strong style="color: var(--text-heading);">
                    {{ $application->interview_location ?: 'Online Video Meeting (Link will be dispatched via email)' }}
                  </strong>
                </div>
              </div>
              @if($application->interview_notes)
                <div style="margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-light); font-size: 0.88rem; color: var(--text-muted);">
                  <strong>Special Instructions:</strong> {{ $application->interview_notes }}
                </div>
              @endif
            </div>
          </div>
        </div>
      @endif

      <!-- Grid: Left Milestone History Table, Right Job Snapshot -->
      <div class="hero-grid" style="align-items: flex-start; gap: 3rem;">
        
        <!-- Left: Full Audit Log / Milestone History -->
        <div>
          <h3 style="font-size: 1.3rem; margin-bottom: 1.25rem; color: var(--text-heading);">
            <i class="fas fa-history" style="color: var(--accent); margin-right: 0.4rem;"></i> Status Audit Log
          </h3>

          <div style="position: relative; padding-left: 1.5rem; border-left: 2px solid var(--border-light);">
            @foreach($application->statusHistories as $history)
              <div style="position: relative; margin-bottom: 1.75rem;" class="reveal">
                <!-- Round indicator on vertical line -->
                <div style="position: absolute; left: -1.95rem; top: 0.2rem; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface);"></div>
                
                <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem;">
                  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.4rem; flex-wrap: wrap; gap: 0.5rem;">
                    <strong style="font-size: 0.95rem; color: var(--text-heading);">
                      {{ ucfirst(str_replace('_', ' ', $history->to_status)) }}
                    </strong>
                    <span style="font-size: 0.8rem; color: var(--text-light);">
                      {{ $history->created_at->format('d M Y, h:i A') }}
                    </span>
                  </div>

                  @if($history->remarks)
                    <p style="font-size: 0.88rem; color: var(--text-muted); margin: 0.25rem 0 0 0;">
                      {{ $history->remarks }}
                    </p>
                  @endif

                  @if($history->interview_scheduled_at)
                    <div style="margin-top: 0.5rem; font-size: 0.82rem; color: var(--accent);">
                      <i class="fas fa-clock"></i> Scheduled for {{ $history->interview_scheduled_at->format('d M Y, h:i A') }}
                      @if($history->interview_location)
                        | Venue: {{ $history->interview_location }}
                      @endif
                    </div>
                  @endif
                </div>
              </div>
            @endforeach
          </div>
        </div>

        <!-- Right: Vacancy Particulars -->
        <aside style="background: var(--bg-surface); padding: 1.75rem; border-radius: var(--radius-xl); border: 1px solid var(--border-light);">
          <h4 style="font-size: 1.15rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light);">
            Vacancy Particulars
          </h4>

          <div style="display: flex; flex-direction: column; gap: 1rem; font-size: 0.9rem;">
            <div>
              <span style="color: var(--text-light); display: block; font-size: 0.8rem; text-transform: uppercase;">Role</span>
              <strong style="color: var(--text-heading);">{{ $application->applied_role }}</strong>
            </div>

            <div>
              <span style="color: var(--text-light); display: block; font-size: 0.8rem; text-transform: uppercase;">Organization</span>
              <strong style="color: var(--text-heading);">{{ $application->job?->employer?->name ?? 'Zhelhire Client' }}</strong>
            </div>

            <div>
              <span style="color: var(--text-light); display: block; font-size: 0.8rem; text-transform: uppercase;">Placement District</span>
              <strong style="color: var(--text-body);">{{ $application->current_location ?: ($application->job?->district ?: 'Maharashtra') }}</strong>
            </div>

            @if($application->job?->salary_display)
              <div>
                <span style="color: var(--text-light); display: block; font-size: 0.8rem; text-transform: uppercase;">Compensation</span>
                <strong style="color: var(--accent);">{{ $application->job->salary_display }}</strong>
              </div>
            @endif

            @if($application->job)
              <div style="padding-top: 1rem; border-top: 1px solid var(--border-light);">
                <a href="{{ route('jobs.show', $application->job->slug) }}" class="btn btn-outline btn-sm" style="width: 100%; text-align: center;">
                  View Original Vacancy Posting <i class="fas fa-external-link-alt"></i>
                </a>
              </div>
            @endif
          </div>
        </aside>

      </div>
    </div>
  </section>

  <!-- Withdrawal Confirmation Modal -->
  @if($application->canWithdraw())
    <div id="withdrawModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9999; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(4px);">
      <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); max-width: 480px; width: 100%; padding: 2rem; position: relative;">
        
        <button type="button" onclick="document.getElementById('withdrawModal').style.display='none'" style="position: absolute; right: 1.25rem; top: 1.25rem; background: transparent; border: none; font-size: 1.2rem; color: var(--text-light); cursor: pointer;">
          <i class="fas fa-times"></i>
        </button>

        <h3 style="font-size: 1.25rem; color: #ef4444; margin-bottom: 0.5rem;">
          <i class="fas fa-exclamation-triangle"></i> Withdraw Application?
        </h3>
        <p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem;">
          Are you sure you want to withdraw your application for <strong>{{ $application->applied_role }}</strong>? This action cannot be reversed.
        </p>

        <form method="POST" action="{{ route('jobseeker.applications.withdraw', $application->id) }}">
          @csrf
          <div style="margin-bottom: 1.25rem;">
            <label for="withdrawReason" style="display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem;">
              Reason for Withdrawal (Optional)
            </label>
            <textarea name="reason" id="withdrawReason" rows="3" placeholder="Accepted another offer, relocated, personal reasons..." style="width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading); font-size: 0.9rem;"></textarea>
          </div>

          <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
            <button type="button" class="btn btn-outline btn-sm" onclick="document.getElementById('withdrawModal').style.display='none'">
              Cancel
            </button>
            <button type="submit" class="btn btn-primary btn-sm" style="background: #ef4444; border-color: #ef4444;">
              Confirm Withdrawal
            </button>
          </div>
        </form>
      </div>
    </div>
  @endif
</main>
@endsection