// Öğrenme Yolu / Learning Path
function PathPage({ setPage, setModule }) {
  const data = window.APP_DATA;
  const { user, modules } = data;
  const [filter, setFilter] = useState('all');
  const t = window.t;
  const isEn = window.LANG === 'en';

  // Modüllerdeki seviye değeri TR ise TR'ye, EN ise EN'e göre filtrele
  const filtered = filter === 'all' ? modules : modules.filter(m => m.level === filter);

  const getStatus = (id) => {
    if (user.completed.includes(id)) return 'done';
    if (id === user.inProgress) return 'progress';
    if (id > user.inProgress) return 'locked';
    return 'available';
  };

  // Filtre butonlarındaki seviye etiketleri (modüldeki gerçek değerle eşleşmeli)
  const levelOptions = isEn
    ? ['all', 'Beginner', 'Intermediate', 'Advanced']
    : ['all', 'Başlangıç', 'Orta', 'İleri'];

  return (
    <div className="page fade-up">
      <div className="page-header">
        <div className="kicker">{t('path.kicker')}</div>
        <h1 className="page-title">{t('path.title_1')}<br/>{t('path.title_2')}</h1>
        <p className="page-sub">{t('path.lede')}</p>
      </div>

      {/* Filter tabs */}
      <div className="row" style={{ gap: 8, marginBottom: 28, flexWrap: 'wrap', alignItems: 'center' }}>
        {levelOptions.map(f => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            className="btn btn-sm"
            style={{
              background: filter === f ? 'var(--ink)' : 'transparent',
              color: filter === f ? 'var(--bg)' : 'var(--ink-2)',
              border: filter === f ? '1.5px solid var(--ink)' : '1.5px solid var(--line)',
            }}
          >
            {f === 'all' ? `${t('path.filter_all')} (${modules.length})` : f}
          </button>
        ))}
        <div style={{ flex: 1 }} />
        <span style={{ color: 'var(--ink-3)', fontSize: 13 }}>{user.completed.length}/{modules.length} {t('path.done_count')} · {isEn ? `${Math.round(user.completed.length / modules.length * 100)}%` : `%${Math.round(user.completed.length / modules.length * 100)}`}</span>
      </div>

      {/* Modules grid */}
      <div className="mod-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {filtered.map(mod => {
          const status = getStatus(mod.id);
          return (
            <ModuleCard
              key={mod.id}
              mod={mod}
              status={status}
              onClick={() => { setModule(mod.id); setPage('module'); }}
            />
          );
        })}
      </div>

      {/* Path visualization: steps */}
      <div style={{ marginTop: 56 }}>
        <div className="kicker" style={{ marginBottom: 8 }}>{t('path.section_kicker')}</div>
        <h2 className="section-title" style={{ marginBottom: 24 }}>{t('path.section_title')}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { level: isEn ? 'Beginner' : 'Başlangıç', label: t('path.level_beginner_emoji_label'), emoji: '🌱', color: 'moss', count: 3, desc: t('path.level_beginner_desc') },
            { level: isEn ? 'Intermediate' : 'Orta', label: t('path.level_intermediate_emoji_label'), emoji: '🌿', color: 'lavender', count: 6, desc: t('path.level_intermediate_desc') },
            { level: isEn ? 'Advanced' : 'İleri', label: t('path.level_advanced_emoji_label'), emoji: '🌳', color: 'coral', count: 3, desc: t('path.level_advanced_desc') },
          ].map((level, i) => {
            const levelMods = modules.filter(m => m.level === level.level);
            const done = levelMods.filter(m => user.completed.includes(m.id)).length;
            return (
              <div key={i} className="card" style={{ padding: 24, background: `linear-gradient(135deg, var(--${level.color}-soft) 0%, transparent 100%)` }}>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
                  <span style={{ fontSize: 44, transform: 'rotate(-6deg)', display: 'inline-block' }}>{level.emoji}</span>
                  <span className={`chip chip-${level.color}`}>{done}/{level.count} {t('path.done_caps')}</span>
                </div>
                <h3 style={{ fontSize: 20, marginBottom: 6 }}>{level.label}</h3>
                <p style={{ color: 'var(--ink-2)', fontSize: 13 }}>{level.desc}</p>
                <div style={{ marginTop: 14, height: 6, background: 'rgba(31,27,22,0.08)', borderRadius: 3, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${(done / level.count) * 100}%`, background: `var(--${level.color})`, borderRadius: 3 }} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.PathPage = PathPage;