// CV Application - Frontend JavaScript
const API = '';
let currentChatId = null;

// ============================================================
// NAVIGATION
// ============================================================
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    link.classList.add('active');
    const page = link.dataset.page;
    document.getElementById('page-' + page).classList.add('active');
    // Load data for page
    if (page === 'dashboard') loadDashboard();
    if (page === 'candidates') loadCandidates();
    if (page === 'templates') loadTemplates();
    if (page === 'requirements') loadRequirements();
    if (page === 'generated') loadGeneratedCVs();
    if (page === 'chat') loadChat();
  });
});

// ============================================================
// API helpers
// ============================================================
async function api(path, method = 'GET', body = null) {
  const opts = { method, headers: {} };
  if (body) {
    opts.headers['Content-Type'] = 'application/json';
    opts.body = JSON.stringify(body);
  }
  const resp = await fetch(API + path, opts);
  if (!resp.ok) {
    const err = await resp.text();
    throw new Error(err);
  }
  return resp.json();
}

function toast(msg, type = 'success') {
  const el = document.createElement('div');
  el.className = 'toast ' + type;
  el.textContent = msg;
  document.body.appendChild(el);
  setTimeout(() => el.remove(), 4000);
}

// ============================================================
// DASHBOARD
// ============================================================
async function loadDashboard() {
  const stats = await api('/api/stats');
  const grid = document.getElementById('stats-grid');
  grid.innerHTML = `
    <div class="stat-card"><div class="stat-value">${stats.total_candidates}</div><div class="stat-label">Total Candidates</div></div>
    <div class="stat-card"><div class="stat-value">${stats.parsed_candidates}</div><div class="stat-label">Parsed CVs</div></div>
    <div class="stat-card"><div class="stat-value">${stats.unique_skills}</div><div class="stat-label">Unique Skills</div></div>
    <div class="stat-card"><div class="stat-value">${stats.total_templates}</div><div class="stat-label">Templates</div></div>
    <div class="stat-card"><div class="stat-value">${stats.total_requirements}</div><div class="stat-label">Requirements</div></div>
    <div class="stat-card"><div class="stat-value">${stats.total_generated_cvs}</div><div class="stat-label">Generated CVs</div></div>
  `;
  // Recent candidates
  const data = await api('/api/candidates?limit=5');
  document.getElementById('recent-candidates').innerHTML = data.candidates.map(c => `
    <div class="skill-row">
      <span><strong>${c.first_name || ''} ${c.last_name || ''}</strong> ${c.email ? '· ' + c.email : ''}</span>
      <span class="badge badge-${c.parse_status === 'parsed' ? 'green' : c.parse_status === 'error' ? 'red' : 'orange'}">${c.parse_status}</span>
    </div>
  `).join('') || '<p class="text-muted">No candidates yet</p>';
}

// ============================================================
// CANDIDATES
// ============================================================
async function loadCandidates(search = '') {
  const data = await api('/api/candidates' + (search ? '?search=' + encodeURIComponent(search) : ''));
  const list = document.getElementById('candidates-list');
  if (!data.candidates.length) {
    list.innerHTML = '<p class="text-muted">No candidates found. Upload some CVs to get started.</p>';
    return;
  }
  list.innerHTML = data.candidates.map(c => `
    <div class="card" style="cursor:pointer" onclick="viewCandidate('${c.id}')">
      <div class="flex-between">
        <div>
          <strong>${c.first_name || ''} ${c.last_name || ''}</strong>
          ${c.email ? '· ' + c.email : ''}
          <div class="text-muted text-sm mt-8">${(c.preview || '').substring(0, 100)}...</div>
        </div>
        <div class="flex gap-8">
          <span class="badge badge-${c.parse_status === 'parsed' ? 'green' : c.parse_status === 'error' ? 'red' : 'orange'}">${c.parse_status}</span>
          <button class="btn btn-sm btn-danger" onclick="event.stopPropagation();deleteCandidate('${c.id}')">Delete</button>
        </div>
      </div>
    </div>
  `).join('');
}

