// Paylaşılan UI parçaları
const { useState, useEffect, useRef, useMemo } = React;

function Icon({ name, size = 18 }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    home: <><path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z" /></>,
    map: <><path d="M9 3 3 6v15l6-3 6 3 6-3V3l-6 3z" /><path d="M9 3v15" /><path d="M15 6v15" /></>,
    book: <><path d="M4 4h7a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z" /><path d="M20 4h-3a4 4 0 0 0-4 4v12h3" /></>,
    wrench: <><path d="M14.7 6.3a4 4 0 0 0-5.7 5.3L3 17.9 6.1 21l6.3-6.1a4 4 0 0 0 5.3-5.7l-2.5 2.5-2.1-2.1z" /></>,
    trophy: <><path d="M8 21h8M12 17v4M7 4h10v5a5 5 0 1 1-10 0z" /><path d="M7 4H4v3a4 4 0 0 0 4 4M17 4h3v3a4 4 0 0 1-4 4" /></>,
    user: <><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></>,
    play: <><polygon points="6,4 20,12 6,20" /></>,
    check: <><polyline points="20 6 9 17 4 12" /></>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 16 14" /></>,
    spark: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" /></>,
    menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    close: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    flame: <><path d="M12 2s4 4 4 8a4 4 0 0 1-8 0c0-2 1-3 1-4-2 1-4 4-4 8a7 7 0 1 0 14 0c0-5-7-12-7-12z"/></>,
    star: <><polygon points="12 2 15 9 22 10 17 15 18 22 12 19 6 22 7 15 2 10 9 9"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.36.13.68.34.93.61a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    send: <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
    sparkle: <><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5zM19 14l.8 2.4L22 17l-2.2.6L19 20l-.8-2.4L16 17l2.2-.6zM5 14l.6 1.9L7.5 16.5l-1.9.6L5 19l-.6-1.9L2.5 16.5l1.9-.6z"/></>,
    restart: <><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><polyline points="3 3 3 8 8 8"/></>,
    write: <><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
    list: <><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></>,
    moon: <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></>,
    chart: <><line x1="3" y1="20" x2="21" y2="20"/><polyline points="5 17 9 12 13 14 19 6"/></>,
    zap: <><polygon points="13 2 3 14 12 14 11 22 21 10 12 10"/></>,
    message: <><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></>,
  };
  return <svg {...common}>{paths[name]}</svg>;
}

