/* ============================================================
   resume_viewer.jsx — полноэкранный просмотр готового резюме.
   Лист целиком, переключатель языка документа и нижняя панель
   с файлами. PDF и Word действительно скачиваются (см.
   resume_files.jsx), Telegram — имитация.
   ============================================================ */

/* ---------- тост «файл сохранён» ---------- */
function SaveToast({ text }) {
  return (
    <div style={{
      position: 'absolute', left: 16, right: 16, bottom: 108, zIndex: 60,
      display: 'flex', alignItems: 'center', gap: 10, padding: '13px 15px',
      borderRadius: 'var(--r-lg)', background: 'var(--indigo-900)', color: '#fff',
      boxShadow: '0 14px 34px rgba(9,13,30,.45)', animation: 'fadeUp .3s var(--ease-out) both',
    }}>
      <span style={{
        width: 26, height: 26, borderRadius: '50%', flexShrink: 0, background: 'var(--good)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#04231a',
      }}><Icon name="check" size={15} stroke={3} /></span>
      <span style={{ fontSize: 13.5, fontWeight: 700, lineHeight: 1.3 }}>{text}</span>
    </div>
  );
}

/* ---------- кнопка файла ---------- */
function FileBtn({ icon, label, sub, primary, busy, onClick }) {
  return (
    <button onClick={onClick} disabled={busy} style={{
      flex: 1, minWidth: 0, height: 62, borderRadius: 'var(--r-lg)', padding: '0 4px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3,
      background: primary ? 'linear-gradient(150deg,var(--amber-soft),var(--amber))' : 'var(--surface-2)',
      color: primary ? 'var(--indigo-900)' : 'var(--text)',
      border: primary ? '1px solid transparent' : '1px solid var(--border)',
      boxShadow: primary ? '0 8px 20px var(--amber-glow)' : 'var(--shadow-1)',
      transition: 'transform .15s var(--ease)', transform: busy ? 'scale(.97)' : 'none',
    }}>
      {busy
        ? <span style={{ width: 18, height: 18, borderRadius: '50%', border: '2.4px solid rgba(0,0,0,.18)', borderTopColor: 'currentColor', animation: 'ringRotate .8s linear infinite' }} />
        : <Icon name={icon} size={19} stroke={2.2} />}
      <span style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: '-.1px' }}>{label}</span>
      {sub && <span style={{ fontSize: 9.5, fontWeight: 600, opacity: .6 }}>{sub}</span>}
    </button>
  );
}

/* ---------- сам просмотр ---------- */
function ResumeViewer({ profile, lang, rt, onClose }) {
  const [docLang, setDocLang] = useState('en');
  const [busy, setBusy] = useState(null);     // 'pdf' | 'doc' | 'tg'
  const [toast, setToast] = useState(null);
  const cv = useMemo(() => buildCV(profile, docLang), [profile, docLang]);

  const S = docLang === 'en' ? CV_EN
    : { summary: rt.cv_summary, exp: rt.cv_exp, skills: rt.cv_skills, certs: rt.cv_certs, langs: rt.cv_langs, present: rt.cv_present };

  const flash = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2600); };

  const download = async (kind) => {
    setBusy(kind);
    try {
      if (kind === 'pdf') {
        // PDF всегда на английском: базовые шрифты PDF не знают кириллицу,
        // да и работодателю нужна именно английская версия
        const blob = await buildResumePdf(buildCV(profile, 'en'));
        saveBlob(blob, cvFileName(cv, 'pdf'));
        flash(rt.savedPdf);
      } else if (kind === 'doc') {
        const blob = await buildResumeDoc(cv, S);
        saveBlob(blob, cvFileName(cv, 'doc'));
        flash(rt.savedDoc);
      } else {
        await new Promise(r => setTimeout(r, 900));
        flash(rt.sentTg);
      }
    } catch (e) {
      flash(rt.saveFailed);
    }
    setBusy(null);
  };

  // лист вписываем по ширине телефона с полями
  const SCALE = (430 - 44) / PAPER_W;

  return (
    <PhoneOverlay>
    <div style={{
      position: 'absolute', inset: 0, zIndex: 50, display: 'flex', flexDirection: 'column',
      background: 'radial-gradient(120% 80% at 50% 0%, #243066, #0a0f24 72%)',
      animation: 'scaleIn .25s var(--ease-out) both',
    }}>
      {/* шапка */}
      <div style={{ flexShrink: 0, padding: '46px 16px 12px', display: 'flex', alignItems: 'center', gap: 11 }}>
        <button onClick={onClose} style={{
          width: 38, height: 38, borderRadius: '50%', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(255,255,255,.12)', color: '#fff',
        }}><Icon name="chevDown" size={20} stroke={2.4} /></button>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 15.5, fontWeight: 800, color: '#fff', letterSpacing: '-.3px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {cvFileName(cv, docLang === 'en' ? 'pdf' : 'doc')}
          </div>
          <div style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(255,255,255,.55)', marginTop: 1 }}>
            {rt.onePage} · {rt.atsOk}
          </div>
        </div>
        <span style={{
          flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 11px', borderRadius: 99,
          background: 'rgba(47,191,143,.18)', color: '#7df0c4', fontSize: 11, fontWeight: 800,
        }}><Icon name="check" size={12} stroke={3} />ATS</span>
      </div>

      {/* переключатель языка документа */}
      <div style={{ flexShrink: 0, display: 'flex', gap: 8, padding: '0 16px 12px' }}>
        {[['en', rt.viewEn], ['ru', rt.viewRu]].map(([code, label]) => {
          const on = docLang === code;
          return (
            <button key={code} onClick={() => setDocLang(code)} style={{
              flex: 1, height: 38, borderRadius: 'var(--r-full)', fontSize: 13, fontWeight: 800,
              background: on ? '#fff' : 'rgba(255,255,255,.1)',
              color: on ? 'var(--indigo-900)' : 'rgba(255,255,255,.7)',
              transition: 'all .2s var(--ease)',
            }}>{label}</button>
          );
        })}
      </div>

      {/* лист */}
      <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '4px 22px 20px' }}>
        <div key={docLang} style={{ animation: 'fadeUp .35s var(--ease-out) both', borderRadius: 4, overflow: 'hidden', boxShadow: '0 22px 48px rgba(0,0,0,.5)' }}>
          <CVPaper cv={cv} docLang={docLang} t={rt} scale={SCALE} />
        </div>
        <div style={{ textAlign: 'center', fontSize: 11.5, color: 'rgba(255,255,255,.45)', fontWeight: 600, marginTop: 14, lineHeight: 1.4 }}>
          {rt.pdfNote}
        </div>
      </div>

      {toast && <SaveToast text={toast} />}

      {/* панель файлов */}
      <div style={{
        flexShrink: 0, padding: '12px 16px 18px', display: 'flex', gap: 9,
        background: 'rgba(10,15,36,.72)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
        borderTop: '1px solid rgba(255,255,255,.08)',
      }}>
        <FileBtn icon="doc" label="PDF" sub={rt.forEmployer} primary busy={busy === 'pdf'} onClick={() => download('pdf')} />
        <FileBtn icon="doc" label="Word" sub={rt.forEditing} busy={busy === 'doc'} onClick={() => download('doc')} />
        <FileBtn icon="send" label="Telegram" sub={rt.toSelf} busy={busy === 'tg'} onClick={() => download('tg')} />
      </div>
    </div>
    </PhoneOverlay>
  );
}