function searchCandidates() {
  const q = document.getElementById('search-input').value;
  loadCandidates(q);
}

document.getElementById('search-input')?.addEventListener('keypress', e => {
  if (e.key === 'Enter') searchCandidates();
});

async function viewCandidate(id) {
  const data = await api('/api/candidates/' + id);
  const c = data.candidate;
  const body = `
    <div style="margin-bottom:20px">
      <h2>${c.first_name || ''} ${c.last_name || ''}</h2>
      ${c.email ? '<div class="text-muted">' + c.email + '</div>' : ''}
      ${c.phone ? '<div class="text-muted">' + c.phone + '</div>' : ''}
      ${c.linkedin ? '<div class="text-muted">LinkedIn: ' + c.linkedin + '</div>' : ''}
    </div>
    ${c.summary ? '<div class="card"><h3>Summary</h3><p>' + c.summary + '</p></div>' : ''}
    <div class="card">
      <h3 style="margin-bottom:12px">Skills (${data.skills.length})</h3>
      ${data.skills.map(s => `
        <div class="skill-row">
          <div>
            <span class="skill-name">${s.skill_name}</span>
            <span class="skill-meta"> · ${s.skill_category || 'General'} · ${s.proficiency || 'N/A'}</span>
          </div>
          <span class="badge badge-blue">${s.years_experience || 0} yrs</span>
        </div>
      `).join('') || '<p class="text-muted">No skills extracted</p>'}
    </div>
    <div class="card">
      <h3 style="margin-bottom:12px">Experience (${data.experience.length})</h3>
      ${data.experience.map(e => `
        <div style="margin-bottom:16px">
          <strong>${e.position || ''}</strong> at ${e.company || ''}
          <div class="text-muted text-sm">${formatDate(e.start_date)} — ${e.end_date ? formatDate(e.end_date) : 'Present'}</div>
          ${e.description ? '<p class="text-sm mt-8">' + e.description + '</p>' : ''}
        </div>
      `).join('') || '<p class="text-muted">No experience extracted</p>'}
    </div>
    <div class="card">
      <h3 style="margin-bottom:12px">Education (${data.education.length})</h3>
      ${data.education.map(e => `
        <div style="margin-bottom:12px">
          <strong>${e.degree || ''}</strong> ${e.field_of_study ? 'in ' + e.field_of_study : ''}
          <div class="text-muted text-sm">${e.institution || ''}</div>
        </div>
      `).join('') || '<p class="text-muted">No education extracted</p>'}
    </div>
    <div class="card">
      <h3 style="margin-bottom:12px">Raw CV Text</h3>
      <div style="max-height:400px;overflow-y:auto;background:var(--bg-input);padding:12px;border-radius:6px;white-space:pre-wrap;font-size:13px">${c.raw_cv_text || 'No raw text available'}</div>
    </div>
  `;
  showModal(body, 'Candidate Details');
}

async function deleteCandidate(id) {
  if (!confirm('Delete this candidate and all related data?')) return;
  await api('/api/candidates/' + id, 'DELETE');
  toast('Candidate deleted');
  loadCandidates();
}

// ============================================================
// UPLOAD
// ============================================================
const uploadZone = document.getElementById('upload-zone');
uploadZone?.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('dragover'); });
uploadZone?.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));
uploadZone?.addEventListener('drop', e => {
  e.preventDefault();
  uploadZone.classList.remove('dragover');
  if (e.dataTransfer.files.length) uploadFile(e.dataTransfer.files[0]);
});

