const DashboardScreen = ({ state }) => {
  const { character, skills, projects, achievements, user } = state;

  const activeTasks = projects.flatMap(p =>
    p.tasks.filter(t => !t.done).map(t => ({ ...t, pName: p.name, pColor: p.color }))
  ).slice(0, 5);

  const recentBadges = achievements.filter(a => a.earned).slice(0, 3);
  const RC = { common:'#777', uncommon:'#34d399', rare:'#60a5fa', epic:'#a78bfa', legendary:'var(--accent)' };

  // Premium card style
  const card = (extra = {}) => ({
    background: '#0d0d14',
    borderTop: '1px solid rgba(255,255,255,.09)',
    borderRight: '1px solid rgba(255,255,255,.05)',
    borderBottom: '1px solid rgba(255,255,255,.05)',
    borderLeft: '1px solid rgba(255,255,255,.05)',
    borderRadius: 4, padding: 22, ...extra
  });

  const syncLabel = user?.googleConnected
    ? `⟳ Google 同期済み · たった今`
    : '— ローカルモード';

  return (
    <div style={{ padding: '28px 28px', maxWidth: 1060, margin: '0 auto' }}>
      {/* Page header */}
      <div style={{ marginBottom: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <SLabel>ダッシュボード</SLabel>
          <h1 style={{ margin: 0, fontFamily: "'Exo 2',sans-serif", fontSize: 26, fontWeight: 900, color: '#f0f0f2',
            letterSpacing: -.3 }}>
            おかえり、<span style={{ color: 'var(--accent)' }}>{character.name}</span>
          </h1>
        </div>
        {/* Sync badge */}
        <div style={{ fontSize: 11, color: '#606074', fontFamily: "'Exo 2',sans-serif", letterSpacing: .5,
          background: '#0d0d14', border: '1px solid rgba(255,255,255,.05)', borderRadius: 3, padding: '6px 12px' }}>
          {syncLabel}
        </div>
      </div>

      {/* Top row */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12, marginBottom: 12 }}>

        {/* Character card */}
        <div style={{ ...card(), position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(145deg, #0f0e0b, #0e0b07)',
          borderTop: '1px solid rgba(245,158,11,.22)' }}>
          <Corners color="rgba(245,158,11,.25)" sz={12} />
          {/* Ambient glow */}
          <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(245,158,11,.06) 0%, transparent 70%)', pointerEvents: 'none' }} />

          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18 }}>
            {/* Avatar */}
            <div style={{ width: 52, height: 52, borderRadius: 6, background: user?.avatarColor || 'var(--accent)',
              border: '1.5px solid rgba(255,255,255,.12)', flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: "'Exo 2',sans-serif", fontSize: 22, fontWeight: 900, color: '#fff' }}>
              {character.name[0]}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: "'Exo 2',sans-serif", fontWeight: 900, fontSize: 17, color: '#f0f0f2', letterSpacing: -.2 }}>
                {character.name}
              </div>
              <div style={{ fontSize: 11, color: 'rgba(245,158,11,.55)', marginTop: 3, letterSpacing: .5 }}>
                {character.title}
              </div>
              {user?.googleConnected && (
                <div style={{ fontSize: 10, color: '#606074', marginTop: 3 }}>
                  {user.email}
                </div>
              )}
            </div>
            <LevelBadge level={character.level} size="md" />
          </div>
          <XPBar xp={character.xp} xpToNext={character.xpToNext} showLabel={true} height={7} />
        </div>

        {/* Streak */}
        <div style={{ ...card(), display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
          <div style={{ fontSize: 30, lineHeight: 1, marginBottom: 6, filter: 'drop-shadow(0 0 10px rgba(239,68,68,.5))' }}>⚡</div>
          <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 44, fontWeight: 900, color: '#f0f0f2', lineHeight: 1 }}>{character.streak}</div>
          <div style={{ fontSize: 10, color: '#606074', marginTop: 6, letterSpacing: 1.5, fontFamily: "'Exo 2',sans-serif", textTransform: 'uppercase' }}>日連続</div>
        </div>

        {/* Skill points */}
        <div style={{ ...card(), display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
          <div style={{ fontSize: 26, lineHeight: 1, marginBottom: 6, color: '#a78bfa',
            filter: 'drop-shadow(0 0 10px rgba(167,139,250,.4))' }}>✦</div>
          <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 44, fontWeight: 900, color: '#f0f0f2', lineHeight: 1 }}>{character.skillPoints}</div>
          <div style={{ fontSize: 10, color: '#606074', marginTop: 6, letterSpacing: 1.5, fontFamily: "'Exo 2',sans-serif", textTransform: 'uppercase' }}>ポイント</div>
        </div>
      </div>

      {/* Bottom row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 12 }}>

        {/* Active quests */}
        <div style={card()}>
          <SLabel>アクティブクエスト — {activeTasks.length}件</SLabel>
          {activeTasks.length === 0 && (
            <div style={{ color: '#474758', fontSize: 13, textAlign: 'center', padding: '28px 0',
              fontFamily: "'Exo 2',sans-serif", letterSpacing: 1 }}>全クエスト完了 ✦</div>
          )}
          {activeTasks.map((task, i) => (
            <div key={task.id} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0',
              borderBottom: i < activeTasks.length - 1 ? '1px solid rgba(255,255,255,.04)' : 'none'
            }}>
              <div style={{ width: 2, height: 32, background: task.pColor, borderRadius: 2, flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, color: '#d0d0d8', marginBottom: 5,
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{task.name}</div>
                <div style={{ display: 'flex', gap: 7, alignItems: 'center' }}>
                  <SkillTag skillId={task.skillId} skills={skills} />
                  <Stars n={task.difficulty} />
                  {task.due && <span style={{ fontSize: 10, color: '#606074' }}>{task.due}</span>}
                </div>
              </div>
              <div style={{ textAlign: 'right', flexShrink: 0 }}>
                <div style={{ fontFamily: "'Exo 2',sans-serif", fontWeight: 900, fontSize: 13, color: 'var(--accent)' }}>+{task.xp}</div>
                <div style={{ fontSize: 9, color: '#606074', letterSpacing: 1 }}>XP</div>
              </div>
            </div>
          ))}
        </div>

        {/* Right column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {/* Skills */}
          <div style={card()}>
            <SLabel>スキル概要</SLabel>
            {skills.map(skill => (
              <div key={skill.id} style={{ marginBottom: 13 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
                  <span style={{ fontSize: 12, color: '#aaa' }}>{skill.name}</span>
                  <span style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 11, color: skill.color, fontWeight: 800 }}>Lv.{skill.level}</span>
                </div>
                <XPBar xp={skill.xp} xpToNext={skill.xpToNext} color={skill.color} height={4} />
              </div>
            ))}
          </div>

          {/* Recent badges */}
          <div style={card()}>
            <SLabel>最近の実績</SLabel>
            {recentBadges.map(a => (
              <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                <span style={{ fontSize: 16, color: RC[a.rarity], lineHeight: 1 }}>{a.sym}</span>
                <div>
                  <div style={{ fontSize: 12, color: '#bbb' }}>{a.name}</div>
                  <div style={{ fontSize: 10, color: '#606074', marginTop: 1 }}>{a.date}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { DashboardScreen });