const { useMemo, useState } = React;

const resumeData = {
  profile: {
    name: "Kyle Talley",
    title: "Cybersecurity Student | Systems & Network Security Enthusiast",
    location: "Livermore, CA 94550",
    phone: "(925) 321-5608",
    email: "kyletalley@me.com",
    linkedin: "https://linkedin.com/in/kyledtalley",
    github: "https://github.com/kyledtalley",
    website: "https://kyletalley.com",
    summary:
      "Cybersecurity-focused student building strong foundations in network defense, secure systems, and practical tooling. Interested in contributing to mission-critical environments with high standards for reliability and security.",
  },
  education: [
    {
      school: "Las Positas College",
      location: "Livermore, CA",
      program: "Associate of Science in Cybersecurity and Network Administration",
      dates: "Expected May 2027",
      highlights: [
        "Planning transfer to complete a Bachelor's in Cybersecurity, followed by a Master's degree.",
      ],
    },
    {
      school: "Colorado Technical University",
      location: "Online",
      program: "Software Development Certification",
      dates: "Aug 2023 - Apr 2024",
      highlights: [
        "Graduated with 4.0 GPA-equivalent Black Belt distinction.",
        "Selected to present final team project at keystone presentation.",
      ],
    },
  ],
  skills: {
    "Languages & Development": ["Python", "JavaScript", "Java", "C", "C++", "MERN Stack"],
    "Security & Networking": ["Linux Administration", "Wireshark", "Nmap", "Burp Suite"],
  },
  milestones: [
    {
      title: "High School",
      org: "Livermore High School",
      location: "Livermore, CA",
      dates: "2015",
      startTag: "2012",
      endTag: "2015",
      startColor: "flow-1",
      endColor: "flow-1",
      bullets: ["Completed high school and prepared for college-level study."],
    },
    {
      title: "Music Major Coursework",
      org: "Las Positas Community College",
      location: "Livermore, CA",
      dates: "Fall 2015 - May 2017",
      startTag: "Fall 2015",
      endTag: "May 2017",
      startColor: "flow-1",
      endColor: "flow-2",
      bullets: [
        "Attended college as a music major and developed discipline through structured practice.",
      ],
    },
    {
      title: "Professional Audio Role",
      org: "Bankhead Theater",
      location: "Livermore, CA",
      dates: "Apr 2017 - March 2022",
      startTag: "Apr 2017",
      endTag: "March 2022",
      startColor: "flow-2",
      endColor: "flow-3",
      bullets: [
        "Collaborated with artists to play a major role in small technical teams during live events.",
        "Troubleshot and resolved technical issues in high-pressure environments, ensuring successful performances.",
        "Configured and operated complex audio systems, ensuring reliable signal flow and quality.",
        "Collaborated with clients and staff, translating technical requirements into clear setups.",
      ],
    },
    {
      title: "Self-Study in Computer Science",
      org: "Independent Study",
      location: "Remote",
      dates: "2022",
      startTag: "2022",
      endTag: "2023",
      startColor: "flow-3",
      endColor: "flow-4",
      bullets: [
        "Began focused self-study in computer science fundamentals and software development.",
      ],
    },
    {
      title: "Software Development Bootcamp",
      org: "Coding Dojo (Colorado Technical University)",
      location: "Online",
      dates: "Aug 2023 - Apr 2024",
      startTag: "Aug 2023",
      endTag: "Apr 2024",
      startColor: "flow-4",
      endColor: "flow-5",
      bullets: [
        "Completed online certification with 4.0 GPA-equivalent Black Belt distinction.",
      ],
    },
    {
      title: "Cybersecurity Summer Bootcamps",
      org: "Intensive Summer Training",
      location: "Bay Area, CA",
      dates: "Summer 2025",
      startTag: "Summer 2025",
      endTag: "Summer 2025",
      startColor: "flow-5",
      endColor: "flow-6",
      bullets: [
        "Completed four cybersecurity bootcamps and discovered long-term passion for the field.",
      ],
    },
    {
      title: "Cybersecurity Degree Path",
      org: "Las Positas College",
      location: "Livermore, CA",
      dates: "Current",
      startTag: "2025",
      endTag: "Current",
      startColor: "flow-6",
      endColor: "flow-7",
      bullets: [
        "Pursuing Associate of Science in Cybersecurity and Network Administration.",
        "Building toward transfer and advanced certifications in security and networking.",
      ],
    },
  ],
  goals: [
    "Apply cybersecurity and networking skills to national security challenges in a lab environment.",
    "Contribute to protecting U.S. infrastructure against evolving threats.",
    "Continue industry certifications, starting with CompTIA Network+.",
  ],
  certifications: [
    {
      name: "CompTIA Network+",
      status: "Earned",
      target: "Completed",
    },
    {
      name: "CompTIA Security+",
      status: "Planned",
      target: "Fall 2026",
    },
    {
      name: "eJPT v2",
      status: "Planned",
      target: "Spring 2027",
    },
    {
      name: "CompTIA Cloud+",
      status: "Future",
      target: "No set date",
    },
    {
      name: "CompTIA CySA+",
      status: "Future",
      target: "No set date",
    },
  ],
  coursework: [
    {
      term: "Fall 2025",
      code: "CNT 51",
      name: "CompTIA A+ Certification Computer Technology",
      status: "Completed",
      grade: "A",
      units: 4,
    },
    {
      term: "Fall 2025",
      code: "CIS 66",
      name: "Networking Fundamentals",
      status: "Completed",
      grade: "A",
      units: 3,
    },
    {
      term: "Spring 2026",
      code: "CNT 7501",
      name: "Ethical Hacking",
      status: "In Progress",
      grade: "A",
      units: 3,
    },
    {
      term: "Spring 2026",
      code: "CNT 69",
      name: "Network Security; CompTIA",
      status: "In Progress",
      grade: "A",
      units: 3,
    },
    {
      term: "Spring 2026",
      code: "CNT 7401",
      name: "Red Hat Linux Administration I",
      status: "In Progress",
      grade: "A",
      units: 3,
    },
    {
      term: "Summer 2026",
      code: "LLNL",
      name: "Cybersecurity Summer Internship at Lawrence Livermore National Laboratory",
      status: "Internship",
      startDate: "2026-05-18",
      endDate: "2026-08-08",
      units: 0,
    },
    {
      term: "Fall 2026",
      code: "CNT 68",
      name: "Digital Forensics Fundamentals",
      status: "Planned",
      units: 3,
    },
    {
      term: "Fall 2026",
      code: "CNT 7402",
      name: "Red Hat Linux Administration II",
      status: "Planned",
      units: 3,
    },
    {
      term: "Fall 2026",
      code: "CNT 55",
      name: "Windows Server Installation",
      status: "Planned",
      units: 3,
    },
  ],
};

