// =============================================================
// Job Detail Panel (right-side slide-over)
// =============================================================

function DetailPanel({ job, onClose, onIgnore, onUnignore, onMarkApplied, onCoverLetter, onStatusChange, onToggleStar }) {
  const [descExpanded, setDescExpanded] = React.useState(false);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  if (!job) return null;

  return (
    <>
      <div className="detail-overlay" onClick={onClose}></div>
      <div className="detail-panel">
        <div className="detail-header">
          <div className="info">
            <div className="company-line">{job.company}</div>
            <h2>
              {job.title}
              <button className={`star-btn star-btn-lg${job.starred ? ' on' : ''}`}
                onClick={onToggleStar}
                title={job.starred ? 'Unstar' : 'Star'}
                style={{ marginLeft: 10, verticalAlign: 'middle' }}>
                {job.starred ? <Icon.starFilled /> : <Icon.star />}
              </button>
            </h2>
            <div className="meta-row">
              {job.location && <span><Icon.location /> {shortLoc(job.location)}</span>}
              {job.isRemote && <span><Icon.pin /> Remote</span>}
              {job.seniority && job.seniority !== 'Not Applicable' && (
                <span><Icon.briefcase /> {job.seniority}</span>
              )}
              {job.employment && <span>{job.employment}</span>}
              {job.salary && <span><Icon.cash /> {job.salary}</span>}
              {job.posted && <span className="mono" style={{ fontSize: 11 }}>{job.posted}</span>}
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon.close /></button>
        </div>

        <div className="detail-body">
          <div className="detail-section">
            <h3>Scores</h3>
            <div className="score-board">
              <div className="score-card">
                <div className="sc-label">CV fitness</div>
                <div className="sc-value mono">{Math.round(job.cvFitness)}<span className="of"> / 100</span></div>
                <div className="sc-bar">
                  <div className="fill" style={{ width: `${job.cvFitness}%`, background: 'var(--status-applied)' }}></div>
                </div>
              </div>
              <div className="score-card">
                <div className="sc-label">Interest match</div>
                <div className="sc-value mono">{Math.round(job.matchScore)}<span className="of"> / 100</span></div>
                <div className="sc-bar">
                  <div className="fill" style={{ width: `${job.matchScore}%`, background: 'var(--accent)' }}></div>
                </div>
              </div>
            </div>
          </div>

          {job.cvReasoning && (
            <div className="detail-section">
              <h3>CV fitness reasoning</h3>
              <div className="reasoning-block">{job.cvReasoning.trim()}</div>
            </div>
          )}

          {job.matchReasoning && (
            <div className="detail-section">
              <h3>Match reasoning</h3>
              <div className="reasoning-block">{job.matchReasoning.trim()}</div>
            </div>
          )}

          {job.coverLetter && (
            <div className="detail-section">
              <h3>Saved cover letter</h3>
              <div className="reasoning-block" style={{ fontFamily: 'inherit', fontSize: 12.5 }}>{job.coverLetter}</div>
            </div>
          )}

          {job.description && (
            <div className="detail-section">
              <h3>Full description</h3>
              <div className={`desc-block${descExpanded ? '' : ' collapsed'}`}>
                {job.description}
              </div>
              <button className="desc-toggle" onClick={() => setDescExpanded(v => !v)}>
                {descExpanded ? 'Show less ↑' : 'Show full description ↓'}
              </button>
            </div>
          )}

          <div className="detail-section">
            <h3>Workflow metadata</h3>
            <div className="reasoning-block mono" style={{ fontSize: 11, lineHeight: 1.7 }}>
              Job ID: {job.realId || job.id}{'\n'}
              Industries: {job.industries || '—'}{'\n'}
              Function: {job.function || '—'}{'\n'}
              Applicants: {job.applicants || '—'}{'\n'}
              Permanent: {job.isPermanent ? 'yes' : 'no'} · Full-time: {job.isFullTime ? 'yes' : 'no'}
            </div>
          </div>
        </div>

        <div className="detail-footer">
          <a className="btn" href={job.jobLink || '#'} target="_blank" rel="noopener noreferrer">
            <span className="linkedin-icon">in</span> Open on LinkedIn <Icon.external />
          </a>
          <div style={{ flex: 1 }}></div>
          {job.status === 'new' && (
            <>
              <button className="btn" onClick={onIgnore}><Icon.archive /> Ignore</button>
              <button className="btn accent" onClick={onCoverLetter}><Icon.letter /> Cover letter</button>
            </>
          )}
          {job.status === 'cover_letter' && (
            <button className="btn primary" onClick={onMarkApplied}><Icon.check /> Mark applied</button>
          )}
          {job.status === 'applied' && (
            <button className="btn" onClick={() => onStatusChange('interviewing')}>Move to interviewing</button>
          )}
          {job.status === 'interviewing' && (
            <>
              <button className="btn" onClick={() => onStatusChange('rejected')}>Got rejected</button>
              <button className="btn primary" onClick={() => onStatusChange('applied')}>Back to applied</button>
            </>
          )}
          {(job.status === 'ignored' || job.status === 'rejected') && (
            <button className="btn" onClick={onUnignore}>Restore to inbox</button>
          )}
        </div>
      </div>
    </>
  );
}

