/* Exam detail page (exam-N.html) — English UI */

const ExamDetail = ({ examNum, unlocked = true }) => {
  const ex = BA.EXAMS.find(e => e.num === examNum) || BA.EXAMS[0];
  const isFree = ex.num === 1;
  // Per-skill access: only Writing & Speaking are paid for exams 2+.
  // For the demo we don't have a real "plan check", so default to: paid skills locked when exam !== 1.
  const skillIsUnlocked = (key) => window.isSkillUnlocked(ex.num, key, false);

  // Demo state — Exam 1 (free) shows progress, others show "ready to start"
  const skillsState = isFree ? [
    { ...BA.SKILLS[0], status: 'done',     score: '24/30', auto: true  },
    { ...BA.SKILLS[1], status: 'done',     score: '21/29', auto: true  },
    { ...BA.SKILLS[2], status: 'progress', score: null,    auto: true  },
    { ...BA.SKILLS[3], status: 'todo',     score: null,    auto: false },
    { ...BA.SKILLS[4], status: 'todo',     score: null,    auto: false },
  ] : BA.SKILLS.map((s, i) => ({
    ...s, status: 'todo', score: null, auto: i < 3, locked: !skillIsUnlocked(s.key),
  }));

  const done = skillsState.filter(s => s.status === 'done').length;
  const pct = Math.round((done / 5) * 100);

  return (
    <section style={{ padding: '48px 0 80px', background: 'var(--bg)' }}>
      <div className="container">
        {/* Breadcrumb */}
        <div style={{ display: 'flex', gap: 8, fontSize: 13.5, color: 'var(--ink-muted)', marginBottom: 28 }}>
          <a href="#/" style={{ color: 'var(--navy-700)' }}>Inicio</a>
          <span>·</span>
          <a href="#/#examenes" style={{ color: 'var(--navy-700)' }}>Exámenes</a>
          <span>·</span>
          <span>{ex.name}</span>
        </div>

        {/* Top */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'start' }} className="exam-top">
          <div>
            <div className="eyebrow">
              <span className="dot"></span>
              {ex.name}
              {isFree && <span style={{ marginLeft: 8, color: 'var(--success)' }}>· Free</span>}
            </div>
            <h1 className="h-display" style={{ marginTop: 16, fontSize: 'clamp(34px, 4.5vw, 52px)' }}>
              {ex.name} <em>—</em> Aptis General Practice Test
            </h1>
            <p className="lead">
              Full simulation with the five Aptis General skills. Take the parts in any order you
              like — your progress saves automatically. Recommended total time: 2 h 30 min.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 24 }}>
              <a className="btn btn-primary btn-lg" href={`#/test/${ex.num}?skill=gv`}>
                Start with Grammar &amp; Vocabulary
                <Icon name="arrow" size={16} />
              </a>
              <a className="btn btn-outline btn-lg" href="#/account">
                View my results
              </a>
            </div>
            <div className="trust-row">
              <div className="trust-chip"><Icon name="clock" size={15} /> 2 h 30 min total</div>
              <div className="trust-chip"><Icon name="target" size={15} /> CEFR A1–C1</div>
              <div className="trust-chip"><Icon name="shield" size={15} /> Progress saved</div>
              {isFree && (
                <div className="trust-chip" style={{ color: 'var(--success)', fontWeight: 600 }}>
                  <Icon name="unlock" size={15} /> No expiration
                </div>
              )}
            </div>
          </div>

          {/* Progress card */}
          <div style={{
            background: 'var(--navy-800)', color: '#fff',
            padding: 28, borderRadius: 20, boxShadow: 'var(--shadow-lg)'
          }}>
            <div style={{ fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>
              {isFree ? 'Free exam · No expiration' : 'Your progress'}
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontSize: 64, lineHeight: 1, letterSpacing: '-0.02em' }}>{pct}</span>
              <span style={{ fontSize: 22, color: 'rgba(255,255,255,0.5)' }}>%</span>
              <span style={{ marginLeft: 'auto', fontSize: 13, color: 'rgba(255,255,255,0.65)' }}>
                {done} of 5 skills
              </span>
            </div>
            <div style={{ height: 6, background: 'rgba(255,255,255,0.12)', borderRadius: 999, marginTop: 14, overflow: 'hidden' }}>
              <div style={{ width: `${pct}%`, height: '100%', background: 'var(--accent)', borderRadius: 999 }}></div>
            </div>
            <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', marginTop: 24, paddingTop: 20, fontSize: 13.5 }}>
              {isFree ? (
                <>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                    <span style={{ color: 'rgba(255,255,255,0.65)' }}>Status</span>
                    <span style={{ fontWeight: 600, color: 'var(--success)' }}>Free · Always available</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                    <span style={{ color: 'rgba(255,255,255,0.65)' }}>Started</span>
                    <span style={{ fontWeight: 600 }}>12 Mar 2026</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ color: 'rgba(255,255,255,0.65)' }}>Expires</span>
                    <span style={{ fontWeight: 600, color: 'var(--success)' }}>Never · Free exam</span>
                  </div>
                </>
              ) : (
                <>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                    <span style={{ color: 'rgba(255,255,255,0.65)' }}>Purchased</span>
                    <span style={{ fontWeight: 600 }}>12 Mar 2026</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                    <span style={{ color: 'rgba(255,255,255,0.65)' }}>Last activity</span>
                    <span style={{ fontWeight: 600 }}>—</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ color: 'rgba(255,255,255,0.65)' }}>Expires</span>
                    <span style={{ fontWeight: 600, color: 'var(--accent)' }}>10 Jun 2026 · 86 days left</span>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>

        {/* Skills */}
        <div style={{ marginTop: 64 }}>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: '0 0 8px', letterSpacing: '-0.015em' }}>
            Exam sections
          </h2>
          <p style={{ color: 'var(--ink-muted)', margin: '0 0 24px', fontSize: 14.5 }}>
            Take them in any order. Each section saves automatically when you submit.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
            {skillsState.map((s, i) => {
              const ic = SkillIconForKey(s.key);
              return (
                <div key={s.key} style={{
                  background: '#fff', border: '1px solid var(--line)', borderRadius: 16,
                  padding: 22, display: 'flex', flexDirection: 'column', gap: 14,
                  position: 'relative', boxShadow: 'var(--shadow-sm)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{
                      width: 42, height: 42, borderRadius: 10,
                      background: 'var(--accent-soft)', color: 'var(--accent-strong)',
                      display: 'grid', placeItems: 'center'
                    }}>
                      <Icon name={ic} size={20} />
                    </div>
                    <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
                      textTransform: 'uppercase', color: 'var(--ink-muted)' }}>
                      Section {i + 1}
                    </span>
                  </div>
                  <div>
                    <div style={{ fontSize: 17, fontWeight: 700, marginBottom: 2, letterSpacing: '-0.01em' }}>
                      {s.name}
                    </div>
                    <div style={{ fontSize: 13.5, color: 'var(--ink-muted)' }}>
                      {s.meta}
                    </div>
                  </div>

                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    paddingTop: 14, borderTop: '1px solid var(--line-soft)' }}>
                    <div style={{ fontSize: 13 }}>
                      {s.status === 'done' && (
                        <span style={{ color: 'var(--success)', fontWeight: 600 }}>
                          <Icon name="check" size={13} style={{ verticalAlign: '-2px', marginRight: 4 }} />
                          Completed · {s.score}
                        </span>
                      )}
                      {s.status === 'progress' && (
                        <span style={{ color: 'var(--accent-strong)', fontWeight: 600 }}>
                          In progress
                        </span>
                      )}
                      {s.status === 'todo' && (
                        <span style={{ color: 'var(--ink-muted)' }}>Not started</span>
                      )}
                    </div>
                    <a className="btn btn-sm btn-dark" href={`#/test/${ex.num}?skill=${s.key}`}>
                      {s.status === 'done' ? 'Review' : s.status === 'progress' ? 'Continue' : 'Start'}
                      <Icon name="arrow" size={12} />
                    </a>
                  </div>

                  {!s.auto && (
                    <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', borderTop: '1px dashed var(--line)',
                      paddingTop: 10, marginTop: -4 }}>
                      Human marking · response in 24 h
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* Tips */}
        <div style={{
          marginTop: 56, padding: 28, background: 'var(--bg-warm)',
          border: '1px solid var(--line)', borderRadius: 16,
          display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 32
        }} className="tips-grid">
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12,
              fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent-strong)' }}>
              <Icon name="sparkle" size={14} /> Tip
            </div>
            <h3 style={{ fontSize: 22, margin: '8px 0 0', letterSpacing: '-0.015em' }}>
              How to get the most out of this simulation
            </h3>
          </div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14.5 }}>
            <li style={{ display: 'flex', gap: 10 }}>
              <Icon name="check" size={16} style={{ color: 'var(--accent)', flex: '0 0 auto', marginTop: 3 }} />
              Try to do all sections in a single sitting — it simulates real exam conditions.
            </li>
            <li style={{ display: 'flex', gap: 10 }}>
              <Icon name="check" size={16} style={{ color: 'var(--accent)', flex: '0 0 auto', marginTop: 3 }} />
              For Listening, play each audio a maximum of twice. Don't read the questions until after the first listen.
            </li>
            <li style={{ display: 'flex', gap: 10 }}>
              <Icon name="check" size={16} style={{ color: 'var(--accent)', flex: '0 0 auto', marginTop: 3 }} />
              In Writing, respect the word limits — length counts as much as content.
            </li>
            <li style={{ display: 'flex', gap: 10 }}>
              <Icon name="check" size={16} style={{ color: 'var(--accent)', flex: '0 0 auto', marginTop: 3 }} />
              In Speaking, speak naturally. Clear, direct answers beat long answers full of hesitations.
            </li>
          </ul>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .exam-top { grid-template-columns: 1fr !important; }
          .tips-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
        }
      `}</style>
    </section>
  );
};

window.ExamDetail = ExamDetail;
