/* global React */
// CV Document — Scale Nearshoring. Single continuous document (Letter, 8.5in).
// Uses a <table> whose <thead> is a blue "scale" running header that REPEATS at
// the top of every printed page (2, 3, 4…). Content flows continuously with no
// forced page breaks or gaps; the page-1 blue sidebar has a fixed height so it
// never fragments onto later pages.

const LOGO_WHITE = "assets/logo-white.png";

function ph(val, placeholder) {
  if (val && String(val).trim()) return { text: val, isPlaceholder: false };
  return { text: placeholder, isPlaceholder: true };
}

function levelLabel(p) {
  const n = Math.max(0, Math.min(100, Number(p) || 0));
  if (n <= 25) return "Basic";
  if (n <= 50) return "Medium";
  if (n <= 75) return "Full";
  return "Expert";
}

function Tab({ children }) {
  return <span className="sec-tab">{children}</span>;
}

function CVDocument({ data }) {
  const d = data || {};
  const c = d.candidate || {};
  const skills = (d.technicalKnowledge || []).filter(s => s.skillName || s.proficiency);
  const strengths = (d.strengths || []).filter(s => s.name);
  const langs = (d.languages || []).filter(l => l.language);
  const courses = (d.courses || []).filter(c2 => c2.name);
  const edu = (d.education || []).filter(e => e.degree || e.university);
  const exp = (d.experience || []).filter(e => e.company || e.jobTitle);
  const projects = (d.projects || []).filter(p => p.title);

  const name = ph(c.fullName, "Full Name");
  const title = ph(c.jobTitle, "Job Title");

  return (
    <div className="cv-doc" data-screen-label="CV">
      <table className="cv-table">
        {/* running header — repeats at the top of every printed page */}
        <thead>
          <tr><td>
            <div className="cv-runhead">
              <img className="runlogo" src={LOGO_WHITE} alt="Scale Nearshoring" />
            </div>
          </td></tr>
        </thead>
        <tbody>
          <tr><td>
            {/* hero */}
            <div className="cv-hero">
              <div className="cv-photo">
                {c.photo
                  ? <img src={c.photo} alt="" />
                  : <span className="ph-ico" aria-hidden="true">▣</span>}
              </div>
              <div className="cv-id">
                <div className={"name" + (name.isPlaceholder ? " cv-placeholder" : "")}>{name.text}</div>
                <div className={"title" + (title.isPlaceholder ? " cv-placeholder" : "")}>{title.text}</div>
              </div>
            </div>

            {/* two-column region */}
            <div className="cv-cols">
              <div className="cv-side">
                <div className="sec">
                  <Tab>Education</Tab>
                  {edu.length ? edu.map((e, i) => (
                    <div className="edu-item" key={i}>
                      <div className="edu-deg">{e.degree || "[Degree / Program]"}</div>
                      <div className="edu-uni">
                        {(e.university || "[University / Institution]")}{e.gradYear ? `, ${e.gradYear}` : ""}
                      </div>
                    </div>
                  )) : <div className="cv-empty-hint">Degree / program details</div>}
                </div>

                <div className="sec">
                  <Tab>Strengths</Tab>
                  {strengths.length ? (
                    <ul className="blist">
                      {strengths.map((s, i) => <li key={i}>{s.name}</li>)}
                    </ul>
                  ) : <div className="cv-empty-hint">Key soft skills</div>}
                </div>

                <div className="sec">
                  <Tab>Languages</Tab>
                  {langs.length ? langs.map((l, i) => (
                    <div className="lang-item" key={i}>
                      <span className="lname">{l.language}</span>
                      {l.proficiency ? <span className="llvl">{l.proficiency}</span> : null}
                    </div>
                  )) : <div className="cv-empty-hint">Spoken languages</div>}
                </div>
              </div>

              <div className="cv-main">
                <div className="sec">
                  <Tab>Professional Summary</Tab>
                  <div className={"summary" + (c.professionalSummary ? "" : " cv-placeholder")}>
                    {c.professionalSummary || "A short professional profile summary highlighting experience, focus areas and the value you bring to a team."}
                  </div>
                </div>

                <div className="sec">
                  <Tab>Courses / Certifications</Tab>
                  {courses.length ? courses.map((cr, i) => (
                    <div className="cert-item" key={i}>
                      <div className="cert-name">{cr.name}</div>
                      <div className="cert-meta">
                        {[cr.issuer, cr.year].filter(Boolean).join(" · ")}
                        {cr.credential ? <> · {/^https?:\/\//.test(cr.credential)
                          ? <a href={cr.credential}>Verify</a> : cr.credential}</> : null}
                      </div>
                    </div>
                  )) : <div className="cv-empty-hint">Relevant certifications &amp; courses</div>}
                </div>

                <div className="sec">
                  <Tab>Technical Knowledge</Tab>
                  {skills.length ? skills.map((s, i) => (
                    <div className="skill-item" key={i}>
                      <div className="skill-top">
                        <span className="skill-name">{s.skillName || "Skill"}</span>
                        <span className="skill-right">
                          {s.yearsExperience ? <span className="skill-yrs">{s.yearsExperience} yr{Number(s.yearsExperience) > 1 ? "s" : ""}</span> : null}
                          <span className="skill-level" data-lvl={levelLabel(s.proficiency)}>{levelLabel(s.proficiency)}</span>
                        </span>
                      </div>
                      {s.description ? <div className="skill-desc">{s.description}</div> : null}
                    </div>
                  )) : <div className="cv-empty-hint">Core technical skills &amp; tools</div>}
                </div>
              </div>
            </div>

            {/* full-width experience + projects (flows continuously under the header) */}
            <div className="cv-wide">
              <div className="sec">
                <Tab>Professional Experience</Tab>
                {exp.length ? exp.map((e, i) => {
                  const dates = e.isCurrent
                    ? `${e.startDate || "—"} – Present`
                    : [e.startDate, e.endDate].filter(Boolean).join(" – ");
                  const bulletsR = (Array.isArray(e.responsibilities) ? e.responsibilities : (e.responsibilities ? [e.responsibilities] : [])).filter(b => b && String(b).trim());
                  const bulletsA = (Array.isArray(e.achievements) ? e.achievements : (e.achievements ? [e.achievements] : [])).filter(b => b && String(b).trim());
                  return (
                    <div className="exp-item" key={i}>
                      <div className="exp-top">
                        <span className="exp-co">{e.company || "[Company Name]"}</span>
                        {dates ? <span className="exp-dates">{dates}</span> : null}
                      </div>
                      {e.jobTitle ? <div className="exp-role">{e.jobTitle}</div> : null}
                      {e.scope ? <div className="exp-scope">{e.scope}</div> : null}
                      {bulletsR.length ? (
                        <div className="exp-block">
                          <div className="exp-sub">Key Responsibilities</div>
                          <ul className="exp-bullets">{bulletsR.map((b, j) => <li key={j}>{b}</li>)}</ul>
                        </div>
                      ) : null}
                      {bulletsA.length ? (
                        <div className="exp-block">
                          <div className="exp-sub">Key Achievements / Impact</div>
                          <ul className="exp-bullets">{bulletsA.map((b, j) => <li key={j}>{b}</li>)}</ul>
                        </div>
                      ) : null}
                      {e.technologies ? (
                        <div className="exp-meta"><span className="k">Technologies &amp; Tools:</span> {e.technologies}</div>
                      ) : null}
                    </div>
                  );
                }) : <div className="cv-empty-hint">Add your professional experience.</div>}
              </div>

              {projects.length ? (
                <div className="sec" style={{ marginTop: 22 }}>
                  <Tab>Key Projects</Tab>
                  {projects.map((p, i) => (
                    <div className="proj-item" key={i}>
                      <div className="proj-title">{p.title}</div>
                      {p.intro ? <div className="proj-intro">{p.intro}</div> : null}
                      {p.role ? <div className="proj-row"><span className="k">Role:</span> {p.role}</div> : null}
                      {p.technologies ? <div className="proj-row"><span className="k">Technologies:</span> {p.technologies}</div> : null}
                      {p.outcome ? <div className="proj-row"><span className="k">Outcome:</span> {p.outcome}</div> : null}
                    </div>
                  ))}
                </div>
              ) : null}
            </div>
          </td></tr>
        </tbody>
      </table>
    </div>
  );
}

window.CVDocument = CVDocument;