const STORAGE_KEY = 'jobprep-resume-v1';

const SUGGESTED_SKILLS = [
  'Reliable & On Time', 'Customer Service', 'Teamwork', 'Communication',
  'Time Management', 'Cash Handling', 'Problem Solving', 'Fast Learner',
  'Works Well Under Pressure', 'Attention to Detail', 'Following Instructions',
  'Physical Stamina', 'Basic Computer Skills', 'Multitasking',
];

let state = {
  name: '', phone: '', email: '', location: '', summary: '',
  jobs: [{ title: '', employer: '', start: '', end: '', current: false, bullets: '' }],
  edu: [{ school: '', credential: '', year: '' }],
  skills: [],
};

function loadState() {
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) state = JSON.parse(saved);
  } catch {
    // ignore corrupt storage
  }
}

function saveState() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
}

function jobBlockHtml(job, i) {
  return `
    <div class="entry-block" data-job="${i}">
      ${state.jobs.length > 1 ? `<button type="button" class="btn btn-ghost btn-sm remove" data-remove-job="${i}">Remove</button>` : ''}
      <div class="two-col">
        <div><label>Job Title<input type="text" data-job-field="title" data-i="${i}" value="${esc(job.title)}" placeholder="Delivery Driver"></label></div>
        <div><label>Employer<input type="text" data-job-field="employer" data-i="${i}" value="${esc(job.employer)}" placeholder="DoorDash"></label></div>
      </div>
      <div class="two-col">
        <div><label>Start<input type="month" data-job-field="start" data-i="${i}" value="${esc(job.start)}"></label></div>
        <div>
          <label>End
            <input type="month" data-job-field="end" data-i="${i}" value="${esc(job.end)}" ${job.current ? 'disabled' : ''}>
          </label>
          <label style="font-weight:400; display:flex; align-items:center; gap:6px; margin-top:4px;">
            <input type="checkbox" data-job-field="current" data-i="${i}" ${job.current ? 'checked' : ''} style="width:auto;"> I still work here
          </label>
        </div>
      </div>
      <label>What did you do?
        <span class="hint">One idea per line. Example: "Delivered food orders to customers on time" / "Handled cash and card payments" / "Communicated with customers about order issues"</span>
        <textarea data-job-field="bullets" data-i="${i}" rows="3" placeholder="Delivered orders on time and communicated with customers&#10;Handled cash and digital payments accurately">${esc(job.bullets)}</textarea>
      </label>
    </div>
  `;
}

function eduBlockHtml(edu, i) {
  return `
    <div class="entry-block" data-edu="${i}">
      ${state.edu.length > 1 ? `<button type="button" class="btn btn-ghost btn-sm remove" data-remove-edu="${i}">Remove</button>` : ''}
      <div class="two-col">
        <div><label>School<input type="text" data-edu-field="school" data-i="${i}" value="${esc(edu.school)}" placeholder="Springfield High School"></label></div>
        <div><label>Diploma / Degree<input type="text" data-edu-field="credential" data-i="${i}" value="${esc(edu.credential)}" placeholder="High School Diploma"></label></div>
      </div>
      <label>Year (graduated or expected)<input type="text" data-edu-field="year" data-i="${i}" value="${esc(edu.year)}" placeholder="2024" style="max-width:160px;"></label>
    </div>
  `;
}