async function uploadFile(file) {
  if (!file) return;
  const status = document.getElementById('upload-status');
  status.innerHTML = '<div class="loading"><span class="spinner"></span> Uploading and parsing with AI... this may take 30-60 seconds</div>';
  
  const formData = new FormData();
  formData.append('file', file);
  
  try {
    const resp = await fetch(API + '/api/candidates/upload', { method: 'POST', body: formData });
    const data = await resp.json();
    if (data.status === 'parsed') {
      status.innerHTML = `<div class="toast success" style="position:relative;bottom:0;right:0">
        <strong>Parsed successfully!</strong><br>
        Name: ${data.parsed_data.first_name || ''} ${data.parsed_data.last_name || ''}<br>
        Skills: ${data.parsed_data.skills?.length || 0} | Experience: ${data.parsed_data.experience?.length || 0} | Education: ${data.parsed_data.education?.length || 0}
      </div>`;
      toast('CV uploaded and parsed successfully');
    } else {
      status.innerHTML = `<div class="toast error" style="position:relative;bottom:0;right:0">Parse error: ${data.error}</div>`;
    }
  } catch (e) {
    status.innerHTML = `<div class="toast error" style="position:relative;bottom:0;right:0">Upload failed: ${e.message}</div>`;
  }
}

// ============================================================
// TEMPLATES
// ============================================================
async function loadTemplates() {
  const data = await api('/api/templates');
  const list = document.getElementById('templates-list');
  if (!data.templates.length) {
    list.innerHTML = '<p class="text-muted">No templates yet. Create one manually or generate with AI.</p>';
    return;
  }
  list.innerHTML = data.templates.map(t => `
    <div class="card">
      <div class="flex-between">
        <div>
          <strong>${t.name}</strong>
          <span class="badge badge-${t.created_by === 'ai' ? 'purple' : 'blue'}">${t.created_by}</span>
          <div class="text-muted text-sm mt-8">${t.description || ''}</div>
        </div>
        <div class="flex gap-8">
          <button class="btn btn-sm btn-outline" onclick="showDesigner('${t.id}')">A4 Designer</button>
          <button class="btn btn-sm btn-outline" onclick="showBuilder('${t.id}')">Visual Builder</button>
          <button class="btn btn-sm btn-danger" onclick="deleteTemplate('${t.id}')">Delete</button>
        </div>
      </div>
    </div>
  `).join('');
}

function showTemplateModal() {
  const body = `
    <div class="form-group">
      <label>Template Name</label>
      <input type="text" id="tmpl-name" placeholder="e.g. Standard Tech CV">
    </div>
    <div class="form-group">
      <label>Description</label>
      <textarea id="tmpl-desc" placeholder="Brief description of this template"></textarea>
    </div>
    <div class="form-group">
      <label>Template Structure (JSON)</label>
      <textarea id="tmpl-structure" style="min-height:300px;font-family:monospace" placeholder='{"sections":[{"name":"Header","type":"header","order":1,"fields":["name","email","phone"]},{"name":"Summary","type":"summary","order":2},{"name":"Experience","type":"experience","order":3,"styling":{"show_years":true}},{"name":"Skills","type":"skills","order":4,"styling":{"group_by_category":true}},{"name":"Education","type":"education","order":5}],"styling":"font-family: Arial;"}'></textarea>
    </div>
    <div class="form-group">
      <label>CSS Styling (optional)</label>
      <textarea id="tmpl-styling" placeholder="Additional CSS for the template"></textarea>
    </div>
    <button class="btn" onclick="createTemplate()">Create Template</button>
  `;
  showModal(body, 'Create Template');
}

function showTemplateGenModal() {
  const body = `
    <div class="form-group">
      <label>Template Name</label>
      <input type="text" id="tmpl-gen-name" placeholder="e.g. Senior Developer CV">
    </div>
    <div class="form-group">
      <label>Describe the template you want</label>
      <textarea id="tmpl-gen-desc" style="min-height:120px" placeholder="e.g. A modern CV template for software engineers with emphasis on technical skills, project highlights, and cloud certifications. Dark theme. Group skills by category. Show years of experience for each skill."></textarea>
    </div>
    <button class="btn" onclick="generateTemplate()">Generate with AI</button>
  `;
  showModal(body, 'Generate Template with AI');
}

async function createTemplate() {
  const structure = JSON.parse(document.getElementById('tmpl-structure').value || '{}');
  await api('/api/templates', 'POST', {
    name: document.getElementById('tmpl-name').value,
    description: document.getElementById('tmpl-desc').value,
    template_structure: structure,
    styling: document.getElementById('tmpl-styling').value,
    created_by: 'manual'
  });
  closeModal();
  toast('Template created');
  loadTemplates();
}