function getDateProgressPercent(startDate, endDate) {
  const start = new Date(startDate).getTime();
  const end = new Date(endDate).getTime();
  const now = Date.now();
  if (now <= start) return 0;
  if (now >= end) return 100;
  const percent = ((now - start) / (end - start)) * 100;
  return Math.max(0, Math.min(100, Math.round(percent)));
}

function formatDate(dateString) {
  return new Date(`${dateString}T00:00:00`).toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

function getStatusClass(status) {
  if (status === "In Progress") return "live";
  if (status === "Planned") return "planned";
  if (status === "Internship") return "internship";
  if (status === "Completed") return "completed";
  return "";
}

function ContactLinks({ profile }) {
  return (
    <div className="contact-grid">
      <a href={`mailto:${profile.email}`}>{profile.email}</a>
      <span>{profile.phone}</span>
      <span>{profile.location}</span>
      <a href={profile.linkedin} target="_blank" rel="noreferrer">
        LinkedIn
      </a>
    </div>
  );
}

function SkillsPanel({ skills }) {
  const categories = Object.keys(skills);
  const [active, setActive] = useState(categories[0]);

  return (
    <section className="panel">
      <h2>Technical Skills</h2>
      <div className="tabs">
        {categories.map((category) => (
          <button
            key={category}
            className={`tab ${active === category ? "active" : ""}`}
            onClick={() => setActive(category)}
          >
            {category}
          </button>
        ))}
      </div>
      <div className="pill-list">
        {skills[active].map((skill) => (
          <span className="pill" key={skill}>
            {skill}
          </span>
        ))}
      </div>
    </section>
  );
}

function MilestonesPanel({ milestones }) {
  const [openIndex, setOpenIndex] = useState(0);

  return (
    <section className="panel">
      <h2>Journey Into Cybersecurity</h2>
      {milestones.map((item, idx) => (
        <article className="accordion-item" key={`${item.org}-${item.dates}`}>
          <button
            className="accordion-trigger"
            onClick={() => setOpenIndex(openIndex === idx ? -1 : idx)}
          >
            <span>
              <strong>{item.title}</strong> - {item.org}
            </span>
            {item.startTag ? (
              <small className="milestone-dates">
                <span className={`date-token ${item.startColor}`}>{item.startTag}</span>
                {item.endTag ? <span className="date-arrow">-></span> : null}
                {item.endTag ? <span className={`date-token ${item.endColor}`}>{item.endTag}</span> : null}
              </small>
            ) : (
              <small>{item.dates}</small>
            )}
          </button>
          {openIndex === idx && (
            <>
              <p className="muted milestone-meta">{item.location}</p>
              <ul className="detail-list">
                {item.bullets.map((detail) => (
                  <li key={detail}>{detail}</li>
                ))}
              </ul>
            </>
          )}
        </article>
      ))}
    </section>
  );
}

function CourseworkPanel({ coursework }) {
  const [statusFilter, setStatusFilter] = useState("All");
  const statusFilters = ["All", ...new Set(coursework.map((c) => c.status))];
  const inProgressStart = "2026-01-19";
  const inProgressEnd = "2026-05-25";
  const semesterProgress = getDateProgressPercent(inProgressStart, inProgressEnd);

  const visible = useMemo(() => {
    if (statusFilter === "All") return coursework;
    return coursework.filter((c) => c.status === statusFilter);
  }, [coursework, statusFilter]);

  return (
    <section className="panel">
      <div className="row-between">
        <h2>Cybersecurity Coursework</h2>
        <div className="tabs compact">
          {statusFilters.map((filter) => (
            <button
              key={filter}
              className={`tab ${statusFilter === filter ? "active" : ""}`}
              onClick={() => setStatusFilter(filter)}
            >
              {filter}
            </button>
          ))}
        </div>
      </div>

      <div className="course-grid">
        {visible.map((course) => (
          <article className="course-card" key={`${course.term}-${course.code}`}>
            <div className="row-between">
              <strong>{course.code}</strong>
              <span className={`status ${getStatusClass(course.status)}`}>
                {course.status}
              </span>
            </div>
            <h3>{course.name}</h3>
            <p className="muted">
              {course.term} {course.units ? `| ${course.units} units` : ""}
            </p>
            {course.status === "Completed" ? (
              <div className="grade-row">
                <span>Grade: {course.grade}</span>
                <span className="completion-chip">Completed ✓</span>
              </div>
            ) : course.status === "In Progress" && course.grade ? (
              <div className="grade-row">
                <span>Current Grade: {course.grade}</span>
                <span className="progress-meta">Semester Progress: {semesterProgress}%</span>
                <div className="grade-bar">
                  <div style={{ width: `${semesterProgress}%` }} />
                </div>
              </div>
            ) : course.status === "Internship" ? (
              <div className="grade-row">
                <span className="muted">
                  Start: {formatDate(course.startDate)} | Planned End: {formatDate(course.endDate)}
                </span>
              </div>
            ) : (
              <div className="grade-row">
                <span className="muted">Grade not available yet</span>
              </div>
            )}
          </article>
        ))}
      </div>
    </section>
  );
}

function CertificationsPanel({ certifications }) {
  return (
    <section className="panel">
      <h2>Certification Roadmap</h2>
      <div className="course-grid">
        {certifications.map((cert) => (
          <article className="course-card" key={cert.name}>
            <div className="row-between">
              <strong>{cert.name}</strong>
              <span
                className={`status ${cert.status === "Earned" ? "live" : cert.status === "Planned" ? "planned" : ""
                  }`}
              >
                {cert.status}
              </span>
            </div>
            <p className="muted">Target: {cert.target}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function App() {
  const { profile, education, skills, milestones, goals, certifications, coursework } = resumeData;

  return (
    <main className="container">
      <header className="hero panel">
        <p className="eyebrow">Interactive Resume</p>
        <h1>{profile.name}</h1>
        <p className="headline">{profile.title}</p>
        <p className="summary">{profile.summary}</p>
        <ContactLinks profile={profile} />
      </header>

      <section className="panel">
        <h2>Education</h2>
        <div className="education-grid">
          {education.map((school) => (
            <article className="education-card" key={school.school}>
              <h3>{school.school}</h3>
              <p className="muted">
                {school.program} | {school.dates}
              </p>
              <p className="muted">{school.location}</p>
              <ul className="detail-list">
                {school.highlights.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </section>

      <CourseworkPanel coursework={coursework} />
      <CertificationsPanel certifications={certifications} />
      <SkillsPanel skills={skills} />
      <MilestonesPanel milestones={milestones} />

      <section className="panel">
        <h2>Goals & Motivation</h2>
        <ul className="detail-list">
          {goals.map((goal) => (
            <li key={goal}>{goal}</li>
          ))}
        </ul>
      </section>
    </main>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);