{% extends "base.html" %}

{% block title %}Profile Editor — Job Cannon{% endblock %}

{% block content %}
<script type="application/json" id="education-data">{{ profile.get('education', []) | tojson }}</script>
<input type="hidden" id="profile-mtime" value="{{ profile_mtime | default(0) }}">
<div class="max-w-4xl mx-auto space-y-8">

  <!-- Page header -->
  <div>
    <h1 class="text-2xl font-bold text-slate-100">Profile Editor</h1>
    <p class="text-slate-400 text-sm mt-1">Manage your experience profile. Changes affect scoring.</p>
  </div>

  <!-- Validation warnings panel -->
  {% if warnings %}
  <div id="warnings-panel" class="bg-amber-950/40 border border-amber-700/50 rounded-lg p-4">
    <div class="flex items-center gap-2 mb-3">
      <svg class="w-5 h-5 text-amber-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
      </svg>
      <span class="text-amber-300 font-semibold text-sm">{{ warnings|length }} Validation Warning{{ 's' if warnings|length != 1 else '' }}</span>
      <span class="text-amber-500 text-xs ml-auto">Advisory only — save always works</span>
    </div>
    <ul class="space-y-2">
      {% for w in warnings %}
      <li class="flex items-start gap-2 text-sm">
        <span class="text-amber-500 mt-0.5">&#8226;</span>
        <div class="flex-1">
          <span class="text-amber-200">{{ w.message }}</span>
          <span class="text-amber-600 text-xs ml-2">{{ w.field }}</span>
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% else %}
  <div class="bg-green-950/30 border border-green-800/40 rounded-lg px-4 py-3 flex items-center gap-2">
    <svg class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    <span class="text-green-300 text-sm">No validation warnings — profile looks great.</span>
  </div>
  {% endif %}

  <!-- Positions section -->
  <div class="bg-slate-800 rounded-lg p-6">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-semibold text-slate-100">Positions</h2>
      <button type="button" onclick="addPosition()"
              class="flex items-center gap-1.5 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-200 text-sm rounded-lg transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Add Position
      </button>
    </div>
    <p class="text-slate-500 text-xs mb-4">Drag to reorder positions. Most recent first is recommended.</p>

    <div id="positions-container" class="space-y-3">
      {% for position in profile.positions %}
      <div class="position-card bg-slate-900 rounded-lg border border-slate-700" data-index="{{ loop.index0 }}">
        <!-- Card header (click to expand/collapse) -->
        <div class="flex items-center gap-3 p-4 cursor-pointer select-none" onclick="toggleCard(this)">
          <!-- Drag handle -->
          <div class="drag-handle text-slate-600 hover:text-slate-400 cursor-grab active:cursor-grabbing flex-shrink-0">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 8h16M4 16h16"/>
            </svg>
          </div>
          <div class="flex-1 min-w-0">
            <div class="flex items-baseline gap-2">
              <span class="font-medium text-slate-100 truncate">{{ position.title or 'Untitled Position' }}</span>
              <span class="text-slate-400 text-sm">at {{ position.company or 'Unknown Company' }}</span>
            </div>
            <div class="text-slate-500 text-xs mt-0.5">
              {{ position.start_date or '' }}{% if position.end_date %} – {{ position.end_date }}{% elif position.start_date %} – Present{% endif %}
            </div>
          </div>
          <div class="flex items-center gap-2 flex-shrink-0">
            <span class="text-xs text-slate-500">{{ position.achievements | length }} achievement{{ 's' if position.achievements | length != 1 else '' }}</span>
            <svg class="chevron w-4 h-4 text-slate-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </div>
        </div>

        <!-- Card body (collapsible) -->
        <div class="card-body hidden border-t border-slate-700 p-4 space-y-4">
          <!-- Basic info row -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Job Title</label>
              <input type="text" class="position-title w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none"
                     value="{{ position.title | e }}" placeholder="e.g. Senior Data Scientist">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Company</label>
              <input type="text" class="position-company w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none"
                     value="{{ position.company | e }}" placeholder="e.g. Acme Corp">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Start Date</label>
              <input type="text" class="position-start-date w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none"
                     value="{{ position.start_date | e }}" placeholder="e.g. Jan 2022">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">End Date</label>
              <input type="text" class="position-end-date w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none"
                     value="{{ position.end_date | e }}" placeholder="e.g. May 2024 (blank = present)">
            </div>
          </div>

          <!-- Achievements -->
          <div>
            <div class="flex items-center justify-between mb-2">
              <label class="text-xs font-medium text-slate-400">Achievements</label>
              <button type="button" onclick="addAchievement(this)"
                      class="text-xs text-violet-400 hover:text-violet-300 transition-colors">+ Add Achievement</button>
            </div>
            <div class="achievements-list space-y-2">
              {% for achievement in position.achievements %}
              <div class="flex items-start gap-2">
                <textarea rows="2"
                          class="achievement-item flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y"
                          placeholder="Describe an achievement with quantified impact...">{{ achievement | e }}</textarea>
                <button type="button" onclick="removeItem(this.parentElement)"
                        class="mt-1 text-slate-600 hover:text-red-400 transition-colors flex-shrink-0">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
              {% else %}
              <p class="text-slate-600 text-xs italic">No achievements yet. Click "+ Add Achievement" above.</p>
              {% endfor %}
            </div>
          </div>

          <!-- Position skills chips -->
          <div>
            <label class="block text-xs font-medium text-slate-400 mb-2">Skills (this position)</label>
            <div class="skills-chips-container flex flex-wrap gap-2 mb-2 min-h-8">
              {% for skill in position.skills %}
              <span class="skill-chip flex items-center gap-1 px-3 py-1 bg-slate-700 border border-slate-600 rounded-full text-xs text-slate-200">
                <span class="skill-name">{{ skill | e }}</span>
                <button type="button" onclick="removeChip(this.parentElement)"
                        class="text-slate-500 hover:text-red-400 transition-colors leading-none">&#215;</button>
              </span>
              {% endfor %}
            </div>
            <div class="flex gap-2">
              <input type="text" class="skill-input flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none"
                     placeholder="Add skill..." list="skills-datalist"
                     onkeydown="if(event.key==='Enter'){event.preventDefault();addSkillChip(this);}">
              <button type="button" onclick="addSkillChip(this.previousElementSibling)"
                      class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-300 text-sm rounded transition-colors">Add</button>
            </div>
          </div>

          <!-- Remove position -->
          <div class="flex justify-end pt-2 border-t border-slate-700">
            <button type="button" onclick="removePosition(this)"
                    class="text-xs text-red-500 hover:text-red-400 transition-colors">
              Remove this position
            </button>
          </div>
        </div>
      </div>
      {% else %}
      <div id="no-positions-msg" class="text-slate-500 text-sm text-center py-6">
        No positions yet. Click "Add Position" to get started, or import from a Markdown resume.
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Top-level skills section -->
  <div class="bg-slate-800 rounded-lg p-6">
    <h2 class="text-lg font-semibold text-slate-100 mb-1">Skills</h2>
    <p class="text-slate-500 text-xs mb-4">Ordered by priority — drag to reorder. Top = most important for scoring and resume tailoring.</p>

    <div id="top-skills-container" class="flex flex-wrap gap-2 mb-4 min-h-12">
      {% for skill in profile.skills %}
      <span class="skill-chip flex items-center gap-1 px-3 py-1.5 bg-violet-900/50 border border-violet-700/60 rounded-full text-sm text-violet-200 cursor-grab active:cursor-grabbing">
        <span class="drag-indicator text-violet-600 mr-1">&#8801;</span>
        <span class="skill-name">{{ skill | e }}</span>
        <button type="button" onclick="removeChip(this.parentElement)"
                class="text-violet-600 hover:text-red-400 transition-colors leading-none ml-1">&#215;</button>
      </span>
      {% endfor %}
    </div>

    <div class="flex gap-2 max-w-sm">
      <input type="text" id="top-skill-input"
             class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none"
             placeholder="Add skill..." list="skills-datalist"
             onkeydown="if(event.key==='Enter'){event.preventDefault();addTopSkill();}">
      <button type="button" onclick="addTopSkill()"
              class="px-4 py-2 bg-violet-700 hover:bg-violet-600 text-white text-sm rounded transition-colors">Add</button>
    </div>
  </div>

  <!-- Save button -->
  <div class="flex items-center justify-between pb-8">
    <p class="text-slate-500 text-sm">All changes are local — save when ready.</p>
    <button type="button" onclick="saveProfile()"
            class="flex items-center gap-2 px-6 py-3 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
      </svg>
      Save Profile
    </button>
  </div>