async function generateTemplate() {
  const desc = document.getElementById('tmpl-gen-desc').value;
  if (!desc) { toast('Description required', 'error'); return; }
  const btn = document.querySelector('.modal button');
  btn.textContent = 'Generating...';
  btn.disabled = true;
  try {
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 120000); // 2 min timeout
    const resp = await fetch(API + '/api/templates/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: document.getElementById('tmpl-gen-name').value || 'AI Generated Template',
        description: desc
      }),
      signal: controller.signal
    });
    clearTimeout(timeout);
    if (!resp.ok) {
      const err = await resp.text();
      throw new Error(err);
    }
    closeModal();
    toast('Template generated with AI');
    loadTemplates();
  } catch(e) {
    btn.textContent = 'Generate with AI';
    btn.disabled = false;
    if (e.name === 'AbortError') {
      toast('Generation timed out after 2 minutes. Try a shorter description.', 'error');
    } else {
      toast('Generation failed: ' + e.message, 'error');
    }
  }
}

async function deleteTemplate(id) {
  if (!confirm('Delete this template?')) return;
  await api('/api/templates/' + id, 'DELETE');
  toast('Template deleted');
  loadTemplates();
}

// ============================================================
// REQUIREMENTS
// ============================================================
async function loadRequirements() {
  const data = await api('/api/requirements');
  const list = document.getElementById('requirements-list');
  if (!data.requirements.length) {
    list.innerHTML = '<p class="text-muted">No requirements yet. Create one to start matching candidates.</p>';
    return;
  }
  list.innerHTML = data.requirements.map(r => `
    <div class="card">
      <div class="flex-between">
        <div>
          <strong>${r.title}</strong>
          ${r.customer_name ? '<span class="text-muted"> · ' + r.customer_name + '</span>' : ''}
          <div class="text-muted text-sm mt-8">${r.description || ''}</div>
          <div class="text-sm mt-8">${(r.requirements || []).length} position(s) requested</div>
        </div>
        <div class="flex gap-8">
          <button class="btn btn-sm" onclick="viewRequirement('${r.id}')">View</button>
          <button class="btn btn-sm btn-outline" onclick="matchRequirement('${r.id}')">Match</button>
          <button class="btn btn-sm btn-green" onclick="generateForRequirement('${r.id}')">Generate CVs</button>
          <button class="btn btn-sm btn-danger" onclick="deleteRequirement('${r.id}')">Delete</button>
        </div>
      </div>
    </div>
  `).join('');
}

function showRequirementModal() {
  const body = `
    <div class="form-group">
      <label>Request Title</label>
      <input type="text" id="req-title" placeholder="e.g. Q3 2026 Staff Augmentation">
    </div>
    <div class="form-group">
      <label>Customer Name</label>
      <input type="text" id="req-customer" placeholder="Client name">
    </div>
    <div class="form-group">
      <label>Description</label>
      <textarea id="req-desc" placeholder="Overall description of the requirement"></textarea>
    </div>
    <div class="form-group">
      <label>Positions Required (JSON)</label>
      <p class="text-muted text-sm mb-16">Define each position with required skills and years of experience.</p>
      <textarea id="req-positions" style="min-height:300px;font-family:monospace;font-size:13px" placeholder='[
  {
    "position_title": "Senior .NET Developer",
    "quantity": 2,
    "experience_years": 5,
    "skills": [
      {"name": "C#", "min_years": 4, "required": true},
      {"name": ".NET Core", "min_years": 3, "required": true},
      {"name": "Azure", "min_years": 2, "required": false}
    ],
    "education": "Bachelor degree in Computer Science or related",
    "description": "Backend developer with cloud experience"
  },
  {
    "position_title": "Frontend Developer",
    "quantity": 1,
    "experience_years": 3,
    "skills": [
      {"name": "React", "min_years": 2, "required": true},
      {"name": "TypeScript", "min_years": 2, "required": true}
    ]
  }
]'></textarea>
    </div>
    <button class="btn" onclick="createRequirement()">Create Requirement</button>
  `;
  showModal(body, 'Create Requirement Request');
}