// =============================================================
// Workflow Status popover
// =============================================================
function WorkflowStatus({ workflow, onRefresh }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  const status = workflow.status; // 'idle' | 'running' | 'error'
  let label = `Last run · ${workflow.lastRun}`;
  if (status === 'running') label = `Running… ${workflow.progress || ''}`;
  if (status === 'error') label = `Last run failed`;

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button className={`workflow-status ${status}`} onClick={() => setOpen(v => !v)}>
        <span className="dot"></span>
        <span>n8n workflow</span>
        <span className="sep">·</span>
        <span className="when">{label}</span>
      </button>
      {open && (
        <Popover open={open} onClose={() => setOpen(false)} anchor={ref}>
          <div className="wf-popover" style={{ position: 'static', boxShadow: 'none', border: 'none', padding: 0, width: 'auto' }}>
            <h4 style={{ margin: '0 0 8px 0', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--text-faint)', fontWeight: 500 }}>
              🚧 Linkedin job matcher v2
            </h4>
            <div className="wf-row"><span className="l">Status</span>
              <span className="v" style={{ color: status === 'error' ? 'var(--bad)' : (status === 'running' ? 'var(--accent)' : 'var(--good)') }}>
                {status === 'running' ? 'running' : (status === 'error' ? 'error' : 'idle')}
              </span>
            </div>
            <div className="wf-row"><span className="l">Last completed</span><span className="v">{workflow.lastRun}</span></div>
            <div className="wf-row"><span className="l">Next scheduled</span><span className="v">tomorrow 07:00</span></div>
            <div className="wf-row"><span className="l">Jobs scraped</span><span className="v">{workflow.scraped} <span style={{ color: 'var(--text-faint)' }}>/ 24 new</span></span></div>
            <div className="wf-row"><span className="l">Scored</span><span className="v">{workflow.scored}</span></div>
            {workflow.errors > 0 && (
              <div className="wf-row"><span className="l" style={{ color: 'var(--bad)' }}>Errors</span>
                <span className="v" style={{ color: 'var(--bad)' }}>{workflow.errors}</span>
              </div>
            )}
            {workflow.lastError && (
              <div style={{
                marginTop: 8, padding: '6px 8px', borderRadius: 6,
                background: 'color-mix(in oklch, var(--bad) 10%, transparent)',
                color: 'var(--bad)', fontSize: 11, lineHeight: 1.4,
                fontFamily: 'var(--font-mono, monospace)', wordBreak: 'break-word',
              }} title={workflow.lastError}>
                {workflow.lastError}
              </div>
            )}
            <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
              <button className="btn sm" style={{ flex: 1 }} onClick={() => { onRefresh(); setOpen(false); }}>
                <Icon.refresh /> Run now
              </button>
              <button className="btn sm">View logs <Icon.external /></button>
            </div>
          </div>
        </Popover>
      )}
    </div>
  );
}

// =============================================================
// Settings Modal
// =============================================================
function SettingsModal({ open, onClose, settings, setSettings }) {
  if (!open) return null;
  const update = (k, v) => setSettings(s => ({ ...s, [k]: v }));
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>Settings</h2>
          <button className="icon-btn" onClick={onClose}><Icon.close /></button>
        </div>
        <div className="modal-body">

          <div className="settings-row">
            <label>CV Google Doc</label>
            <div className="hint">Used to compute CV fitness scores.</div>
            <div className="doc-link">
              <span className="doc-icon">D</span>
              <span className="doc-title">Stefano — CV (master)</span>
              <button className="btn ghost sm">Change</button>
              <a className="btn ghost sm" href="#"><Icon.external /></a>
            </div>
          </div>

          <div className="settings-row">
            <label>Interests &amp; preferences Doc</label>
            <div className="hint">Career direction, dealbreakers, what excites you. Drives the match score.</div>
            <div className="doc-link">
              <span className="doc-icon">D</span>
              <span className="doc-title">Job search — preferences &amp; interests</span>
              <button className="btn ghost sm">Change</button>
              <a className="btn ghost sm" href="#"><Icon.external /></a>
            </div>
          </div>

          <div className="settings-row">
            <label>Google Sheet (backend)</label>
            <div className="hint">Where jobs are stored. Read &amp; write.</div>
            <div className="doc-link">
              <span className="doc-icon" style={{ background: 'oklch(0.6 0.16 145)' }}>S</span>
              <span className="doc-title">n8n workflow Job search agent</span>
              <a className="btn ghost sm" href="#"><Icon.external /></a>
            </div>
          </div>

          <div className="settings-row">
            <label>n8n workflow</label>
            <div className="hint">Scheduled trigger fires daily; you can also run manually.</div>
            <input type="text" defaultValue="https://n8n.example.com/workflow/linkedin-job-matcher-v2" />
          </div>

          <div className="settings-row">
            <label>Gmail filter</label>
            <div className="hint">Where job alerts come from.</div>
            <input type="text" value="from:jobalerts-noreply@linkedin.com newer_than:1d"
              onChange={(e) => update('gmailFilter', e.target.value)} />
          </div>

          <div className="settings-row">
            <label>Default cover letter tone</label>
            <select value={settings.tone || 'warm-direct'} onChange={(e) => update('tone', e.target.value)}>
              <option value="warm-direct">Warm &amp; direct (default)</option>
              <option value="formal">Formal</option>
              <option value="enthusiastic">Enthusiastic</option>
              <option value="concise">Concise (under 200 words)</option>
            </select>
          </div>

        </div>
        <div className="modal-footer">
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn primary" onClick={onClose}>Save changes</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DetailPanel, WorkflowStatus, SettingsModal });