</div>

<!-- Skills autocomplete datalist -->
<datalist id="skills-datalist">
  {% for skill in all_skills %}
  <option value="{{ skill | e }}">
  {% endfor %}
</datalist>

<script>
// ---------------------------------------------------------------------------
// Collapsible cards
// ---------------------------------------------------------------------------
function toggleCard(header) {
  const body = header.nextElementSibling;
  const chevron = header.querySelector('.chevron');
  const isHidden = body.classList.contains('hidden');
  body.classList.toggle('hidden', !isHidden);
  if (chevron) {
    chevron.style.transform = isHidden ? 'rotate(180deg)' : '';
  }
}

// ---------------------------------------------------------------------------
// SortableJS initialization
// ---------------------------------------------------------------------------
document.addEventListener('DOMContentLoaded', function () {
  // Position card drag-to-reorder
  const posContainer = document.getElementById('positions-container');
  if (posContainer && typeof Sortable !== 'undefined') {
    Sortable.create(posContainer, {
      handle: '.drag-handle',
      animation: 150,
      ghostClass: 'opacity-40',
    });
  }

  // Top-level skills drag-to-reorder
  const skillsContainer = document.getElementById('top-skills-container');
  if (skillsContainer && typeof Sortable !== 'undefined') {
    Sortable.create(skillsContainer, {
      animation: 150,
      ghostClass: 'opacity-40',
    });
  }
});

