// Training modules

function TrainingPage({ persona }) {
  const [active, setActive] = React.useState(null);
  const required = TRAININGS.filter(t => t.required);
  const optional = TRAININGS.filter(t => !t.required);
  const totalProgress = Math.round(TRAININGS.reduce((a, t) => a + t.progress, 0) / TRAININGS.length);

  return (
    <div className="page fade-up">
      <div className="page-head">
        <div>
          <span className="eyebrow">Convoso University</span>
          <h1 className="page-title">Training & courses</h1>
          <p className="page-sub">Required compliance training plus optional deep-dives. Progress is saved automatically and you can resume any time.</p>
        </div>
        <div className="row">
          <button className="btn btn-ghost"><I.download size={14}/> Certificates</button>
          <button className="btn btn-primary"><I.play size={14}/> Resume training</button>
        </div>
      </div>

      <div className="train-overview card card-pad-lg">
        <div className="to-left">
          <div className="eyebrow">Overall progress</div>
          <div className="to-pct t-display">{totalProgress}<span>%</span></div>
          <div className="bar" style={{ height: 8, marginTop: 12 }}>
            <i style={{ width: totalProgress + "%" }}/>
          </div>
          <div className="muted small" style={{ marginTop: 8 }}>
            {TRAININGS.filter(t => t.progress === 100).length} completed · {TRAININGS.filter(t => t.progress > 0 && t.progress < 100).length} in progress · {TRAININGS.filter(t => t.progress === 0).length} not started
          </div>
        </div>
        <div className="to-right">
          <FeaturedTraining t={TRAININGS[1]} onStart={() => setActive(TRAININGS[1])}/>
        </div>
      </div>

      <div className="train-section">
        <div className="row" style={{ justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
          <h2 className="t-display" style={{ margin: 0, fontSize: 19, fontWeight: 700, letterSpacing: "-0.02em" }}>
            Required training
          </h2>
          <span className="muted small">Must be completed within 30 days</span>
        </div>
        <div className="train-grid">
          {required.map(t => <TrainingCard key={t.id} t={t} onStart={() => setActive(t)}/>)}
        </div>
      </div>

      <div className="train-section">
        <h2 className="t-display" style={{ margin: "0 0 14px", fontSize: 19, fontWeight: 700, letterSpacing: "-0.02em" }}>
          Recommended for you
        </h2>
        <div className="train-grid">
          {optional.map(t => <TrainingCard key={t.id} t={t} onStart={() => setActive(t)}/>)}
        </div>
      </div>

      {active && <TrainingPlayer t={active} onClose={() => setActive(null)}/>}
    </div>
  );
}

function TrainingCard({ t, onStart }) {
  const status = t.progress === 100 ? "done" : t.progress > 0 ? "in-progress" : "new";
  return (
    <div className="train-card" onClick={onStart}>
      <div className="tc-cover" style={{ background: `linear-gradient(135deg, ${t.color} 0%, color-mix(in oklab, ${t.color} 60%, #000) 100%)` }}>
        <div className="tc-cover-inner">
          <div className="tc-category">{t.category}</div>
          <div className="tc-title">{t.title}</div>
        </div>
        <div className="tc-shape" aria-hidden="true">
          <svg viewBox="0 0 80 80"><circle cx="60" cy="20" r="40" fill="rgba(255,255,255,.15)"/><circle cx="80" cy="60" r="30" fill="rgba(255,255,255,.08)"/></svg>
        </div>
        {status === "done" && <div className="tc-badge"><I.check size={12}/> Completed</div>}
      </div>
      <div className="tc-body">
        <div className="tc-meta">
          <span><I.clock size={12}/> {t.duration}</span>
          <span>·</span>
          <span>{t.lessons} lessons</span>
        </div>
        <div className="tc-instructor">
          <Avatar name={t.instructor} size="sm"/>
          <span className="muted small">{t.instructor}</span>
        </div>
        <div className="bar" style={{ height: 4, marginTop: 12 }}>
          <i style={{ width: t.progress + "%", background: t.color }}/>
        </div>
        <div className="tc-foot">
          <span className="small muted">
            {t.progress === 100 ? "Completed" : t.progress > 0 ? `${t.progress}% · resume` : "Not started"}
          </span>
          <button className="btn btn-soft btn-sm">
            {t.progress === 100 ? "Review" : t.progress > 0 ? "Resume" : "Start"} <I.arrow size={11}/>
          </button>
        </div>
      </div>
    </div>
  );
}

function FeaturedTraining({ t, onStart }) {
  return (
    <div className="featured-train">
      <div className="ft-side" style={{ background: `linear-gradient(160deg, ${t.color} 0%, color-mix(in oklab, ${t.color} 50%, #000) 100%)` }}>
        <div className="ft-play"><I.play size={26}/></div>
        <div className="ft-cat">{t.category}</div>
      </div>
      <div className="ft-body">
        <div className="eyebrow">Continue where you left off</div>
        <div className="ft-title">{t.title}</div>
        <div className="muted small">Lesson 4 of {t.lessons} · {t.instructor}</div>
        <div className="bar" style={{ height: 6, marginTop: 12 }}>
          <i style={{ width: t.progress + "%", background: t.color }}/>
        </div>
        <div className="row" style={{ marginTop: 12, gap: 8 }}>
          <button className="btn btn-primary btn-sm" onClick={onStart}><I.play size={12}/> Resume</button>
          <span className="muted small">~10 min remaining</span>
        </div>
      </div>
    </div>
  );
}

function TrainingPlayer({ t, onClose }) {
  const [lesson, setLesson] = React.useState(Math.floor(t.lessons * (t.progress / 100)) || 0);
  const lessons = Array.from({ length: t.lessons }, (_, i) => ({
    title: [
      "Introduction & welcome",
      "Why this matters at Convoso",
      "Core principles",
      "Real-world scenarios",
      "Common pitfalls to avoid",
      "Reporting & escalation",
      "Quiz: knowledge check",
      "Case study: customer story",
      "Summary & resources",
      "Final assessment",
      "Certificate of completion",
    ][i] || `Lesson ${i + 1}`,
    duration: `${4 + (i % 5)} min`,
  }));

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal player-modal" onClick={e => e.stopPropagation()}>
        <div className="player-head">
          <div>
            <div className="muted small" style={{ fontWeight: 600, textTransform: "uppercase", letterSpacing: ".06em" }}>{t.category}</div>
            <h2 style={{ margin: "4px 0 0", fontSize: 18, fontWeight: 700, letterSpacing: "-0.02em" }}>{t.title}</h2>
          </div>
          <button className="icon-btn" onClick={onClose}><I.x size={15}/></button>
        </div>
        <div className="player-body">
          <div className="player-stage" style={{ background: `linear-gradient(160deg, ${t.color} 0%, color-mix(in oklab, ${t.color} 50%, #000) 100%)` }}>
            <div className="player-stage-overlay">
              <div className="ps-cat">{t.category} · Lesson {lesson + 1}</div>
              <div className="ps-title">{lessons[lesson].title}</div>
              <button className="ps-play"><I.play size={26}/></button>
            </div>
            <div className="player-controls">
              <button className="pc-btn"><I.play size={14}/></button>
              <span className="pc-time">2:14 / {lessons[lesson].duration}</span>
              <div className="pc-bar"><div className="pc-fill" style={{ width: "32%" }}/></div>
              <span className="pc-time">1×</span>
              <button className="pc-btn">CC</button>
            </div>
          </div>
          <div className="player-side">
            <div className="ps-head">
              <strong>Course outline</strong>
              <span className="muted small">{lesson + 1} / {t.lessons}</span>
            </div>
            <div className="ps-list">
              {lessons.map((l, i) => (
                <div key={i} className={"ps-lesson " + (i === lesson ? "active" : i < lesson ? "done" : "")} onClick={() => setLesson(i)}>
                  <div className="ps-lesson-num">
                    {i < lesson ? <I.check size={11}/> : i + 1}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="ps-lesson-title">{l.title}</div>
                    <div className="muted small"><I.clock size={10}/> {l.duration}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="player-foot">
          <button className="btn btn-ghost" disabled={lesson === 0} onClick={() => setLesson(l => l - 1)}>
            <I.arrowL size={13}/> Previous
          </button>
          <span className="spacer"/>
          <button className="btn btn-soft">Mark complete</button>
          <button className="btn btn-primary" disabled={lesson === lessons.length - 1} onClick={() => setLesson(l => l + 1)}>
            Next lesson <I.arrow size={13}/>
          </button>
        </div>
      </div>
    </div>
  );
}

window.TrainingPage = TrainingPage;