/* ============================================================
   resume_doc.jsx — сам документ резюме.
   Лист всегда белый и на светлом фоне: так он выглядит в PDF,
   который человек отправит работодателю, независимо от темы
   приложения. Никаких таблиц, рамок и колонок — их не читает ATS.
   ============================================================ */

const PAPER_W = 300; // ширина «листа» в макете, пропорция ≈ A4

function CVSection({ title, children, tight }) {
  return (
    <div style={{ marginTop: tight ? 9 : 12 }}>
      <div style={{
        fontSize: 8, fontWeight: 800, letterSpacing: '1.1px', textTransform: 'uppercase',
        color: '#8a8f9e', paddingBottom: 3, borderBottom: '1px solid #e3e6ee', marginBottom: 6,
      }}>{title}</div>
      {children}
    </div>
  );
}

/* Фото: настоящее мок-фото — так документ выглядит как готовый продукт. */
function CVPhoto({ on, src }) {
  if (!on) return null;
  return (
    <div style={{
      width: 58, height: 72, borderRadius: 4, flexShrink: 0, overflow: 'hidden',
      background: '#dfe3ee', boxShadow: 'inset 0 0 0 1px rgba(20,29,58,.12)',
    }}>
      <img src={src || 'img/cv_photo_m.jpg'} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </div>
  );
}

/*
  CVDocument — один лист.
  cv — результат buildCV(), docLang — язык документа ('en' | 'ru' | 'uz'),
  t — строки интерфейса (для русских подписей разделов).
*/
function CVDocument({ cv, docLang, t }) {
  const S = docLang === 'en'
    ? CV_EN
    : { summary: t.cv_summary, exp: t.cv_exp, skills: t.cv_skills, certs: t.cv_certs, langs: t.cv_langs, pers: t.cv_pers, ready: t.cv_ready, present: t.cv_present };

  const period = docLang === 'en'
    ? `${2026 - (cv.years || 1)} – present`
    : `${2026 - (cv.years || 1)} – ${S.present}`;

  return (
    <div style={{
      width: PAPER_W, minHeight: PAPER_W * 1.414, background: '#fff', color: '#161a26',
      padding: '20px 22px 24px', boxShadow: '0 10px 34px rgba(9,13,30,.22)', borderRadius: 3,
      fontSize: 9, lineHeight: 1.45, textAlign: 'left',
    }}>
      {/* шапка */}
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-.2px', lineHeight: 1.1 }}>{cv.name}</div>
          <div style={{ fontSize: 10, fontWeight: 700, color: '#3c4a7a', marginTop: 3 }}>{cv.title}</div>
          <div style={{ fontSize: 8, color: '#6b7186', marginTop: 5, lineHeight: 1.6 }}>
            {[cv.city, cv.age ? (docLang === 'en' ? `${cv.age} years old` : `${cv.age}`) : null, cv.phone]
              .filter(Boolean).join('  ·  ')}
          </div>
        </div>
        <CVPhoto on={cv.photo} src={cv.photoSrc} />
      </div>

      <CVSection title={S.summary}>
        <div style={{ color: '#39404f' }}>{cv.summary}</div>
      </CVSection>

      <CVSection title={S.exp}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
          <span style={{ fontWeight: 800 }}>{cv.title}</span>
          <span style={{ color: '#8a8f9e', fontSize: 8, whiteSpace: 'nowrap' }}>{period}</span>
        </div>
        <div style={{ color: '#6b7186', fontSize: 8.5, marginBottom: 4 }}>{cv.place}</div>
        <ul style={{ margin: 0, paddingLeft: 12 }}>
          {cv.bullets.map((b, i) => (
            <li key={i} style={{ marginBottom: 2.5, color: '#39404f' }}>{b}</li>
          ))}
        </ul>
      </CVSection>

      <CVSection title={S.skills} tight>
        <div style={{ color: '#39404f' }}>{cv.skills.join('  ·  ')}</div>
      </CVSection>

      {cv.certs.length > 0 && (
        <CVSection title={S.certs} tight>
          {cv.certs.map((c, i) => <div key={i} style={{ color: '#39404f' }}>— {c}</div>)}
        </CVSection>
      )}

      <CVSection title={S.langs} tight>
        {cv.langs.map((l, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', color: '#39404f' }}>
            <span>{l.name}</span><span style={{ color: '#8a8f9e' }}>{l.level}</span>
          </div>
        ))}
      </CVSection>
    </div>
  );
}

/* Лист в масштабе: высоту меряем по факту, чтобы длинный документ
   не вылезал за пределы карточки. */
function CVPaper({ cv, docLang, t, scale = 1, blurFrom = null }) {
  const inner = useRef(null);
  const [h, setH] = useState(PAPER_W * 1.414);
  useLayoutEffect(() => {
    if (inner.current) setH(inner.current.getBoundingClientRect().height / scale);
  }, [cv, docLang, scale]);
  return (
    <div style={{
      width: PAPER_W * scale, height: h * scale,
      position: 'relative', flexShrink: 0,
    }}>
      <div ref={inner} style={{ transform: `scale(${scale})`, transformOrigin: 'top left', position: 'absolute', top: 0, left: 0 }}>
        <CVDocument cv={cv} docLang={docLang} t={t} />
      </div>
      {blurFrom != null && (
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, top: `${blurFrom}%`,
          backdropFilter: 'blur(5px)', WebkitBackdropFilter: 'blur(5px)',
          background: 'linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.72) 45%)',
          borderRadius: '0 0 3px 3px', pointerEvents: 'none',
        }} />
      )}
    </div>
  );
}

Object.assign(window, { CVDocument, CVPaper, PAPER_W });