// ---------------------------------------------------------------------------
// Position CRUD
// ---------------------------------------------------------------------------
function addPosition() {
  const container = document.getElementById('positions-container');
  // Remove "no positions" message if present
  const noMsg = document.getElementById('no-positions-msg');
  if (noMsg) noMsg.remove();

  const idx = container.querySelectorAll('.position-card').length;
  const card = document.createElement('div');
  card.className = 'position-card bg-slate-900 rounded-lg border border-slate-700';
  card.dataset.index = idx;
  card.innerHTML = `
    <div class="flex items-center gap-3 p-4 cursor-pointer select-none" onclick="toggleCard(this)">
      <div class="drag-handle text-slate-600 hover:text-slate-400 cursor-grab active:cursor-grabbing flex-shrink-0">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"/>
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <div class="flex items-baseline gap-2">
          <span class="font-medium text-slate-100 truncate">New Position</span>
        </div>
        <div class="text-slate-500 text-xs mt-0.5">Fill in details below</div>
      </div>
      <svg class="chevron w-4 h-4 text-slate-500 transition-transform duration-200 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
      </svg>
    </div>
    <div class="card-body border-t border-slate-700 p-4 space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-xs font-medium text-slate-400 mb-1">Job Title</label>
          <input type="text" class="position-title w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none" placeholder="e.g. Senior Data Scientist">
        </div>
        <div>
          <label class="block text-xs font-medium text-slate-400 mb-1">Company</label>
          <input type="text" class="position-company w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none" placeholder="e.g. Acme Corp">
        </div>
        <div>
          <label class="block text-xs font-medium text-slate-400 mb-1">Start Date</label>
          <input type="text" class="position-start-date w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none" placeholder="e.g. Jan 2022">
        </div>
        <div>
          <label class="block text-xs font-medium text-slate-400 mb-1">End Date</label>
          <input type="text" class="position-end-date w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none" placeholder="e.g. May 2024 (blank = present)">
        </div>
      </div>
      <div>
        <div class="flex items-center justify-between mb-2">
          <label class="text-xs font-medium text-slate-400">Achievements</label>
          <button type="button" onclick="addAchievement(this)" class="text-xs text-violet-400 hover:text-violet-300 transition-colors">+ Add Achievement</button>
        </div>
        <div class="achievements-list space-y-2"></div>
      </div>
      <div>
        <label class="block text-xs font-medium text-slate-400 mb-2">Skills (this position)</label>
        <div class="skills-chips-container flex flex-wrap gap-2 mb-2 min-h-8"></div>
        <div class="flex gap-2">
          <input type="text" class="skill-input flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none"
                 placeholder="Add skill..." list="skills-datalist"
                 onkeydown="if(event.key==='Enter'){event.preventDefault();addSkillChip(this);}">
          <button type="button" onclick="addSkillChip(this.previousElementSibling)"
                  class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-300 text-sm rounded transition-colors">Add</button>
        </div>
      </div>
      <div class="flex justify-end pt-2 border-t border-slate-700">
        <button type="button" onclick="removePosition(this)" class="text-xs text-red-500 hover:text-red-400 transition-colors">Remove this position</button>
      </div>
    </div>
  `;
  container.appendChild(card);
}

function removePosition(btn) {
  btn.closest('.position-card').remove();
}

// ---------------------------------------------------------------------------
// Achievement CRUD
// ---------------------------------------------------------------------------
function addAchievement(btn) {
  // btn may be the "+ Add Achievement" button
  const card = btn.closest('.position-card') || btn.closest('.card-body');
  const list = card.querySelector('.achievements-list');

  const row = document.createElement('div');
  row.className = 'flex items-start gap-2';
  row.innerHTML = `
    <textarea rows="2"
              class="achievement-item flex-1 bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y"
              placeholder="Describe an achievement with quantified impact..."></textarea>
    <button type="button" onclick="removeItem(this.parentElement)"
            class="mt-1 text-slate-600 hover:text-red-400 transition-colors flex-shrink-0">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  `;
  list.appendChild(row);
}