async function createRequirement() {
  const positions = JSON.parse(document.getElementById('req-positions').value || '[]');
  await api('/api/requirements', 'POST', {
    title: document.getElementById('req-title').value,
    customer_name: document.getElementById('req-customer').value,
    description: document.getElementById('req-desc').value,
    requirements: positions
  });
  closeModal();
  toast('Requirement created');
  loadRequirements();
}

async function viewRequirement(id) {
  const data = await api('/api/requirements/' + id);
  const positions = data.requirements || [];
  const body = `
    <h2>${data.title}</h2>
    ${data.customer_name ? '<p class="text-muted">Customer: ' + data.customer_name + '</p>' : ''}
    ${data.description ? '<p class="mt-8">' + data.description + '</p>' : ''}
    <h3 style="margin-top:20px">Positions (${positions.length})</h3>
    ${positions.map((p, i) => `
      <div class="req-position mt-16">
        <strong>${p.position_title || 'Position ' + (i+1)}</strong>
        ${p.quantity ? '<span class="badge badge-blue">Qty: ' + p.quantity + '</span>' : ''}
        ${p.experience_years ? '<span class="badge badge-orange">Min ' + p.experience_years + ' yrs</span>' : ''}
        ${p.description ? '<p class="text-sm mt-8">' + p.description + '</p>' : ''}
        ${(p.skills || []).map(s => `
          <div class="text-sm" style="margin:4px 0">
            ${s.required ? '🔒' : '⚪'} ${s.name} ${s.min_years ? '(min ' + s.min_years + ' yrs)' : ''}
          </div>
        `).join('')}
      </div>
    `).join('')}
    ${data.generated_cvs && data.generated_cvs.length ? `
      <h3 style="margin-top:20px">Generated CVs (${data.generated_cvs.length})</h3>
      ${data.generated_cvs.map(g => `
        <div class="skill-row">
          <span>${g.position_title || 'N/A'} — ${g.first_name || ''} ${g.last_name || ''}</span>
          <span class="badge badge-${g.status === 'approved' ? 'green' : g.status === 'draft' ? 'orange' : 'red'}">${g.status}</span>
        </div>
      `).join('')}
    ` : ''}
  `;
  showModal(body, 'Requirement Details');
}

async function matchRequirement(id) {
  const list = document.getElementById('requirements-list');
  // Show loading
  const oldHTML = list.innerHTML;
  list.innerHTML = '<div class="loading"><span class="spinner"></span> Matching candidates with AI... this may take a while</div>';
  
  try {
    const data = await api('/api/requirements/' + id + '/match', 'POST', {});
    const results = data.matches.filter(m => !m.error);
    results.sort((a, b) => (b.match_score || 0) - (a.match_score || 0));
    
    const body = `
      <h2>Match Results</h2>
      <p class="text-muted">${results.length} candidates matched</p>
      <div style="margin-top:16px">
        ${results.map(m => `
          <div class="match-item">
            <div>
              <strong>${m.candidate_name || 'Unknown'}</strong>
              <div class="text-sm text-muted">${m.position_title || ''}</div>
              <div class="text-sm">
                Match: ${m.matching_skills?.join(', ') || 'none'} | 
                Missing: ${m.missing_skills?.join(', ') || 'none'}
              </div>
              <div class="text-sm text-muted mt-8">${m.reasoning || ''}</div>
            </div>
            <div class="match-score" style="color: ${m.match_score >= 70 ? 'var(--green)' : m.match_score >= 40 ? 'var(--orange)' : 'var(--red)'}">${m.match_score || 0}%</div>
          </div>
        `).join('')}
      </div>
    `;
    showModal(body, 'Match Results');
    list.innerHTML = oldHTML;
  } catch(e) {
    list.innerHTML = oldHTML;
    toast('Match failed: ' + e.message, 'error');
  }
}