function Topbar({ currentPage, setPage, progress, userMenu }) {
  const totalModules = (window.APP_DATA && window.APP_DATA.modules && window.APP_DATA.modules.length) || 12;
  const pct = Math.round((progress / totalModules) * 100);
  const t = window.t;
  const tabs = [
    { id: "home", label: t("nav.home"), icon: "home" },
    { id: "path", label: t("nav.path"), icon: "map" },
    { id: "tools", label: t("nav.tools"), icon: "wrench" },
    { id: "news", label: window.LANG === 'en' ? "What's new" : "Yenilikler", icon: "spark" },
    { id: "profile", label: t("nav.profile"), icon: "chart" },
    { id: "credits", label: t("nav.credits"), icon: "user" },
  ];
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <div className="brand">
          <div className="brand-mark" />
          <div>
            <div style={{ lineHeight: 1 }}>{t("app.brand")}</div>
            <div style={{ fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', marginTop: 2, fontWeight: 500 }}>{t("app.brand_sub")}</div>
          </div>
        </div>
        <nav className="nav">
          {tabs.map(tab => (
            <button key={tab.id} className={"nav-btn " + (currentPage === tab.id ? "active" : "")} onClick={() => setPage(tab.id)}>
              {tab.label}
            </button>
          ))}
        </nav>
        <div className="topbar-right">
          <div className="progress-pill" title={t("topbar.progress_title")}>
            <Icon name="trophy" size={14} />
            <span>{progress}/{totalModules}</span>
            <div className="progress-pill-bar"><div style={{ width: pct + "%" }} /></div>
            <div className="progress-pill-badge">{pct}%</div>
          </div>
          <button
            onClick={() => window.I18N.toggleLang()}
            title={window.LANG === 'tr' ? 'Switch to English' : 'Türkçeye geç'}
            style={{
              border: '1.5px solid var(--line)',
              background: 'var(--bg-elevated)',
              color: 'var(--ink-2)',
              fontSize: 12,
              fontWeight: 700,
              fontFamily: 'var(--font-mono)',
              letterSpacing: '0.06em',
              padding: '6px 10px',
              borderRadius: 8,
              cursor: 'pointer',
              transition: 'all 0.15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--ink)'; e.currentTarget.style.color = 'var(--ink)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.color = 'var(--ink-2)'; }}
          >
            {t("topbar.lang_switch")}
          </button>
          <div className="row" style={{ gap: 8 }}>
            {userMenu || <div className="avatar">{(window.APP_DATA && window.APP_DATA.user && window.APP_DATA.user.initials) || '··'}</div>}
          </div>
        </div>
      </div>
    </header>
  );
}

// Reusable mod-card used on home and path
function ModuleCard({ mod, status, onClick, progress = 0, compact = false }) {
  const colorMap = {
    moss: ['#4F9D52', '#D9EDCF'],
    sun: ['#F2A63B', '#FCE4BD'],
    coral: ['#E86A4F', '#F9D4C6'],
    lavender: ['#8A7AD1', '#DED7F3'],
    sky: ['#5CA5C7', '#CDE4EE'],
    rose: ['#D6739A', '#F3D5E1'],
  };
  const [main, soft] = colorMap[mod.color];
  return (
    <div
      className="mod-card"
      onClick={onClick}
      style={{
        background: 'var(--bg-elevated)',
        borderRadius: 'var(--r-lg)',
        border: '1px solid var(--line)',
        overflow: 'hidden',
        cursor: 'pointer',
        transition: 'transform 0.18s, box-shadow 0.18s',
        display: 'flex',
        flexDirection: 'column',
        minHeight: compact ? 0 : 280,
        boxShadow: 'var(--shadow-sm)',
        position: 'relative',
      }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}
    >
      <div className="mod-cover" style={{
        background: `linear-gradient(135deg, ${soft} 0%, ${main}55 100%)`,
        minHeight: compact ? 140 : 160,
      }}>
        <span className="emoji">{mod.emoji}</span>
        {status === 'done' && (
          <div style={{ position: 'absolute', top: 12, right: 12, background: '#fff', borderRadius: 999, width: 30, height: 30, display: 'grid', placeItems: 'center', color: main, boxShadow: 'var(--shadow-sm)' }}>
            <Icon name="check" size={16} />
          </div>
        )}
        {status === 'locked' && (
          <div style={{ position: 'absolute', top: 12, right: 12, background: 'rgba(255,255,255,0.9)', borderRadius: 999, width: 30, height: 30, display: 'grid', placeItems: 'center', color: 'var(--ink-3)' }}>
            <Icon name="lock" size={14} />
          </div>
        )}
        <div style={{ position: 'absolute', top: 12, left: 12 }}>
          <span className="chip" style={{ background: 'rgba(255,255,255,0.75)', backdropFilter: 'blur(8px)', color: 'var(--ink-2)', fontSize: 11 }}>
            {window.t('common.module')} {String(mod.id + 1).padStart(2, '0')} · {mod.level}
          </span>
        </div>
      </div>
      <div className="mod-body" style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        <h3 style={{ fontSize: 18, lineHeight: 1.15 }}>{mod.title}</h3>
        <p style={{ color: 'var(--ink-3)', fontSize: 13, lineHeight: 1.45 }}>{mod.subtitle}</p>
        <div style={{ flex: 1 }} />
        <div className="row" style={{ gap: 10, fontSize: 12, color: 'var(--ink-3)', fontWeight: 500 }}>
          <span className="row" style={{ gap: 4 }}><Icon name="clock" size={13} />{mod.duration}</span>
          <span>·</span>
          <span>{mod.lessons} {window.t('common.lessons')}</span>
        </div>
        {status === 'progress' && progress > 0 && (
          <div style={{ marginTop: 6 }}>
            <div style={{ height: 5, borderRadius: 3, background: 'var(--bg-soft)', overflow: 'hidden' }}>
              <div style={{ height: '100%', width: progress + '%', background: main, borderRadius: 3 }} />
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>{window.LANG === 'en' ? `${progress}% COMPLETE` : `%${progress} TAMAMLANDI`}</div>
          </div>
        )}
        {status === 'progress' && !progress && (
          <div style={{ marginTop: 6, fontSize: 11, color: main, fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{window.t('card.starting_soon')}</div>
        )}
      </div>
    </div>
  );
}

window.Icon = Icon;
window.Topbar = Topbar;
window.ModuleCard = ModuleCard;