{% extends 'seekers/base_portal.html' %}
{% load humanize %}

{% block title %}Seeker Dashboard{% endblock %}
{% block topbar_title %}Seeker Dashboard{% endblock %}

{% block dash_content %}
<div class="page-heading">
  <h1>Welcome back{% if profile %}, {{ profile.full_name|truncatewords:2 }}{% endif %}</h1>
  <p>Track applications, saved jobs, and keep your profile up to date for employers.</p>
</div>

<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-icon"><i class="fas fa-paper-plane"></i></div>
    <div class="stat-info">
      <div class="num">{{ applications_count }}</div>
      <div class="lbl">Applications</div>
      {% if applications_count %}<a href="{% url 'seekers:applications' %}" style="font-size:0.76rem;color:var(--secondary);font-weight:700;margin-top:4px;display:inline-block;">View all</a>{% endif %}
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon"><i class="fas fa-bookmark"></i></div>
    <div class="stat-info">
      <div class="num">{{ saved_jobs_count }}</div>
      <div class="lbl">Saved Jobs</div>
    </div>
  </div>
  {% if profile_insights %}
  <div class="stat-card">
    <div class="stat-icon"><i class="fas fa-eye"></i></div>
    <div class="stat-info">
      <div class="num">{{ profile_insights.views }}</div>
      <div class="lbl">Profile Views</div>
    </div>
  </div>
  {% endif %}
  <div class="stat-card">
    <div class="stat-icon"><i class="fas fa-building"></i></div>
    <div class="stat-info">
      <div class="num">{{ followed_companies_count }}</div>
      <div class="lbl">Followed Companies</div>
    </div>
  </div>
</div>

{% if job_alerts_active %}
<div class="seeker-alert-banner is-active">
  <div style="display:flex;align-items:center;gap:12px;">
    <i class="fas fa-bell"></i>
    <div>
      <strong>Priority Job Alerts active</strong>
      <p>You'll receive email alerts when new jobs match your profile and job category - even when employers use different titles (Professional Plus).</p>
    </div>
  </div>
</div>
{% else %}
<div class="seeker-alert-banner is-upgrade">
  <div style="display:flex;align-items:center;gap:12px;">
    <i class="fas fa-bell-slash"></i>
    <div>
      <strong style="color:var(--primary);">Upgrade for Priority Job Alerts</strong>
      <p style="font-size:0.85rem;color:var(--text-muted);margin:4px 0 0;">Get emailed when new jobs match your skills - K20/month with Professional Plus.</p>
    </div>
  </div>
  <a href="{% url 'subscriptions:pricing' %}" class="btn btn-sm btn-primary">View plans</a>
</div>
{% endif %}

{% if profile %}
<div class="seeker-profile-status{% if profile.is_public %} is-public{% else %} is-private{% endif %}">
  <div>
    {% if profile.is_public %}
    <h4><i class="fas fa-globe" style="color:#16a34a;"></i> Public profile is live</h4>
    <p>
      <span class="status-dot {% if profile.is_online %}online{% else %}offline{% endif %}"></span>
      {% if profile.is_online %}Online{% else %}Offline{% endif %} ·
      Visible at <a href="{{ profile.get_absolute_url }}" style="color:var(--secondary);font-weight:600;">{{ profile.get_absolute_url }}</a>
    </p>
    {% else %}
    <h4><i class="fas fa-lock" style="color:#d97706;"></i> Profile is private</h4>
    <p>Choose who can see your profile under <a href="{% url 'seekers:edit_profile' %}?section=privacy" style="color:var(--secondary);font-weight:600;">Privacy and contact</a> when you're ready to appear to employers.</p>
    {% endif %}
    {% if profile_completion is not None %}
    <div class="seeker-completion">
      <span style="font-size:0.78rem;color:var(--text-muted);font-weight:600;">Profile {{ profile_completion }}% complete</span>
      <div class="seeker-completion-bar"><div class="seeker-completion-fill" style="width:{{ profile_completion }}%;"></div></div>
    </div>
    {% endif %}
  </div>
  <a href="{% url 'seekers:edit_profile' %}" class="btn btn-sm btn-primary"><i class="fas fa-id-card"></i> {% if profile_completion < 100 %}Complete profile{% else %}Edit profile{% endif %}</a>
</div>
{% else %}
<div class="seeker-profile-status is-private">
  <div>
    <h4><i class="fas fa-user-plus" style="color:#d97706;"></i> Complete your profile</h4>
    <p>Add your experience, skills and CV so employers can find you and you get better job recommendations.</p>
  </div>
</div>
{% endif %}