async function generateForRequirement(id) {
  if (!confirm('Generate tailored CVs for all parsed candidates? This may take several minutes.')) return;
  const list = document.getElementById('requirements-list');
  const oldHTML = list.innerHTML;
  list.innerHTML = '<div class="loading"><span class="spinner"></span> Generating CVs with AI... this may take several minutes</div>';
  
  try {
    const data = await api('/api/requirements/' + id + '/generate', 'POST', {});
    closeModal();
    list.innerHTML = oldHTML;
    toast(`Generated ${data.generated.length} CVs`);
    loadGeneratedCVs();
    document.querySelector('[data-page="generated"]').click();
  } catch(e) {
    list.innerHTML = oldHTML;
    toast('Generation failed: ' + e.message, 'error');
  }
}

async function deleteRequirement(id) {
  if (!confirm('Delete this requirement and all generated CVs?')) return;
  await api('/api/requirements/' + id, 'DELETE');
  toast('Requirement deleted');
  loadRequirements();
}

// ============================================================
// GENERATED CVs
// ============================================================
async function loadGeneratedCVs() {
  const data = await api('/api/generated-cvs');
  const list = document.getElementById('generated-list');
  if (!data.generated_cvs.length) {
    list.innerHTML = '<p class="text-muted">No generated CVs yet. Match and generate from a requirement request.</p>';
    return;
  }
  list.innerHTML = data.generated_cvs.map(g => `
    <div class="card">
      <div class="flex-between">
        <div>
          <strong>${g.first_name || ''} ${g.last_name || ''}</strong>
          <span class="text-muted"> · ${g.position_title || 'N/A'}</span>
          <div class="text-sm text-muted mt-8">Generated: ${formatDate(g.generation_date)} · Score: ${g.match_score || 0}%</div>
        </div>
        <div class="flex gap-8">
          <span class="badge badge-${g.status === 'approved' ? 'green' : g.status === 'draft' ? 'orange' : g.status === 'reviewed' ? 'blue' : 'red'}">${g.status}</span>
          <button class="btn btn-sm btn-outline" onclick="viewGeneratedCV('${g.id}')">View</button>
          <button class="btn btn-sm btn-danger" onclick="deleteGeneratedCV('${g.id}')">Delete</button>
        </div>
      </div>
    </div>
  `).join('');
}

async function viewGeneratedCV(id) {
  const data = await api('/api/generated-cvs/' + id);
  const content = data.edited_content || data.generated_content || '';
  const body = `
    <h2>${data.first_name || ''} ${data.last_name || ''} — ${data.position_title || ''}</h2>
    <p class="text-muted">Generated: ${formatDate(data.generation_date)} · Score: ${data.match_score || 0}% · Status: ${data.status}</p>
    ${data.match_reasoning ? '<p class="text-sm mt-8"><strong>Changes made:</strong> ' + data.match_reasoning + '</p>' : ''}
    <div class="tabs mt-16">
      <div class="tab active" onclick="switchTab(this, 'cv-preview-tab')">Preview</div>
      <div class="tab" onclick="switchTab(this, 'cv-edit-tab')">Edit</div>
    </div>
    <div id="cv-preview-tab">
      <div class="cv-preview mt-16">${content}</div>
    </div>
    <div id="cv-edit-tab" style="display:none">
      <textarea id="cv-edit-content" style="min-height:500px;font-family:monospace;font-size:13px">${content}</textarea>
      <div class="flex gap-8 mt-16">
        <button class="btn btn-green" onclick="saveGeneratedCV('${id}')">Save</button>
        <button class="btn btn-outline" onclick="downloadGenPDF('${id}')">Download PDF</button>
        <select id="cv-status-select" class="btn btn-outline">
          <option value="draft" ${data.status === 'draft' ? 'selected' : ''}>Draft</option>
          <option value="reviewed" ${data.status === 'reviewed' ? 'selected' : ''}>Reviewed</option>
          <option value="approved" ${data.status === 'approved' ? 'selected' : ''}>Approved</option>
          <option value="rejected" ${data.status === 'rejected' ? 'selected' : ''}>Rejected</option>
        </select>
      </div>
    </div>
  `;
  showModal(body, 'Generated CV', 'large');
}

