/* global React */
// CV Document — faithful, refined recreation of the Scale Nearshoring CV template.
// Renders 2 fixed pages (7.5in x 10in @ 96dpi = 720x960). Data-driven with placeholders.

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

function ph(val, placeholder) {
  // returns {text, isPlaceholder}
  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 (
    <>
      {/* ---------------- PAGE 1 ---------------- */}
      <div className="cv-page" data-screen-label="CV Page 1">
        <div className="cv-header">
          <img className="logo" src={LOGO_WHITE} alt="Scale Nearshoring" />
          <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>

        <div className="cv-cols">
          {/* sidebar */}
          <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>

          {/* main */}
          <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>
      </div>

      {/* ---------------- PAGE 2 ---------------- */}
      <div className="cv-page cv-page2" data-screen-label="CV Page 2">
        <div className="p2-band" />
        <img className="p2-logo" src={LOGO_WHITE} alt="" style={{ filter: "none" }} />
        <div className="p2-inner">
          <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 meta = [];
              if (e.responsibilities) meta.push(["Responsibilities", e.responsibilities]);
              if (e.achievements) meta.push(["Achievements / Impact", e.achievements]);
              if (e.technologies) meta.push(["Technologies & Tools", e.technologies]);
              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}
                  {meta.map(([k, v], j) => (
                    <div className="exp-meta" key={j}><span className="k">{k}:</span> {v}</div>
                  ))}
                </div>
              );
            }) : <div className="cv-empty-hint">Add your professional experience.</div>}
          </div>

          <div className="sec" style={{ marginTop: 24 }}>
            <Tab>Key Projects</Tab>
            {projects.length ? 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 className="cv-empty-hint">Highlight 1–2 standout projects.</div>}
          </div>
        </div>
      </div>
    </>
  );
}

window.CVDocument = CVDocument;