function esc(str) {
  return (str || '').toString()
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function monthLabel(value) {
  if (!value) return '';
  const [y, m] = value.split('-');
  const names = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const idx = parseInt(m, 10) - 1;
  return names[idx] ? `${names[idx]} ${y}` : y;
}

function renderForm() {
  document.getElementById('f-name').value = state.name;
  document.getElementById('f-phone').value = state.phone;
  document.getElementById('f-email').value = state.email;
  document.getElementById('f-location').value = state.location;
  document.getElementById('f-summary').value = state.summary;

  document.getElementById('jobs-container').innerHTML = state.jobs.map(jobBlockHtml).join('');
  document.getElementById('edu-container').innerHTML = state.edu.map(eduBlockHtml).join('');

  const chipsWrap = document.getElementById('skill-chips');
  const allSkills = [...new Set([...SUGGESTED_SKILLS, ...state.skills])];
  chipsWrap.innerHTML = allSkills.map((s) => {
    const selected = state.skills.includes(s);
    return `<span class="chip ${selected ? 'selected' : ''}" data-skill="${esc(s)}">${esc(s)}</span>`;
  }).join('');
}

function renderPreview() {
  const preview = document.getElementById('preview');
  const hasAnything = state.name || state.jobs.some((j) => j.title || j.employer);

  if (!hasAnything) {
    preview.innerHTML = '<p style="color:#999;">Your resume preview will appear here as you fill out the form.</p>';
    return;
  }

  const contactParts = [state.phone, state.email, state.location].filter(Boolean).join('  •  ');

  const jobsHtml = state.jobs
    .filter((j) => j.title || j.employer)
    .map((j) => {
      const dateRange = [monthLabel(j.start), j.current ? 'Present' : monthLabel(j.end)]
        .filter(Boolean).join(' – ');
      const bullets = (j.bullets || '').split('\n').map((b) => b.trim()).filter(Boolean);
      return `
        <div style="margin-bottom:10px;">
          <div class="entry-title">${esc(j.title) || 'Job Title'}${j.employer ? ` — ${esc(j.employer)}` : ''}</div>
          ${dateRange ? `<div class="entry-sub">${esc(dateRange)}</div>` : ''}
          ${bullets.length ? `<ul>${bullets.map((b) => `<li>${esc(b)}</li>`).join('')}</ul>` : ''}
        </div>`;
    }).join('');

  const eduHtml = state.edu
    .filter((e) => e.school)
    .map((e) => `
      <div style="margin-bottom:8px;">
        <div class="entry-title">${esc(e.school)}</div>
        <div class="entry-sub">${[esc(e.credential), esc(e.year)].filter(Boolean).join(' • ')}</div>
      </div>`).join('');

  preview.innerHTML = `
    <h1>${esc(state.name) || 'Your Name'}</h1>
    <div class="contact">${contactParts}</div>
    ${state.summary ? `<h2 class="section">Summary</h2><p>${esc(state.summary)}</p>` : ''}
    ${jobsHtml ? `<h2 class="section">Experience</h2>${jobsHtml}` : ''}
    ${eduHtml ? `<h2 class="section">Education</h2>${eduHtml}` : ''}
    ${state.skills.length ? `<h2 class="section">Skills</h2><p class="skills-line">${state.skills.map(esc).join('  •  ')}</p>` : ''}
  `;
}

function renderAll() {
  renderForm();
  renderPreview();
}

document.addEventListener('input', (e) => {
  const t = e.target;
  if (t.id === 'f-name') state.name = t.value;
  else if (t.id === 'f-phone') state.phone = t.value;
  else if (t.id === 'f-email') state.email = t.value;
  else if (t.id === 'f-location') state.location = t.value;
  else if (t.id === 'f-summary') state.summary = t.value;
  else if (t.dataset.jobField) {
    const i = parseInt(t.dataset.i, 10);
    if (t.dataset.jobField === 'current') {
      state.jobs[i].current = t.checked;
      renderForm();
    } else {
      state.jobs[i][t.dataset.jobField] = t.value;
    }
  } else if (t.dataset.eduField) {
    const i = parseInt(t.dataset.i, 10);
    state.edu[i][t.dataset.eduField] = t.value;
  } else {
    return;
  }
  saveState();
  renderPreview();
});

document.addEventListener('click', (e) => {
  const t = e.target;

  if (t.id === 'add-job') {
    state.jobs.push({ title: '', employer: '', start: '', end: '', current: false, bullets: '' });
    renderAll(); saveState();
  } else if (t.id === 'add-edu') {
    state.edu.push({ school: '', credential: '', year: '' });
    renderAll(); saveState();
  } else if (t.dataset.removeJob !== undefined) {
    state.jobs.splice(parseInt(t.dataset.removeJob, 10), 1);
    renderAll(); saveState();
  } else if (t.dataset.removeEdu !== undefined) {
    state.edu.splice(parseInt(t.dataset.removeEdu, 10), 1);
    renderAll(); saveState();
  } else if (t.dataset.skill) {
    const skill = t.dataset.skill;
    if (state.skills.includes(skill)) {
      state.skills = state.skills.filter((s) => s !== skill);
    } else {
      state.skills.push(skill);
    }
    renderAll(); saveState();
  } else if (t.id === 'clear-form') {
    if (confirm('Clear everything you\'ve entered? This can\'t be undone.')) {
      localStorage.removeItem(STORAGE_KEY);
      location.reload();
    }
  } else if (t.id === 'download-pdf') {
    downloadPdf();
  }
});

document.getElementById('f-custom-skill').addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    const val = e.target.value.trim();
    if (val && !state.skills.includes(val)) {
      state.skills.push(val);
      e.target.value = '';
      renderAll(); saveState();
    }
  }
});

function downloadPdf() {
  const hasAnything = state.name || state.jobs.some((j) => j.title || j.employer);
  if (!hasAnything) {
    alert('Fill in at least your name or a job before downloading your resume.');
    return;
  }

  // Uses the browser's built-in Print > Save as PDF instead of a third-party
  // screenshot library — those libraries (html2canvas et al.) render blank
  // on current Chrome versions and are unmaintained. A print stylesheet
  // (see @media print in styles.css) hides everything except #preview.
  const originalTitle = document.title;
  document.title = `${(state.name || 'Resume').trim().replace(/\s+/g, '_')}_Resume`;
  window.print();
  document.title = originalTitle;
}

loadState();
renderAll();