/* ---------- аккуратное превью-карточка (профиль, чат) ---------- */
function ResumePreviewCard({ profile, lang, rt, sv, onOpen, delay = 0 }) {
  const cv = useMemo(() => buildCV(profile, 'en'), [profile]);
  return (
    <button onClick={onOpen} style={{
      width: '100%', textAlign: 'left', borderRadius: 'var(--r-xl)', overflow: 'hidden', flexShrink: 0,
      background: 'linear-gradient(160deg,var(--indigo-700),var(--indigo-900))',
      boxShadow: 'var(--shadow-2)', animation: `fadeUp .5s var(--ease-out) ${delay}s both`,
      padding: '16px 16px 14px', display: 'flex', gap: 14,
    }}>
      {/* мини-лист: показываем верх документа, низ мягко растворяется */}
      <span style={{
        position: 'relative', width: 96, height: 128, borderRadius: 5, overflow: 'hidden', flexShrink: 0,
        background: '#fff', boxShadow: '0 10px 24px rgba(0,0,0,.35)',
      }}>
        <span style={{ position: 'absolute', top: 0, left: 0, transform: 'scale(.32)', transformOrigin: 'top left' }}>
          <CVDocument cv={cv} docLang="en" t={rt} />
        </span>
        <span style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 42, background: 'linear-gradient(180deg, rgba(255,255,255,0), #fff)' }} />
      </span>

      <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
          <span style={{ fontSize: 15.5, fontWeight: 800, color: '#fff', letterSpacing: '-.3px' }}>{sv.myResume}</span>
          <span style={{ padding: '2px 8px', borderRadius: 99, background: 'rgba(47,191,143,.2)', color: '#7df0c4', fontSize: 10, fontWeight: 800 }}>{sv.paid}</span>
        </span>
        <span style={{ fontSize: 12, color: 'rgba(255,255,255,.6)', marginTop: 4, lineHeight: 1.4 }}>
          {rt.twoVersions}
        </span>

        <span style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 9 }}>
          {['PDF', 'Word', rt.withPhoto].map((tag, i) => (
            <span key={i} style={{
              padding: '4px 9px', borderRadius: 99, background: 'rgba(255,255,255,.1)',
              color: 'rgba(255,255,255,.8)', fontSize: 10.5, fontWeight: 700,
            }}>{tag}</span>
          ))}
        </span>

        <span style={{
          marginTop: 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          height: 40, borderRadius: 'var(--r-md)', background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))',
          color: 'var(--indigo-900)', fontSize: 13.5, fontWeight: 800, boxShadow: '0 8px 18px var(--amber-glow)',
        }}>
          <Icon name="eye" size={16} stroke={2.2} />{rt.openAndSave}
        </span>
      </span>
    </button>
  );
}

Object.assign(window, { ResumeViewer, ResumePreviewCard });