function switchTab(el, tabId) {
  el.parentElement.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  el.classList.add('active');
  document.getElementById('cv-preview-tab').style.display = tabId === 'cv-preview-tab' ? 'block' : 'none';
  document.getElementById('cv-edit-tab').style.display = tabId === 'cv-edit-tab' ? 'block' : 'none';
}

async function saveGeneratedCV(id) {
  const content = document.getElementById('cv-edit-content').value;
  const status = document.getElementById('cv-status-select').value;
  await api('/api/generated-cvs/' + id, 'PUT', { edited_content: content, status });
  toast('CV saved');
  closeModal();
  loadGeneratedCVs();
}

async function deleteGeneratedCV(id) {
  if (!confirm('Delete this generated CV?')) return;
  await api('/api/generated-cvs/' + id, 'DELETE');
  toast('Generated CV deleted');
  loadGeneratedCVs();
}

async function downloadGenPDF(genId) {
  toast('Rendering PDF...');
  try {
    const result = await api('/api/generated-cvs/' + genId + '/render-pdf', 'POST');
    if (result.pdf_url) {
      window.open(result.pdf_url, '_blank');
      toast('PDF generated');
    }
  } catch(e) {
    toast('PDF render failed: ' + e.message, 'error');
  }
}

// ============================================================
// CHAT
// ============================================================
async function loadChat() {
  // Just prepare the chat interface
}

async function sendChat() {
  const input = document.getElementById('chat-input');
  const msg = input.value.trim();
  if (!msg) return;
  input.value = '';
  
  const messagesEl = document.getElementById('chat-messages');
  // Clear placeholder
  if (messagesEl.querySelector('.text-muted')) messagesEl.innerHTML = '';
  
  // Add user message
  messagesEl.innerHTML += `<div class="chat-msg user"><div class="bubble">${escapeHtml(msg)}</div></div>`;
  messagesEl.innerHTML += `<div class="chat-msg assistant" id="chat-loading"><div class="bubble loading"><span class="spinner"></span> Thinking...</div></div>`;
  messagesEl.scrollTop = messagesEl.scrollHeight;
  
  try {
    const data = await api('/api/chat', 'POST', { message: msg, conversation_id: currentChatId });
    currentChatId = data.conversation_id;
    document.getElementById('chat-loading').remove();
    messagesEl.innerHTML += `<div class="chat-msg assistant"><div class="bubble">${escapeHtml(data.response)}</div></div>`;
    messagesEl.scrollTop = messagesEl.scrollHeight;
  } catch(e) {
    document.getElementById('chat-loading').remove();
    messagesEl.innerHTML += `<div class="chat-msg assistant"><div class="bubble" style="color:var(--red)">Error: ${e.message}</div></div>`;
  }
}

document.getElementById('chat-input')?.addEventListener('keypress', e => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendChat();
  }
});

// ============================================================
// MODAL + UTILITIES
// ============================================================
function showModal(body, title, size = '') {
  const overlay = document.getElementById('modal-overlay');
  overlay.innerHTML = `
    <div class="modal" style="${size === 'large' ? 'max-width:1000px' : ''}">
      <div class="modal-header">
        <h2>${title}</h2>
        <button class="modal-close" onclick="closeModal()">&times;</button>
      </div>
      <div>${body}</div>
    </div>
  `;
  overlay.classList.add('active');
}

function closeModal() {
  document.getElementById('modal-overlay').classList.remove('active');
}

document.getElementById('modal-overlay')?.addEventListener('click', e => {
  if (e.target === document.getElementById('modal-overlay')) closeModal();
});

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function formatDate(d) {
  if (!d) return '';
  try {
    return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
  } catch { return d; }
}

// Initial load
loadDashboard();