// "Me" screen — eligibility stats, your submissions, your votes.

function Stat({ label, value, accent, dark }) {
  return (
    <div style={{
      padding: '12px 14px', borderRadius: 12,
      background: dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)',
      border: dark ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.05)',
    }}>
      <div style={{ fontSize: 10.5, opacity: 0.55, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontSize: 18, fontWeight: 800, color: accent, marginTop: 4 }}>{value}</div>
    </div>
  );
}

function ProfileScreen({ me, submissions, refresh, dark }) {
  const mine = submissions.filter(s => s.identifier === me.identifier);
  const myVotes = submissions.filter(s => s.votes.some(v => v.identifier === me.identifier));
  const [editingProfile, setEditingProfile] = React.useState(false);

  // Settings-mode form embedded inline. After save we both re-fetch /api/me
  // (so the displayed name and avatar update) and exit edit mode.
  if (editingProfile) {
    const handleSaved = async () => {
      if (refresh) await refresh();
      setEditingProfile(false);
    };
    return <ArtistProfileForm me={me} dark={dark} mode="settings" onSaved={handleSaved}/>;
  }

  // Avatar source: user's chosen profile avatar if set, otherwise the
  // initial-letter ApAvatar fallback.
  const avatarUrl = me.artistProfile?.avatarUrl;

  return (
    <div style={{ padding: '28px 32px', maxWidth: 900, margin: '0 auto' }}>
      <ApGlass dark={dark} radius={20} padding={26} style={{ marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          {avatarUrl ? (
            <div style={{
              width: 72, height: 72, borderRadius: '50%', flexShrink: 0,
              background: `url(${avatarUrl}) center/cover`,
              boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
            }}/>
          ) : (
            <ApAvatar player={me} size={72}/>
          )}
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4, flexWrap: 'wrap' }}>
              <h1 style={{ fontSize: 26, fontWeight: 800, margin: 0, letterSpacing: -0.5 }}>{me.name}</h1>
              <ApRolePill player={me} dark={dark}/>
              {isBanned(me) && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  padding: '3px 9px', borderRadius: 100,
                  fontSize: 10.5, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase',
                  background: 'rgba(239,68,68,0.18)', color: '#f87171',
                  border: '1px solid rgba(239,68,68,0.45)',
                }}>
                  <ApIcon name="x" size={11} color="#f87171"/> Gebannt
                </span>
              )}
              {isBlocked(me) && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  padding: '3px 9px', borderRadius: 100,
                  fontSize: 10.5, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase',
                  background: 'rgba(127,29,29,0.25)', color: '#fca5a5',
                  border: '1px solid rgba(220,38,38,0.5)',
                }}>
                  <ApIcon name="shield" size={11} color="#fca5a5"/> Gesperrt
                </span>
              )}
            </div>
            <div style={{ fontSize: 13, opacity: 0.65, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
              {me.discord && (
                <>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                    <ApIcon name="discord" size={14} color="#5865F2"/> @{me.discord}
                  </span>
                  <span>·</span>
                </>
              )}
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <ApIcon name="clock" size={14}/> {me.playtime}h Spielzeit
              </span>
              <span>·</span>
              <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 11.5, opacity: 0.7 }}>{me.identifier}</span>
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 22 }}>
          <Stat
            label="Hochladen"
            value={
              isBanned(me) ? 'Gebannt'
              : isBlocked(me) ? 'Gesperrt'
              : canSubmit(me) ? 'Freigeschaltet'
              : `noch ${100 - me.playtime}h`
            }
            accent={
              isBanned(me) ? '#f87171'
              : isBlocked(me) ? '#fca5a5'
              : canSubmit(me) ? '#34d399'
              : '#fbbf24'
            }
            dark={dark}
          />
          <Stat label="Abstimmen"          value={canVote(me) ? 'Ja' : 'Nein'}        accent={canVote(me) ? '#34d399' : '#9ca3af'} dark={dark}/>
          <Stat label="Direkt entscheiden" value={canForceAccept(me) ? 'Admin' : 'Nein'} accent={canForceAccept(me) ? '#fbbf24' : '#9ca3af'} dark={dark}/>
        </div>

        {hasArtistProfile(me) && (
          <button
            onClick={() => setEditingProfile(true)}
            style={{
              marginTop: 18, padding: '10px 16px', borderRadius: 10,
              background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.6)',
              border: dark ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(0,0,0,0.08)',
              color: 'inherit', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontSize: 13, fontWeight: 600,
            }}
          >
            <ApIcon name="image" size={14}/>
            Künstlerprofil bearbeiten
          </button>
        )}
      </ApGlass>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <ApGlass dark={dark} radius={18} padding={18}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', opacity: 0.65, marginBottom: 12 }}>
            Meine Tracks ({mine.length})
          </div>
          {mine.length === 0
            ? <div style={{ fontSize: 13, opacity: 0.55 }}>Noch keine Tracks hochgeladen.</div>
            : mine.map(s => (
              <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
                <ApCover colors={s.cover} src={s.coverUrl} size={36} radius={8}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{s.title}</div>
                  <div style={{ fontSize: 11, opacity: 0.55 }}>{timeAgo(s.submittedAt)}</div>
                </div>
                <ApStatusPill status={s.status}/>
              </div>
            ))}
        </ApGlass>

        <ApGlass dark={dark} radius={18} padding={18}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', opacity: 0.65, marginBottom: 12 }}>
            Deine Stimmen ({myVotes.length})
          </div>
          {myVotes.length === 0
            ? <div style={{ fontSize: 13, opacity: 0.55 }}>Du hast noch über nichts abgestimmt.</div>
            : myVotes.map(s => {
              const v = s.votes.find(v => v.identifier === me.identifier);
              return (
                <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
                  <ApCover colors={s.cover} src={s.coverUrl} size={36} radius={8}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{s.title}</div>
                    <div style={{ fontSize: 11, opacity: 0.55 }}>{s.artist}</div>
                  </div>
                  <span style={{ fontSize: 12, fontWeight: 700, color: v.vote === 'accept' ? '#34d399' : '#f87171' }}>
                    {v.vote === 'accept' ? '✓ Dafür' : '✕ Dagegen'}
                  </span>
                </div>
              );
            })}
        </ApGlass>
      </div>
    </div>
  );
}

window.ProfileScreen = ProfileScreen;