function removeItem(el) {
  el.remove();
}

// ---------------------------------------------------------------------------
// Skill chips (position-level)
// ---------------------------------------------------------------------------
function addSkillChip(input) {
  const value = input.value.trim();
  if (!value) return;

  const container = input.closest('.card-body, .position-card').querySelector('.skills-chips-container');
  if (!container) return;

  const chip = document.createElement('span');
  chip.className = 'skill-chip flex items-center gap-1 px-3 py-1 bg-slate-700 border border-slate-600 rounded-full text-xs text-slate-200';
  chip.innerHTML = `
    <span class="skill-name">${escapeHtml(value)}</span>
    <button type="button" onclick="removeChip(this.parentElement)"
            class="text-slate-500 hover:text-red-400 transition-colors leading-none">&#215;</button>
  `;
  container.appendChild(chip);
  input.value = '';
}

function removeChip(chip) {
  chip.remove();
}

// ---------------------------------------------------------------------------
// Top-level skills
// ---------------------------------------------------------------------------
function addTopSkill() {
  const input = document.getElementById('top-skill-input');
  const value = input.value.trim();
  if (!value) return;

  const container = document.getElementById('top-skills-container');
  const chip = document.createElement('span');
  chip.className = 'skill-chip flex items-center gap-1 px-3 py-1.5 bg-violet-900/50 border border-violet-700/60 rounded-full text-sm text-violet-200 cursor-grab active:cursor-grabbing';
  chip.innerHTML = `
    <span class="drag-indicator text-violet-600 mr-1">&#8801;</span>
    <span class="skill-name">${escapeHtml(value)}</span>
    <button type="button" onclick="removeChip(this.parentElement)"
            class="text-violet-600 hover:text-red-400 transition-colors leading-none ml-1">&#215;</button>
  `;
  container.appendChild(chip);
  input.value = '';
}

// ---------------------------------------------------------------------------
// Profile serialization and save
// ---------------------------------------------------------------------------
function serializeProfile() {
  const profile = {
    positions: [],
    skills: [],
  };

  // Positions (in DOM order — respects drag reorder)
  document.querySelectorAll('#positions-container .position-card').forEach(function(card) {
    const body = card.querySelector('.card-body');
    if (!body) return;

    const achievements = [];
    body.querySelectorAll('.achievement-item').forEach(function(ta) {
      const text = ta.value.trim();
      if (text) achievements.push(text);
    });

    const skills = [];
    body.querySelectorAll('.skills-chips-container .skill-name').forEach(function(el) {
      const s = el.textContent.trim();
      if (s) skills.push(s);
    });

    profile.positions.push({
      title: (body.querySelector('.position-title') || {}).value || '',
      company: (body.querySelector('.position-company') || {}).value || '',
      start_date: (body.querySelector('.position-start-date') || {}).value || '',
      end_date: (body.querySelector('.position-end-date') || {}).value || null,
      achievements: achievements,
      skills: skills,
    });
  });

  // Top-level skills (in DOM order)
  document.querySelectorAll('#top-skills-container .skill-name').forEach(function(el) {
    const s = el.textContent.trim();
    if (s) profile.skills.push(s);
  });

  // Preserve education data (no form UI — opaque passthrough)
  try {
    const eduEl = document.getElementById('education-data');
    if (eduEl) {
      const edu = JSON.parse(eduEl.textContent);
      if (Array.isArray(edu) && edu.length > 0) {
        profile.education = edu;
      }
    }
  } catch (e) { /* ignore parse errors */ }

  return profile;
}

function saveProfile() {
  const profile = serializeProfile();

  // Attach mtime for stale-form detection
  const mtimeEl = document.getElementById('profile-mtime');
  if (mtimeEl && mtimeEl.value) {
    profile._mtime = mtimeEl.value;
  }

  fetch('{{ url_for("profile.save") }}', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'HX-Request': 'true',
    },
    body: JSON.stringify(profile),
  })
  .then(function(r) {
    if (r.ok) {
      window.location.href = '{{ url_for("profile.index") }}';
    } else if (r.status === 409) {
      alert('Profile was modified externally. The page will reload with the latest data.');
      window.location.reload();
    } else {
      return r.text().then(function(t) { alert('Save failed: ' + t); });
    }
  })
  .catch(function(err) { alert('Save error: ' + err); });
}

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function escapeHtml(str) {
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}
</script>
{% endblock %}