<div class="two-col">
  <section class="panel">
    <div class="panel-header">
      <h3><i class="fas fa-bookmark"></i> Saved Jobs</h3>
      <a href="{% url 'jobs:list' %}">Browse jobs</a>
    </div>
    {% for saved in saved_jobs %}
    <a href="{{ saved.job.get_absolute_url }}" class="seeker-list-row">
      <div class="seeker-list-title">{{ saved.job.title }}</div>
      <div class="seeker-list-meta">{{ saved.job.company_name }} · Saved {{ saved.created_at|naturaltime }}</div>
    </a>
    {% empty %}
    <p style="color:var(--text-muted);font-size:0.88rem;margin:0;">No saved jobs yet. <a href="{% url 'jobs:list' %}">Browse jobs</a> and bookmark roles you like.</p>
    {% endfor %}
  </section>

  <section class="panel">
    <div class="panel-header">
      <h3><i class="fas fa-paper-plane"></i> Recent Applications</h3>
      <a href="{% url 'seekers:applications' %}">View all</a>
    </div>
    {% for application in applications %}
    <a href="{{ application.job.get_absolute_url }}" class="seeker-list-row">
      <div class="seeker-list-title">{{ application.job.title }}</div>
      <div class="seeker-list-meta">
        <span class="seeker-status-pill" style="{{ application.status_badge_style }}">{{ application.get_status_display }}</span>
        · Applied {{ application.created_at|naturaltime }}
      </div>
    </a>
    {% empty %}
    <p style="color:var(--text-muted);font-size:0.88rem;margin:0;">No applications yet. <a href="{% url 'jobs:list' %}">Find jobs</a> and apply directly from the listing.</p>
    {% endfor %}
  </section>
</div>

{% if recommended_jobs %}
<section class="panel" style="margin-bottom:22px;">
  <div class="panel-header">
    <h3>
      <i class="fas fa-compass"></i> Recommended jobs
      {% if profile.job_category %}<span style="font-weight:500;color:var(--text-muted);font-size:0.85rem;">— {{ profile.job_category.numbered_name }}</span>{% endif %}
    </h3>
    {% if category_browse_link %}
    <a href="{{ category_browse_link }}">Browse category</a>
    {% endif %}
  </div>
  <p style="font-size:0.85rem;color:var(--text-muted);margin:0 0 16px;">
    Roles grouped by the type of work you do, not just one job title. Set your <strong>Job Category</strong> below to improve alerts and recommendations.
  </p>
  {% for job in recommended_jobs %}
  <a href="{{ job.get_absolute_url }}" class="seeker-list-row">
    <div class="seeker-list-title">{{ job.title }}</div>
    <div class="seeker-list-meta">
      {{ job.company_name }}
      {% if job.category %} · {{ job.category.numbered_name }}{% endif %}
      {% if job.company_industry %} · {{ job.company_industry }}{% endif %}
    </div>
  </a>
  {% endfor %}
</section>
{% elif profile and not profile.job_category_id %}
<div class="seeker-category-hint">
  <strong>Add your Job Category</strong>
  <p>Select the field you work in (e.g. Human Resources &amp; People, Engineering, Accounting &amp; Finance) to get better job recommendations and alerts - without searching every job title employers might use.</p>
</div>
{% endif %}

{% if followed_companies %}
<section class="panel" style="margin-bottom:22px;">
  <div class="panel-header">
    <h3><i class="fas fa-building"></i> Companies you follow</h3>
    <a href="{% url 'accounts:notifications' %}"><i class="fas fa-bell"></i> Notifications</a>
  </div>
  <div class="seeker-company-chips">
    {% for co in followed_companies %}
    <a href="{{ co.get_absolute_url }}" class="seeker-company-chip">
      <span class="seeker-company-chip-ava" style="background:{{ co.logo_gradient }};">{{ co.initials }}</span>
      {{ co.name }}
    </a>
    {% endfor %}
  </div>
</section>
{% endif %}

<section class="panel" id="edit-profile">
  <div class="panel-header">
    <h3><i class="fas fa-user-edit"></i> Edit Profile</h3>
    <a href="{% url 'accounts:settings' %}">Full account settings</a>
  </div>
  <p style="color:var(--text-muted);font-size:0.88rem;margin:0 0 20px;">
    Quick edit below, or manage everything (account, password, CV, visibility) in Account Settings.
  </p>

  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="seeker-form-grid">
      {% for field in form %}
      <div class="form-group{% if field.name in full_width_fields %} form-group--full{% elif field.field.widget.input_type == 'checkbox' %} form-group--checkbox{% endif %}">
        {% if field.field.widget.input_type == 'checkbox' %}
        {{ field }}
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% else %}
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field }}
        {% endif %}
        {% if field.help_text %}<div style="font-size:0.82rem;color:var(--text-muted);margin-top:4px;">{{ field.help_text }}</div>{% endif %}
        {% if field.errors %}<div style="color:#c0392b;font-size:0.82rem;margin-top:4px;">{{ field.errors.0 }}</div>{% endif %}
      </div>
      {% endfor %}

      <div class="seeker-form-actions">
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Profile</button>
        {% if profile and profile.is_public %}
        <a href="{{ profile.get_absolute_url }}" class="btn btn-outline" target="_blank" rel="noopener"><i class="fas fa-external-link-alt"></i> View Public Profile</a>
        {% endif %}
        <a href="{% url 'jobs:list' %}" class="btn btn-outline"><i class="fas fa-briefcase"></i> Browse Jobs</a>
      </div>
    </div>
  </form>
</section>
{% endblock %}